آموزش تسلط بر طراحی UX/UI - از صفر تا وب‌سایت زنده - آخرین آپدیت

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

مبانی طراحی UX UX Design Basics

• ساختار دوره و فایل‌های پروژه Course Structure And Project Files

• به‌روزرسانی‌های دوره فیگما Figma Course Updates

• بخش اول: مبانی طراحی UX Section 1 UX Design Basics

• طراحی UX چیست What Is UX Design

• طراح UX چه کاری انجام می‌دهد What does UX Designer Do

• آیا UX همان UI است Is UX the same as UI

• مهارت‌های مورد نیاز طراح UX Skills UX Designer needs

• طراح UX سازمانی در مقابل فریلنسر In House VS Freelance UX Designer

• ابزارهای طراحان UX Tools For UX Designers

• منابع و تمرینات بخش اول Section 1 Resources & Assignment

بریف‌های طراحی Design Briefs

• بخش دوم: بریف‌های طراحی Section 2 - Design Briefs

• بریف طراحی چیست What is a design brief

• ایجاد بریف طراحی در Adobe Xd Creating a design brief in Adobe Xd

• بریف طراحی در Figma Design Brief in Figma

• منابع و تمرینات بخش دوم Section 2 Resources & Assignment

پروپوزال‌های پروژه Project Proposals

• بخش سوم: پروپوزال‌های پروژه Section 3 - Project Proposals

• پروپوزال پروژه چیست What is a project proposal

• چه زمانی باید آن را ارسال کنید When should you send it

• ایجاد پروپوزال پروژه در Adobe Xd Creating a project proposal in Adobe Xd

• کاور پروپوزال Proposal cover

• جزئیات پروژه Project details

• قیمت‌گذاری پروژه Project pricing

• شرایط و ضوابط Terms and conditions

• درباره شما About you

• پروپوزال پروژه در Figma Project Proposal In Figma

• منابع و تمرینات بخش سوم Section 3 Resources & Assignment

تحقیق کاربر و پرسوناها User Research And Personas

• بخش چهارم: تحقیق کاربر و پرسوناها Section 4 - User Research And Personas

• پرسونای کاربر چیست What is a User Persona

• انواع روش‌های تحقیق Types of research methods

• کمی در مقابل کیفی Quantitative VS Qualitative

• انتخاب شرکت‌کنندگان Choosing your participants

• بصری‌سازی داده‌ها Visualizing your data

• ایجاد پرسونای کاربر Creating your User Persona

• پرسوناهای کاربر در Figma User Personas In Figma

• منابع و تمرینات بخش چهارم Section 4 Resources & Assignment

تحلیل رقبا Competitive Analysis

• بخش پنجم: تحلیل رقبا Section 5 - Competitive Analysis

• تحلیل رقبا چیست What is a competitive analysis

• انواع تحلیل رقبا Types of competitive analysis

• نحوه انجام یک تحلیل کامل How to do a complete analysis

• نحوه انجام تحلیل ویژگی‌ها (Feature Analysis) How to do a feature analysis

• از چه ابزارهایی استفاده کنیم Which tools to use

• مواردی که باید به آن‌ها توجه کنید Things to look out for

• تمرینات بخش پنجم Section 5 Assignment

جریان‌های کاربر User Flows

• بخش ششم: جریان‌های کاربر Section 6 - User Flows

• جریان‌های کاربر چیستند What are user flows

• انواع مختلف جریان‌های کاربر Different user flow types

• چه زمانی از آن‌ها استفاده می‌شود When are they used

• ایجاد جریان‌های کاربر در Adobe Xd Creating user flows in Adobe Xd

• کار با فلوچارت‌ها در Adobe Xd Working with flowcharts in Adobe Xd

• اشتراک‌گذاری جریان‌ها Sharing your flows

• منابع و تمرینات بخش ششم Section 6 Resources & Assignment

وایر فریم‌های کاغذی Paper Wireframes

