آموزش استاد طراحی وب در فتوشاپ: UI/UX Masterclass کامل

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

معرفی Introduction

• پاسخ سریع به سوالات رایج Quick answers to popular questions

• کتاب کار این بخش را دانلود کنید Download the workbook for this section

• طراحی وب توضیح داد: طراحی در مقابل کدنویسی Web design explained: Design vs Coding

• راه اندازی فتوشاپ برای طراحی وب Set up Photoshop for web design

• نحوه انتخاب لایه ها مانند یک حرفه ای How to select layers like a pro

• به همین دلیل شرکت ها به وب سایت هایی نیاز دارند که با فتوشاپ طراحی شده باشند Here's why companies need websites designed in Photoshop

• تمرین: یک وب سایت ایجاد کنید و 3 اشتباه را شناسایی کنید Exercise: create a website and identify 3 mistakes

• حل تمرین قبلی Solving the previous exercise

• سه رکن یک طراح وب بزرگ The three pillars of a great web designer

• مسابقه طراحی وب سایت شماره 1 Web Design Quiz #1

اولین رکن طراحی وب سایت The First Pillar of Web Design

• کتاب کار این بخش را دانلود کنید Download the workbook for this section

• اولین رکن طراحی وب The first pillar of web design

• بهترین تنظیمات برای یک پروژه طراحی وب Best settings for a web design project

• مطالعه موردی: طرح‌بندی‌های غیر استاندارد Case study: Non-standard layouts

• تمرین: یک طرح بندی وب سایت استاندارد ایجاد کنید Exercise: Create a standard website layout

• نحوه اندازه گیری صحیح عناصر وب How to size your web elements correctly

• فرمول من برای متن کامل My formula for perfect text

• مطالعه موردی: لایه های متن Case study: text layers

• کنتراست رنگ Color Contrast

• مطالعه موردی: رنگ ها - قسمت 1 Case study: Colors – Part 1

• مطالعه موردی: رنگ ها - قسمت 2 Case study: Colors – Part 2

• نحوه تراز کردن عناصر در ناحیه قهرمان How to align elements in the hero area

• نحوه تراز کردن آیکون ها با متن How to align icons with text

• 3 قانون برای آیکون های طراحی وب 3 rules for web design icons

• مطالعه موردی: تعادل بصری Case Study: Visual Balance

• نکاتی در مورد رکن اول طراحی وب سایت Thoughts on the first pillar of web design

• مسابقه طراحی وب سایت شماره 2 Web Design Quiz #2

رکن دوم طراحی وب سایت The second pillar of web design

• کتاب کار این بخش را دانلود کنید Download the workbook for this section

• معرفی Introduction

• هدف وب سایت چیست؟ What’s the point of the website?

• کاربر در مقابل مالک کسب و کار The user versus the business owner

• تجزیه و تحلیل در طراحی وب سایت Analytics in Web Design

• قالب ها و سازندگان وب سایت – مرگ طراح وب؟ Templates & Website Builders – The web designer’s death?

• مطالعه موردی: 4 نسخه از یک وب سایت Case Study: 4 versions of the same website

• طرح بندی صفحه اصلی تجارت الکترونیک E-commerce homepage layout

• جزئیات محصول تجارت الکترونیک E-commerce product details

• تسویه حساب تجارت الکترونیک E-commerce checkout

• مطالعه موردی: فروشگاه مبلمان Case Study: Furniture Store

• چرا وب سایت ها پیکسل کامل نیستند؟ Why aren’t websites pixel perfect?

• صفحه فرود در مقابل وب سایت Landing page vs a website

• مطالعات موردی: نیازهای مشتری Case studies: the client’s needs

• تولید سرنخ در صفحات فرود Lead generation in landing pages

• چرا صفحات فرود شهرت بدی دارند؟ Why landing pages have a bad reputation

• مطالعه موردی: وب سایت یا گالری عکس؟ Case Study: Website or Photo Gallery?

• صفحه فرود محصول دیجیتال Digital product landing page

• صفحات فرود تست A/B A/B testing landing pages

• مطالعه موردی: تحلیل صفحه فرود Case Study: Landing page analysis

• مطالعه موردی: سایت طراح وب Case Study: Web Designer's site

• افکار نهایی در مورد نیازهای مشتری Final thoughts about the client’s needs

• مسابقه طراحی وب سایت شماره 3 Web Design Quiz #3

رکن سوم طراحی وب The third pillar of web design

• کتاب کار این بخش را دانلود کنید Download the workbook for this section

• معرفی Introduction

• UX چیست؟ What's UX?

• بهترین نمونه از UX خوب و توجه به جزئیات The best example of good UX and attention to detail

