نحوه طراحی قالب سایت خوب و زیبا

درود...
نمونه قالب HTML و بوت استرپ دانلود و روش کار کن و به سلیقه بخش های مختلف قالب تغییر بدید ...

از نظر شما خوبه که با فوتوشاپ قالب بسازم؟

@arshiaas1973
اول می توانید قالب رو با فتوشاپ با خروجی PSD طراحی کنید و صد البته این ایده منسوخ شده ...
دوم می توانید به صورت ذهنی پروژه رو با بوت استرپ کد بزنید ....

خیلی ممنون

@endworld

اول می توانید قالب رو با فتوشاپ با خروجی PSD طراحی کنید و صد البته این ایده منسوخ شده ...

ببخشید من یه سوال دارم ، اگه طراحی با فوتوشاپ منسوخ شده ، الآن برای دیزاین یه وب سایت ، باید از چه روش یا تکنولوژی استفاده کنیم ؟

@sina
برای طراحی سمت کاربر وب سایت می توانید با چارچوب بوت استرپ یا Bulma کد بزنید و قبلش باید HTML و CSS بلد باشید...

اگر طراح فتوشاپی باشه که طرح اولیه رو با فتوشاپ پیاده کنه، اتفاقا کمک حال ِ طراح رابط کاربری هم خواهد بود.

برای طراحی اتود اولیه سایت الان دیگه از فتوشاپ استفاده نمیشه. Adobe XD استفاده کنید.

ادوبی ایکس دی یک نرم‌افزار طراحی رابط کاربری و طراحی تجربه کاربری که توسط ادوبی تهیه و منتشر شده‌است. این نرم‌افزار از طراحی برداری و طراحی Wireframe پشتیبانی می‌کند و در آن می‌توانید تنها با یک کلیک پروتوتایپ تعاملی بسازید.

@endworld ببخشید پیشنهاد میکنم یه تجدید نظر روی دانشتون داشته باشید بهتره برای خودتون، یه طرح خوب و عالی رو بیاد ذهنی بزنه؟؟؟ متوجه هستی داری چی میگی؟؟ طراحی با فتوشاپ منسوخ شده و الان دیگه از بوت استرپ استفاده میکنند؟؟؟ مگه با فتوشاپ قالب html طراحی میکنند که منسوخ شده الان به جاش از بوت استرپ استفاده میکنند.
خواهشا اگه دانشش رو ندارید یا اطلاعاتتون کافی نیست دیگران رو هم به اشتباه نندازید.
ببخشید یکم رک صحبت کردم ولی لازم بود بگم، کلا منظورم همه دوستان بود

@hossein.r.1442
دوستمون شاید پروژه هاش رو ذهنی پیاده میکنه تا با استفاده از Adobe XD، اوایل کار خودمم پروژه های دیگران رو می دیدم و خودمم تویی همون طراحی یک چیزهای که به ذهنم میومد به طرح اضاف میکردم. :)

ببینید یه وبسایت عالی و زیبا هیچ وقت از html شروع نشده
برای انجام یه وبسایت عالی شما باید چندین کار رو انجام بدین اول نیاز دارین که ایده تون رو بیارین روی کاغذ که بهش وایرفریم میگن البته ابزار کامپیوتریش هم هست، بعد حالا باید وایر فریم رو تبدیل کنیم به یه طرح ui کامل که برای انجام این کار هم ابزار های زیادی هست مثل، adobe xd, figma, invision studio, sketch, uxpin و... حالا که صفحات رو طراحی کردید باید پروتوتایپ که مربوط میشه به اینتراکشن ها و کلا نحوه حرکت بین صفحات که برای انجام این کارهم ابزار زیادی هست که برنامه هایی که دربالا نام بردم هم این قابلیت رو دارند و چند ابزار دیگه هم هست، حالا باید براساس موارد بالا شروع کنید به کدنویسی و یه قالب استاتیک رو آماده کنید و درنهایت تبدیل بشه به یه وبسایت داینامیک.
مواردی که دربالا گفتم مراحل انجام یه رابط کاربری حرفه ای و مدیریت شده

@hossein.r.1442
خیلی ممنون بابت توضیحاتتون ، کامل متوجه شدم .

@hossein.r.1442
ممنون از توضیحات تون، من نمی دونستم تا این حد میشه طرح اولیه رو پیاده سازی کرد. مثلا حرکت بین صفحات رو اصلا نشنیده بودم که اینطوری اتفاق بیفته.
میشه گام های یادگیری پیشنهادی ای رو بهم بدین در یادگیری این موارد؟ ممنون میشم.

در نظر بگیرید که هدف من این نیست که طراح گرافیکی بشم، میخوام طراحی رابط کاربری باشم و در صورت لزوم از ابزارهای کمکی استفاده کنم.

@milad
ببینید اون مواردی که مربوط به پروتوتایپ گفتم و گفتم که انیمیشن های حرکت بین صفحات و اینتراکشنها رو با این برنامه ها انجام میدن، با این برنامه ها فقط یه طرح برای نمایش به بچه های فرانت پیاده میکنند و بچه های فرانت اند کار باید بیان و اون انیمیشن ها رو کدنویسی کنند.
موضوع فرانت اند و طراحی رابط کاربری رو میشه گفت تقریبا جدا از هم دیگه هستند، یعنی بعضی ها طراح اند و میان این مواردی که گفتم رو پیاده میکنند و یه سری هم کد میزنند، البته اگه کسی قرار باشه فقط وقتشه روی فرانت اند بذاره بهتره یه دوره طراحی رابط کاربری به همراه تجربه کاربری هم بگذرونه.