• بخش هفتم: وایر فریم‌های کاغذی Section 7 - Paper Wireframes

• وایر فریم‌های کاغذی چیستند What are paper wireframes

• چه عناصری را باید قرار داد Which elements to include

• استایل‌های وایر فریم Wireframe styles

• تجهیزات مورد نیاز Equipment you need

• ترسیم روی کاغذ ساده Drawing on plain paper

• ترسیم روی کاغذ شطرنجی (Dot Grid) Drawing on dot grid paper

• استفاده از قالب‌های قابل چاپ Using printable templates

• اشتراک‌گذاری وایر فریم‌ها Sharing your wireframes

• منابع و تمرینات بخش هفتم Section 7 Resources & Assignment

چیدمان و گریدها Layout And Grids

• بخش هشتم: چیدمان و گریدها Section 8 - Layout And Grids

• چیدمان (Layout) چیست What is a layout

• سیستم گرید چیست و چرا اهمیت دارد What is a grid system and why is it important

• نحوه تنظیم گریدها در Adobe Xd How to set up grids in Adobe Xd

• کار با Bootstrap Working with Bootstrap

• کار با سیستم گرید 8 پیکسلی Working with 8px Grid System

• ریتم افقی در Adobe Xd Horizontal rhythm in Adobe Xd

• منابع و تمرینات بخش هشتم Section 8 Resources & Assignment

تایپوگرافی و ترکیب فونت‌ها Typography And Font Pairing

• بخش نهم: تایپوگرافی و ترکیب فونت‌ها Section 9 - Typography And Font Pairing

• تفاوت تایپ‌فیس و فونت Typefaces VS Fonts

• انواع فونت‌ها Font Types

• وزن‌های فونت و نحوه استفاده از آن‌ها Font weights and how to use them

• انتخاب فونت‌ها Choosing fonts

• ترکیب فونت‌ها (Font Pairing) Font pairing

• مقیاس فونت (Font Scale) Font scale

• منابع و تمرینات بخش نهم Section 9 Resources & Assignment

آیکون‌گرافی Iconography

• بخش دهم: آیکون‌گرافی Section 10 - Iconography

• آیکون‌ها چیستند What are icons

• انواع مختلف آیکون‌ها Different types of icons

• کتابخانه‌ها، پک‌ها و فرمت‌های فایل آیکون Icon libraries, packs and file formats

• آیکون‌های رایگان در مقابل پریمیوم Free VS Premium Icons

• نکاتی برای بهترین نتایج Tips for best results

• منابع و تمرینات بخش دهم Section 10 Resources & Assignment

انتخاب رنگ Color Selection

• بخش یازدهم: انتخاب رنگ Section 11 - Color Selection

• چرا رنگ اهمیت دارد Why color is important

• چه رنگ‌هایی وجود دارند Which colors exist

• ترکیبات رنگی Color combinations

• ابزارهای انتخاب رنگ Color selection tools

• راهنمای استایل برای توسعه‌دهندگان Style guides for developers

• منابع و تمرینات بخش یازدهم Section 11 Resources & Assignment

تصاویر Images

• بخش دوازدهم: تصاویر Section 12 - Images

• چرا تصاویر اهمیت دارند Why are images important

• سه نوع تصویر پروژه 3 types of project images

• نحوه انتخاب تصاویر متناسب با نیچ How to choose niche images

• رایگان در مقابل پریمیوم Free VS Premium

• بهینه‌سازی تصاویر Image optimization

• ساختار نام‌گذاری Naming structure

• منابع و تمرینات بخش دوازدهم Section 12 Resources & Assignment

مود بُردها Mood Boards

• بخش سیزدهم: مود بُردها Section 13 - Mood Boards

• مود بُرد چیست و چرا از آن استفاده می‌کنیم What are mood boards and why use them

• چه عناصری را باید در نظر گرفت Which elements to consider

• نحوه انجام تحقیق بصری How to do your research