• فرآیند پرداخت را بهبود بخشید تا فروش را دو برابر کنید Improve the checkout process to double sales

• نسخه موبایل را بهبود دهید تا فروش دو برابر شود Improve the mobile version to double sales

• 7 ترفند وب سایت که توجه به جزئیات را نشان می دهد 7 website tweaks that show attention to detail

• ارتقاء صفحه محصول موبایل Upgrading the mobile product page

• انجام جلسات 1 به 1 با کدگذار Doing 1-on-1 sessions with a coder

از فتوشاپ تا کد کار From Photoshop to Working Code

• کتاب کار این بخش را دانلود کنید Download the workbook for this section

• آماده سازی طرح برای کدنویسی Preparing the design for coding

• بلند شدن و دویدن با زپلین Getting up and running with Zeplin

• از فتوشاپ تا زپلین From Photoshop to Zeplin

• دریافت کالاهای تحویلی از فتوشاپ Getting deliverables out of Photoshop

• محتوای سمت سرور و گرافیک چند لایه Server-side content and multi-layer graphics

• نحوه رسیدگی به فرآیند واگذاری How to handle the handover process

• اطلاعیه مهم Important notice

اصول اولیه The basics

• دزدی دریایی و دزدی Piracy & stealing

• مانیتورها: بهترین انواع پنل، وضوح، نام تجاری، اندازه Monitors: best panel types, resolution, brand, size

• طراحی وب فقط در فتوشاپ، بدون کدنویسی Web design just in Photoshop, no coding

• آنچه باید در مورد فتوشاپ بدانید What you need to know about Photoshop

• چگونه از مهارت هایی که می خواهید یاد بگیرید درآمد کسب کنید How to monetize the skills you are about to learn

• سیستم های شبکه ای Grid systems

• راه اندازی فضای کاری Setting up your workspace

• موضوعاتی که به طور عمیق به آنها نمی پردازم Topics I won't cover in depth

اصول The Principles

• کتاب کار برای این بخش Workbook for this Section

• ارتباط موثر برقرار کنید Communicate effectively

• ارتباط موثر مسابقه Communicate effectively quiz

• یک وب سایت باید داستانی را تعریف کند و فضا را ایجاد کند A website must tell a story and create an atmosphere

• ساده و تمیز یا با جزئیات زیاد؟ Simple & clean or highly detailed?

• چگونه نیازهای مشتریان را درک کنیم How to understand the clients' needs

• همه چیز در مورد الهام All about inspiration

• دست در دست: چگونه الهام می‌گیرم Hands on: How I get my inspiration

• ورزش: الهام بخش Exercise: Inspiration

• رویکرد گام به گام Step by step approach

• عملی: استفاده از روش گام به گام برای ایجاد یک نماد Hands-on: Using the step by step approach to create an icon

• همه چیز در مورد وایرفریم All about wireframes

• مسابقه همه چیز در مورد وایرفریم All about wireframes quiz

• نقش تصاویر، عکس های استوک و عکس های رایگان The role of imagery, stock photos and free photos

• گرافیک سفارشی Custom Graphics

• عملی: ایجاد گرافیک سفارشی Hands-on: Creating custom graphics

• ابزار تراز Alignment tools

• تقارن، فاصله مناسب و فضای سفید Symmetry, proper spacing and white space

• کار با خلاصه Working with a brief

اصول دوم The Principles II

• کتاب کار برای این بخش Workbook for this Section

• کار بر روی یک "پروژه کوچک" Working on a ‘small project’

• «ساده، مدرن، تمیز» و دیگر اصطلاحات مشتری در واقع به چه معنا هستند What ‘simple, modern, clean’ & other client terms actually mean

• استفاده از سبک های لایه به روش صحیح Using layer styles the right way

• دام های تخیل شما The pitfalls of your imagination

• درک کنتراست Understanding contrast

• استفاده از امکانات رایگان و معنای طراح بودن Using freebies & the meaning of being a designer

• بهینه سازی پنل لایه های خود Optimizing your layers panel

• دست در دست: چگونه یک پروژه کثیف را سازماندهی کنیم Hands on: How to organize a messy project

• محتوای ساختگی Dummy content

• طراحی لوگو Logo design

• اهمیت سرعت The importance of speed

• انتخاب پروژه های مناسب Choosing the right projects

• راهنمای قیمت گذاری کار شما Pricing guide for your work

• چگونه مدام بهتر شویم How to constantly get better

نکات، ترفندها و تکنیک های تایپوگرافی Typography tips, tricks and techniques

• کتاب کار برای این بخش Workbook for this Section

• بهترین منابع برای فونت Best sources for fonts

• پانل شخصیت The Character Panel

• نحوه تشخیص فونت How to identify a font

• مخلوط کردن فونت ها Mixing fonts

