طراحی برای وب در فتوشاپ : طراحی UI, UX

UI/UX و نحوه ایجاد وب سایت خیره کننده | همه چیزهایی که باید در مورد طراحی وب در سال 2022 بدانید | همه در فتوشاپ

عنوان اصلی : Master Web Design in Photoshop: Complete UI/UX Masterclass

سرفصل های دوره :

مقدمه:
کتاب کار این بخش را دانلود کنید
فتوشاپ را برای طراحی وب راه اندازی کنید
نحوه انتخاب لایه ها مانند یک حرفه ای
در اینجا به این دلیل است که شرکت ها به وب سایت هایی نیاز دارند که در فتوشاپ طراحی شده باشند
تمرین: یک وب سایت ایجاد کنید و 3 اشتباه را شناسایی کنید
حل تمرین قبلی
سه رکن یک طراح وب بزرگ
امتحان طراحی وب شماره 1
اولین رکن طراحی وب:
کتاب کار این بخش را دانلود کنید
اولین رکن طراحی وب
بهترین تنظیمات برای پروژه طراحی وب
مطالعه موردی: طرح‌بندی‌های غیر استاندارد
تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید
چگونه عناصر وب خود را به درستی اندازه کنیم
فرمول من برای متن کامل
تضاد رنگ
مطالعه موردی: رنگها - قسمت 1
مطالعه موردی: رنگها - قسمت 2
نحوه تراز کردن عناصر در ناحیه قهرمان
نحوه تراز کردن نمادها با متن
3 قانون برای نمادهای طراحی وب
مطالعه موردی: تعادل بصری
نظراتی در مورد رکن اول طراحی وب سایت
امتحان طراحی وب شماره 2
رکن دوم طراحی وب :
کتاب کار این بخش را دانلود کنید
مقدمه
هدف وب سایت چیست؟
کاربر در مقابل مالک کسب و کار
تحلیل در طراحی وب
قالب ها و سازندگان وب سایت - مرگ طراح وب؟
طرح صفحه اصلی تجارت الکترونیک
جزئیات محصول تجارت الکترونیک
تسویه حساب تجارت الکترونیک
مطالعه موردی: فروشگاه مبلمان
چرا وب سایت ها پیکسل کامل نیستند؟
صفحه فرود در مقابل یک وب سایت
مطالعات موردی: نیازهای مشتری
تولید سرنخ در صفحات فرود
چرا صفحات فرود شهرت بدی دارند؟
مطالعه موردی: وب سایت یا گالری عکس؟
صفحه فرود محصول دیجیتال
آزمایش صفحات فرود A/B
مطالعه موردی: تحلیل صفحه فرود
مطالعه موردی: سایت طراح وب
نظرات نهایی در مورد نیازهای مشتری
امتحان طراحی وب شماره 3
رکن سوم طراحی وب:
کتاب کار این بخش را دانلود کنید
مقدمه
UX چیست؟
بهترین نمونه از UX خوب و توجه به جزئیات
فرایند پرداخت را بهبود بخشید تا فروش را دو برابر کنید
نسخه موبایل را بهبود بخشید تا فروش آن دو برابر شود
7 ترفند وب سایت که توجه به جزئیات را نشان می دهد
ارتقا صفحه محصول موبایل
انجام جلسات 1 به 1 با کدگذار
از Photoshop تا Working Code:
کتاب کار این بخش را دانلود کنید
آماده سازی طرح برای کدنویسی
برخاستن و اجرا با Zeplin
از فتوشاپ تا زپلین
دریافت محصولات قابل تحویل از فتوشاپ
محتوای سمت سرور و گرافیک چند لایه
نحوه انجام فرآیند تحویل
اطلاعیه مهم
اصول:
دزدی دریایی و دزدی
مانیتورها: بهترین انواع پنل، وضوح، نام تجاری، اندازه
طراحی وب فقط در فتوشاپ، بدون کدنویسی
آنچه باید درباره فتوشاپ بدانید
چگونه از مهارت هایی که می خواهید یاد بگیرید درآمد کسب کنید
سیستم های شبکه ای
تنظیم فضای کاری
موضوعاتی که به طور عمیق به آنها نمی پردازم
اصول:
کتاب کار برای این بخش
ارتباط موثر برقرار کنید
ارتباط موثر در مسابقه
یک وب سایت باید داستانی را تعریف کند و فضا را ایجاد کند
ساده و تمیز یا با جزئیات زیاد؟
چگونه نیازهای مشتریان را درک کنیم
همه چیز درباره الهام
چگونه الهام می‌گیرم
ورزش: الهام بخش
رویکرد گام به گام
عملی: استفاده از روش گام به گام برای ایجاد یک نماد
همه چیز درباره وایرفریم
مسابقه همه چیز درباره وایرفریم
نقش تصاویر، عکس های استوک و عکس های رایگان
گرافیک سفارشی
عملی: ایجاد گرافیک سفارشی
ابزارهای تراز
تقارن، فاصله مناسب و فضای سفید
اصول دوم:
کتاب کار برای این بخش
کار بر روی یک "پروژه کوچک"
«ساده، مدرن، تمیز» و دیگر اصطلاحات مشتری در واقع به چه معنا هستند
استفاده از سبک های لایه به روش صحیح
تله های تخیل شما
درک کنتراست
استفاده از امکانات رایگان و معنای طراح بودن
بهینه سازی پانل لایه های شما
دست در دست: چگونه یک پروژه کثیف را سازماندهی کنیم
محتوای ساختگی
طراحی لوگو
اهمیت سرعت
انتخاب پروژه های مناسب
راهنمای قیمت گذاری برای کار شما
چگونه مدام بهتر شویم
نکات، ترفندها و تکنیک های تایپوگرافی:
کتاب کار برای این بخش
بهترین منابع برای فونت ها
پانل شخصیت
چگونه یک فونت را شناسایی کنیم
ترکیب فونت ها
نکات، ترفندها و تکنیک های تایپوگرافی
پروژه:
مقدمه و شرح پروژه
تنظیم طرح
قرار دادن محتوا
ایجاد هدر
ایجاد ناحیه قهرمان
ایجاد ناحیه محتوا
ایجاد قسمت گواهینامه و پاورقی
نتیجه گیری
پروژه طراحی تخت :
طراحی تخت: تعریف، مثال ها، انیمیشن های مسطح، تاریخچه، اسکئومورفیسم
از این اشتباهات طراحی مسطح اجتناب کنید
ساخت یک وب سایت مسطح - مقدمه
بیلدیng یک وب سایت صاف - ایجاد هدر
ساخت یک وب سایت مسطح - ایجاد نقطه مرکزی
ساخت یک وب سایت مسطح - گواهینامه ها و CTA ها
ساخت یک وب سایت مسطح - کار را با پاورقی تمام کنید
نتیجه گیری نهایی:
نتیجه گیری نهایی
همه منابع را از اینجا دانلود کنید:
همه منابع را از اینجا دانلود کنید
جدید! پروژه طراحی سایت ارگانیک:
درباره این به‌روزرسانی
درباره وب سایت های ارگانیک و اولین مطالعه موردی ما
تجزیه و تحلیل وب سایت های ارگانیک
نیاز به طرح های موضوعی
نقاط منفی طراحی وب سایت های ارگانیک
ارائه پروژه
تنظیم طرح
تحقیق دارایی‌ها، تابلوی خلق و خوی ما و تنظیم سبک خود
یافتن منابع بیشتر و تنظیم هدر
ایجاد یک منطقه قهرمان دقیق
ایجاد منطقه محتوا با تصاویر مقوله واقعی
طراحی فوتر و افزودن کمی جادو به سایت
به‌روزرسانی‌ها:
سبک شخصیت و پاراگراف
اشیاء هوشمند توضیح داده شد
نحوه استفاده از Smart Object
چگونه با Smart Objects یک ماکت واقعی بسازیم
نحوه استفاده از Adobe Generator
نحوه استفاده از Layer Comps
لایه ها با اشیاء هوشمند
به‌روزرسانی‌های مختلف:
برش آگاه از محتوا
4K برای طراحی وب: آیا ارزشش را دارد؟
یک فونت را با "Font Match" شناسایی کنید
Adobe CC Portfolio: چگونه به راحتی یک نمونه کار پاسخگو ایجاد کنیم
Face Liquify - ویرایش چهره جادویی
Select و Mask جایگزین Refine Edge می شود
بازخورد طراحی:
بازخورد طراحی شماره 1
بازخورد طراحی شماره 2
در حال مبارزه با طرح های خود - این را تماشا کنید
بازخورد طراحی شماره 3
چند کلمه از کریس بارین:
مهارت من بعد از 10 سال چقدر است؟
قبل از شروع کار آزاد این کار را انجام دهید
امتحان نهایی