• ایجاد مود بُرد در Adobe Xd Create mood board in Adobe Xd

• اشتراک‌گذاری یا خروجی گرفتن از مود بُردها Share or export your mood boards

• منابع و تمرینات بخش سیزدهم Section 13 Resources & Assignment

یو‌آی کیت‌ها UI Kits

• بخش چهاردهم: یو‌آی کیت‌ها Section 14 - UI Kits

• یو‌آی کیت چیست و چرا مفید است What are UI kits and why are they useful

• انواع یو‌آی کیت‌ها Types of UI Kits

• کدام کامپوننت‌ها مهم هستند Which components are important

• ساختار یو‌آی کیت در Adobe Xd UI Kit structure in Adobe Xd

• ساخت یو‌آی کیت در Adobe Xd UI Kit creation in Adobe Xd

• یو‌آی کیت در مقابل سیستم طراحی UI Kit VS Design System

• یو‌آی کیت‌های پریمیوم در مقابل رایگان Premium VS Free UI Kits

• ساخت و فروش یو‌آی کیت خودتان Creating and selling your UI Kit

• منابع و تمرینات بخش چهاردهم Section 14 Resources & Assignment

سیستم‌های طراحی Design Systems

• بخش پانزدهم: سیستم‌های طراحی Section 15 - Design Systems

• سیستم طراحی چیست What is a design system

• ساختار یک سیستم طراحی Structure of a design system

• نمونه‌های سیستم طراحی Design system examples

• ایجاد یک سیستم طراحی در Adobe Xd Creating a design system in Adobe Xd

• توکن‌های طراحی (Design Tokens) Design tokens

• مقیاس‌پذیری سیستم طراحی Scaling your design system

• منابع و تمرینات بخش پانزدهم Section 15 Resources & Assignment

طراحی وب‌سایت در Adobe Xd Website Design in Adobe Xd

• بخش شانزدهم: طراحی وب‌سایت در Adobe Xd Section 16 - Website Design in Adobe Xd

• بریف طراحی Design Brief

• پروپوزال پروژه Project Proposal

• پرسونای کاربر User Persona

• تحلیل رقبا Competitive Analysis

• جریان‌های کاربر User Flows

• نقشه سایت و معماری محتوا Sitemap - Content Architecture

• وایر فریم‌های کاغذی Paper Wireframes

• تصاویر پروژه Project Images

• ایجاد مود بُرد Mood Board Creation

• گرید، تایپوگرافی و رنگ‌ها Grid, Typography and Colors

• طراحی صفحه اصلی Home Page Design

• طراحی صفحه اصلی (بخش دوم) Home Page Design Part 2

• طراحی صفحه اصلی (بخش سوم) Home Page Design Part 3

• طراحی صفحه اصلی (بخش چهارم) Home Page Design Part 4

• طراحی صفحه خودروها Cars Page Design

• صفحه جزئیات خودرو Car Details Page

• صفحه جزئیات خودرو (بخش دوم) Car Details Page Part 2

• طراحی لایت‌باکس (Lightbox) Lightbox Design

• صفحه وام‌ها Loans Page

• صفحه تماس با ما Contact Us Page

• انیمیت کردن طراحی Animating The Design

• خروجی گرفتن از دارایی‌ها (Assets) Exporting The Assets

• طراحی برای حالت ریسپانسیو Designing For Responsive

• آینده Adobe Xd Future Of Adobe Xd

• مقدمه‌ای بر طراحی وب‌سایت در Figma Website Design In Figma Introduction

• مود بُرد و نقشه سایت Mood Board And Sitemap

• جریان کاربر User Flow

• ایجاد استایل گاید Creating Style Guide

• ایجاد استایل گاید (بخش دوم) Creating Style Guide 2

• تنظیمات صفحه طراحی Design Page Setup

• طراحی صفحه اصلی (بخش اول) Home Page Design Part 1