• نکات، ترفندها و تکنیک های تایپوگرافی Typography tips, tricks and techniques

پروژه The project

• معرفی و شرح پروژه Introduction & project description

• تنظیم طرح Setting the layout

• قرار دادن در محتوا Putting in content

• ایجاد هدر Creating the header

• ایجاد منطقه قهرمان Creating the hero area

• ایجاد منطقه محتوا Creating the content area

• ایجاد مناطق گواهینامه و پاورقی Creating the testimonial and footer areas

• نتیجه گیری Conclusions

پروژه طراحی تخت Flat design project

• طراحی مسطح: تعریف، مثال ها، انیمیشن های مسطح، تاریخچه، اسکئومورفیسم Flat design: definition, examples, flat animations, history, skeuomorphism

• از این اشتباهات طراحی مسطح اجتناب کنید Avoid these flat design mistakes

• ساخت یک وب سایت مسطح - مقدمه Building a flat website - Introduction

• ساخت یک وب سایت مسطح – ایجاد هدر Building a flat website – Creating the header

• ساخت یک وب سایت مسطح – ایجاد نقطه مرکزی Building a flat website – Creating the central point

• ساخت یک وب سایت مسطح - گواهینامه ها و CTA ها Building a flat website – Testimonials and CTAs

• ساختن یک وب سایت صاف – پایان کار با فوتر Building a flat website – Finishing up with the footer

نتیجه گیری نهایی Final conclusions

• نتیجه گیری نهایی Final conclusions

همه منابع را از اینجا دانلود کنید Download all resources here

• همه منابع را از اینجا دانلود کنید Download all resources here

• پیش نمایش منابع Preview the resources

جدید! پروژه طراحی سایت ارگانیک New! Organic website design project

• درباره این به روز رسانی About this update

• درباره وب سایت های ارگانیک و اولین مطالعه موردی ما About organic websites and our first case study

• تجزیه و تحلیل وب سایت های ارگانیک Analyzing organic websites

• نیاز به طرح های موضوعی The need for thematic designs

• نکات منفی طراحی وب سایت های ارگانیک The downside of organic website designs

• ارائه پروژه Presenting the project

• تنظیم طرح Setting up the layout

• تحقیق در مورد دارایی ها، تابلوی خلق و خوی ما و تنظیم سبک خود Researching assets, our mood board, and setting our style

• یافتن منابع بیشتر و تنظیم هدر Finding more resources and setting the header

• ایجاد یک منطقه قهرمان دقیق Creating a detailed hero area

• ایجاد منطقه محتوا با تصاویر مقوله واقعی Creating the content area with realistic category images

• طراحی فوتر و اضافه کردن کمی جادو به سایت Designing the footer and adding a bit of magic to the site

به روز رسانی ها Updates

• معرفی این بخش Introduction to this section

• شخصیت و سبک پاراگراف Character & Paragraph Styles

• اشیاء هوشمند توضیح داده شده است Smart Objects explained

• نحوه استفاده از یک شی هوشمند How to use a Smart Object

• نحوه ایجاد یک ماکت واقعی با اشیاء هوشمند How to create a realistic mockup with Smart Objects

• نحوه استفاده از Adobe Generator How to use Adobe Generator

• نحوه استفاده از Layer Comps How to use Layer Comps

• ترکیب لایه ها با اشیاء هوشمند Layer Comps with Smart Objects

به روز رسانی های مختلف Various Updates

• برش آگاه از محتوا Content-Aware Crop

• 4K برای طراحی وب: آیا ارزشش را دارد؟ 4K for web design: is it worth it?

• فونت را با "Font Match" شناسایی کنید Identify a font with ‘Match Font’

• گلیف - دوست یا دشمن؟ Glyphs – friend or enemy?

• Adobe CC Portfolio: چگونه به راحتی یک نمونه کار پاسخگو ایجاد کنیم Adobe CC Portfolio: How to easily create a responsive portfolio

• Face Liquify – ویرایش جادویی صورت Face Liquify – Magic face editing

• انتخاب کنید و Mask جایگزین Refine Edge می شود Select and Mask replaces Refine Edge

بازخورد طراحی Design Feedback

• بازخورد طراحی شماره 1 Design Feedback #1

• بازخورد طراحی شماره 2 Design Feedback #2

• در حال مبارزه با طرح های خود - این را تماشا کنید Struggling with your designs - watch this

• بازخورد طراحی شماره 3 Design Feedback #3

چند کلمه از کریس بارین A few words from Chris Barin

• سطح مهارت من بعد از 10 سال چقدر است؟ What's my skill level after 10 years?

• قبل از شروع کار آزاد این کار را انجام دهید Do this before you start freelancing

• مسابقه نهایی Final quiz