@hossein.r.1442
ببینید، اینطوری در نظر بگیرید:
من کدنویسی با html css js و ... رو بلدم و در پیاده سازی کارم رو بلدم.

واسه مراحل آماده سازی قبل ترش رو حالا در نظر بگیرید: یعنی میخوام طرح اولیه سایت رو هم خودم درست کنم، خودم بیام چندتا طرح گوناگون رو باهم ترکیب کنم و بتونم به کسی نشون بدم بدون اینکه الان به مرحله ی کدنویسی رسیده باشم. یک عکسی از صفحات سایتم رو درست کنم. حالا اگه میشه متحرک هم کردش که بهتر، میشه پویانمایی هم کرد که بهتر و ..
توی این مرحله منظورمه: چه چیزهایی رو باید مرحله به مرحله یاد بگیرم که کارم رو راه بندازه.
الان در حد برنامه paint فقط کار گرافیکی می تونم انجام بدم :)

@hossein.r.1442
من کارم همینه...

قبلا برای پیاده سازی ایده صفحات قالب اول طرح رو فتوشاپ می زدم و بعد تبدیل به کدش می کنم...

ولی الان برای پیاده سازی صفحات قالب بدون اینکه طرحی فتوشاپی داشته باشم, کد می زنم و از ابزار فتوشاپ و ادوبی ایکس دی استفاده نمی کنم و هر چیزی توی ذهنم باشه کد می زنم...

احساس می کنم طراحی صفحات قالب با فتوشاپ یا ادوبی ایکس دی وقت آدم رو می گیره و برای همین روش دوم پیش میرم...

@endworld روی کاغذ بله اگه طرح رو با برنامه دیگه ای بزنید وقت گیر تره اما در عمل این اتفاق نمیوفته.
شما در نظر بگیر اومدی یه تصویری استفاده کردی برای هدر، بعد به دلت نمیشینه می خوای تصویر رو تغییر بدی و کلا جاشو هم تغییر بدی و بذاری گوشه سمت راست با یه نوشته زیرش، این تغییر توی کد چه وقت زمان نیاز داره و توی ایکس دی چه مقدار؟
و موضوع دیگه اینکه طرحی که شما از قبل پیاده کنی قطعا خیلی قابل اعتماد تر خواهد بود تا طرحی فی البداهه

@milad
ببینید شما برنامه adobe XD رو نصب کنید رایگانم هست و چون از سایر برنامه های پیشنهادی محیط ساده تر و راحت تری داره پیشنهاد میکنم
یکم با ابزاراش بازی کنید تا اول برنامه دستتون بیاد یا چندتا ویدئو اموزشی توی یوتیوب دربارش ببینید (خودم دارم یه دوره رایگان براش تهیه میکنم ولی فعلا آماده نشده) بعد بشینید سایت هایی مثلdribbble و behance و uplabs رو زیر و روکنید توی این وبسایت ها طراحان مشهور تازه ترین کارهای طراحیشونو میذارن و ایده بگیرید، چندتا عکساشو بردارید و بیارید توی توی ایکس دی و سعی کنید شما هم مثل اون طراحی کنید بعد طراحی توی همون ایکس دی به راحتی هرچه تمام طر میتونید پروتوتایپ تون رو بسازید به عنوان مثال وقتی کاربر روی دکمه جستجو کلیک کرد باکس جستجو با یه انیمیشنی نمایش داده بشه و با خروج موس برگرده به حالت قبل یا وقتی روی دکمه کلیک کرد اسکرول بشه ادامه وبسایت و.... ، توی پست اینستاگرام زیر آموزش ساخت انیمیشن دکمه جستجو توی ایکس دی رو گذاشتم
https://www.instagram.com/p/B7_NqifJ7jP/
یا توی لینک زیر یه طرح رایگان گذاشتم برای دانلود
https://roocket.ir/discuss/5764
توی این ویرگول هم درباره نئومرفیسم ترند این روزهای طراحی رابط کاربری نوشتم
http://vrgl.ir/GpmPl
توی این ویرگول هم آموزش ساخت یه طرح نئومرفیسم با ایکس دی رو گذاشنم
http://vrgl.ir/2Mzv1

@milad
و کار دیگه ای هم میتونی انجام بدی، حتی اگه دوست نداشته باشی خودت شروع کنی به طراحی توی ایکس دی میتونی عکسهایی که داری رو برای هر صفحه توی آرت برد جداگونه قرار بدی و بعد از قسمت پروتوتایپ نوع انتقال صفحات رو بسازی، مثلا وقتی روی این دکمه کلیک شد قراره چه صفحه ای نمایش داده بشه

@hossein.r.1442
سپاس از شما مهندس، خیلی لطف می کنید که با جزئیات توضیح میدین.
به پیوندهایی که قرار دادین هم الان سر می زنم و مطالعه می کنم. مطمئنم بعدا هم واسم مفید خواهد بودش.

مهندس شما با این تفاسیر به من برنامه ی Adobe Xd رو توصیه کردین و برنامه ی دیگه ای رو نیاز ندیدید که بخوام یاد بگیرم، درسته؟ یعنی حتی فتوشاپ رو هم جهت کاربردی که من مدنظرم هستش نیاز ندیدید و با همین Adobe Xd بهمراه توضیحات دیگه ای که قرار دادین می تونم در جهت طرح اولیه قدم بردارم. درسته؟ پیشنهاد شما اینه برای من؟