• طراحی صفحه اصلی (بخش دوم) Home Page Design Part 2

• طراحی صفحه خودروها Cars Page Design

• طراحی صفحه خودروی انتخاب شده Selected Car Page Design

• طراحی صفحات وام، تماس با ما و لایت‌باکس Loans, Contact Us and Lightbox Design

• ایجاد پروتوتایپ‌ها در Figma Creating Prototypes in Figma

• خروجی گرفتن از دارایی‌ها در Figma Export Assets From Figma

• پلاگین Figma به Webflow Figma To Webflow Plugin

• فایل‌های پروژه و تمرینات بخش شانزدهم Section 16 Project Files & Assignment

پیاده‌سازی در Webflow Webflow Build

• بخش هفدهم: پیاده‌سازی در Webflow Section 17 - Webflow Build

• مقدمه‌ای بر Webflow Introduction To Webflow

• تنظیمات پروژه Setting up the project

• ایجاد استایل گاید Creating style guide

• ساخت نوار ناوبری (Navbar) Navbar build

• ساخت بخش Hero صفحه اصلی Home hero section

• ساخت بخش «ما کی هستیم» Who we are section

• ساخت بخش انتخاب خودرو Car selection section

• ساخت بخش پیشنهادها Offer section

• ساخت بخش مزایا Benefits section

• ساخت فرم تماس Contact form

• ساخت بخش نقشه Map section

• ساخت فوتر Footer section

• ایجاد کالکشن CMS Creating CMS Collection

• استفاده از کالکشن CMS Using CMS Collection

• ساخت صفحه خودروها Cars page build

• ساخت تمپلیت خودروها Cars Template Build

• ساخت تمپلیت خودروها (بخش دوم) Cars Template Build Part 2

• ساخت تمپلیت خودروها (بخش سوم) Cars Template Build Part 3

• ساخت تمپلیت خودروها (بخش چهارم) Cars Template Build Part 4

• لینک کردن کارت‌های خودرو Linking car cards

• ساخت صفحه وام‌ها Loans page

• ساخت صفحه تماس با ما Contact us page

• افزودن لینک‌ها Adding links

• ریسپانسیو برای تبلت Responsive tablet

• ریسپانسیو برای موبایل (افقی) Responsive - Mobile Landscape

• ریسپانسیو برای موبایل (عمودی) Responsive - Mobile Portrait

• انیمیشن‌ها در Webflow Animations in Webflow

• انتشار و خروجی کد Publish and Code Export

• بهینه‌سازی سئو (SEO) SEO Optimization

• تمرینات بخش هفدهم Section 17 Assignment

مطالعات موردی Case Studies

• بخش هجدهم: مطالعات موردی Section 18 - Case Studies

• مطالعه موردی (Case Study) چیست What is a case study

• عناصری که باید گنجانده شوند Elements to include

• ایجاد ساختار مطالعه موردی Creating case study structure

• نمونه‌های عالی از مطالعات موردی Awesome case study examples

• تولید محتوا و نویسندگی Content writing

• نکاتی برای ارائه (Presentation) Presentation tips

• منابع و تمرینات بخش هجدهم Section 18 Resources & Assignment

یافتن شغل Finding A Job

• بخش نوزدهم: یافتن شغل Section 19 - Finding A Job

• فریلنسینگ در مقابل آژانس Freelance VS Agency

• مسابقات طراحی Design Contests

• پلتفرم‌های گیگ (Gig Platforms) Gig Platforms

• دیجیتال نومدها (کوچ‌های دیجیتال) Digital Nomads

• پلتفرم‌های طراحی Design Platforms

• کارهای Webflow Webflow Jobs

• نکاتی برای پورتفولیو و منابع شغلی Portfolio Tips & Job Resources

جمع‌بندی دوره و گام‌های بعدی Course Conclusion And Next Steps

• جمع‌بندی دوره و گام‌های بعدی Course Conclusion And Next Steps