آموزش تسلط در طراحی UX/UI - از تئوری تا وب سایت زنده در Adobe Xd و Webflow

درس ها Lessons

• طراح UX چه می کند What does UX designer do

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

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

• کدام رنگ ها وجود دارد Which colors exist

• فرم تماس Contact Form

• ایجاد تابلوی خلق و خو Mood Board Creation

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

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

• بخش 17 ساخت جریان وب SECTION 17 Webflow Build

• نحوه راه اندازی شبکه ها در Adobe Xd How to set up grids in Adobe Xd

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

• بخش 8 تکلیف SECTION 8 ASSIGNMENT

• بخش 4 تکلیف SECTION 4 ASSIGNMENT

• نقاشی روی کاغذ ساده Drawing on plain paper

• ترکیب رنگ Color combinations

• نحوه انجام تحلیل ویژگی How to do a feature analysis

• کتابخانه‌های آیکون، بسته‌ها و فرمت‌های فایل Icon Libraries, Packs And File Formats

• بخش 10 شمایل نگاری SECTION 10 Iconography

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

• طراحی روی کاغذ شبکه نقطه ای Drawing on dot grid paper

• بخش 7 قاب های کاغذی SECTION 7 Paper Wireframes

• بخش 3 پیشنهادات پروژه SECTION 3 Project Proposals

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

• طراحی برای واکنش گرا Designing For Responsive

• بخش 1 تکلیف SECTION 1 ASSIGNMENT

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

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

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

• بخش 18 تکلیف SECTION 18 ASSIGNMENT

• مقدمه ای بر جریان وب Introduction To Webflow

• مهارت هایی که طراح UX نیاز دارد Skills UX designer needs

• راه اندازی پروژه Setting Up The Project

• طراحی صفحه اتومبیل Cars Page Design

• صفحه وام Loans Page

• آیکون ها چیست؟ What Are Icons

• طراحی صفحه اصلی قسمت 2 Home Page Design Part 2

• نکاتی برای بهترین نتایج Tips For Best Results

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

• ماشین ها صفحه ساخت Cars Page Build

• کیت UI در مقابل سیستم های طراحی UI Kit VS Design Systems

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

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

• خلاصه طراحی Design Brief

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

• رایگان VS Premium Free VS Premium

• قاب های کاغذی چیست؟ What are paper wireframes

• پیشنهاد پروژه چیست What is a project proposal

• عناصر برای گنجاندن Elements To Include

• ایجاد خلاصه طراحی در Adobe Xd Creating a design brief in Adobe Xd

• بخش ما کی هستیم Who We Are Section

• ایجاد و فروش کیت UI شما Creating and selling your UI Kit

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

• مقیاس بندی سیستم طراحی شما Scaling your design system

• نکات نمونه کارها Portfolio Tips

• بخش 13 تابلوهای خلق و خو SECTION 13 Mood Boards

• ایجاد ساختار مطالعه موردی Creating Case Study Structure

• بخش پاورقی Footer Section

• ساخت قالب ماشین ها قسمت 2 Cars Template Build Part 2

• بخش مزایا Benefits Section

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

• تجسم داده های شما Visualising your data

• بخش 5 تکلیف SECTION 5 ASSIGNMENT

• جریان های خود را به اشتراک بگذارید Sharing your flows

• پوشش پیشنهادی Proposal cover

• تایپ فیس در مقابل فونت Typefaces VS Fonts

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

• پرتره موبایلی پاسخگو Responsive Mobile Portrait

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

• معرفی کلاس Class Intro

• منظره موبایل پاسخگو Responsive Mobile Landscape

• ایجاد مجموعه CMS Creating CMS Collection

• پیوند دادن کارت های ماشین Linking Car Cards

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

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

• بخش 2 خلاصه طراحی SECTION 2 Design Briefs

• بخش 12 تصاویر SECTION 12 Images

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

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

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

• طراحی توکن ها Design tokens

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

• ایجاد پرسونای کاربری شما Creating Your User Persona

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

• سبک های وایرفریم Wireframe styles

• بخش 13 تکلیف SECTION 13 ASSIGNMENT

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

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

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

• بخش 14 کیت های UI SECTION 14 UI Kits

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

• ساختار دوره و فایل پروژه Course structure and project files

• بخش 11 انتخاب رنگ SECTION 11 Color Selection

• کار با بوت استرپ Working with Bootstrap

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

• کیت های UI چیست و چرا مفید هستند What are UI Kits and why are they useful

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

• ساختار UI Kit در Adobe Xd UI Kit structure in Adobe Xd

• بخش 4 تحقیقات کاربر و شخصیت ها SECTION 4 User Research and Personas

• بخش 11 تکلیف SECTION 11 ASSIGNMENT

• مشاغل جریان وب Webflow Jobs

• بخش 16 تکلیف SECTION 16 ASSIGNMENT

• کار با سیستم شبکه 8 پیکسل Working with 8px grid system

• پیشنهاد پروژه Project Proposal

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

• بخش 18 مطالعات موردی SECTION 18 Case Studies

• طراحی صفحه اصلی قسمت 4 Home Page Design Part 4

• بخش 9 تایپوگرافی و جفت کردن فونت SECTION 9 Typography and Font Pairing

• سیستم شبکه چیست و چرا مهم است What is a grid system and why it's important

• انواع مختلف آیکون ها Different Types Of Icons

• مقیاس قلم Font scale

• تابلوی حالت خود را به اشتراک بگذارید یا صادر کنید Share or export your mood board

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

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

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

• نوشتن محتوا Content Writing

• صفحه مشخصات خودرو Car Details Page

• صادرات دارایی ها Exporting The Assets

• بخش 16 طراحی وب سایت در Adobe Xd SECTION 16 Website Design in Adobe Xd

• چگونه تحقیق خود را انجام دهید How to do your research

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

• عشایر دیجیتال Digital Nomads

• ساخت قالب اتومبیل قسمت 3 Cars Template Build Part 3

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

• بخش 15 سیستم های طراحی SECTION 15 Design Systems

• ساخت قالب ماشین ها قسمت 4 Cars Template Build Part 4

• بخش 6 تکلیف SECTION 6 ASSIGNMENT

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

• بخش انتخاب خودرو Car Selection Section

• سیستم طراحی چیست؟ What is a Design System

• ساخت نوار ناوبر Navbar Build

• انواع کیت های رابط کاربری Types of UI Kits

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

• بخش نقشه Map Section

• صفحه وام Loans Page

• طراحی صفحه اصلی قسمت 3 Home Page Design Part 3

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

• جفت کردن فونت Font Pairing

• انیمیشن ها در جریان وب Animations in Webflow

• نمادهای رایگان VS Premium Free VS Premium Icons

• پروژه کلاس Class Project

• بخش 1 مبانی طراحی UX SECTION 1 UX Design Basics

• کاربر شخصی User Persona

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

• نکات ارائه Presentation Tips

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

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

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

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

• نمونه های مطالعه موردی عالی Awesome Case Study Examples

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

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

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

• کدام عناصر را در نظر بگیرید Which elements to consider

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

• شبکه، تایپوگرافی و رنگ ها Grid, Typography and Colors

• بخش 10 تکلیف SECTION 10 ASSIGNMENT

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

• In House VS Freelance Designer UX In House VS Freelance UX Designer

• بخش 5 تجزیه و تحلیل رقابتی SECTION 5 Competitive Analysis

• بخش قهرمان خانه Home Hero Section

• خلاصه طراحی چیست What is a design brief

• راهنمای ایجاد سبک Creating Style Guide

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

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

• استفاده از CMS Collection Using CMS Collection

• ایجاد تابلوی حالت در Adobe Xd Create mood board in Adobe Xd

• بخش 7 تکلیف SECTION 7 ASSIGNMENT

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

• ساخت قالب خودروها Cars Template Build

• بخش 8 طرح‌بندی و شبکه‌ها SECTION 8 Layout and Grids

• متحرک سازی طراحی Animating The Design

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

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

• بخش 17 تکلیف SECTION 17 ASSIGNMENT

• انتشار و صادرات کد Publish And Code Export

• بخش 15 تکلیف SECTION 15 ASSIGNMENT

• انواع فونت Font types

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

• ایجاد یک پیشنهاد پروژه در Adobe Xd Creating a project proposal in Adobe Xd

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

• بخش 9 تکلیف SECTION 9 ASSIGNMENT

• کدام عناصر را شامل شود Which elements to include

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

• بخش 6 جریان های کاربر SECTION 6 User Flows

• ایجاد کیت UI در Adobe Xd UI Kit creation in Adobe Xd

• بخش 19 یافتن شغل SECTION 19 Finding a Job

• مطالعه موردی چیست What Is A Case Study

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

• بخش 14 تکلیف SECTION 14 ASSIGNMENT

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

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

• بخش 12 تکلیف SECTION 12 ASSIGNMENT

• کدام اجزا مهم هستند Which components are important

درس ها Lessons

• بخش 14 کیت های UI SECTION 14 UI Kits

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

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

• ماشین ها صفحه ساخت Cars Page Build

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

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

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

• ایجاد تابلوی حالت در Adobe Xd Create mood board in Adobe Xd

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

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

• کیت UI در مقابل سیستم های طراحی UI Kit VS Design Systems

• طراحی صفحه اتومبیل Cars Page Design

• معرفی کلاس Class Intro

• ساخت قالب ماشین ها قسمت 2 Cars Template Build Part 2

• بخش 18 تکلیف SECTION 18 ASSIGNMENT

• مشاغل جریان وب Webflow Jobs

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

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

• بخش 11 انتخاب رنگ SECTION 11 Color Selection

• ایجاد ساختار مطالعه موردی Creating Case Study Structure

• نوشتن محتوا Content Writing

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

• بخش 4 تحقیقات کاربر و شخصیت ها SECTION 4 User Research and Personas

• بخش 12 تکلیف SECTION 12 ASSIGNMENT

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

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

• بخش نقشه Map Section

• ساخت قالب اتومبیل قسمت 3 Cars Template Build Part 3

• طراحی صفحه اصلی قسمت 3 Home Page Design Part 3

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

• مهارت هایی که طراح UX نیاز دارد Skills UX designer needs

• پیوند دادن کارت های ماشین Linking Car Cards

• بخش 9 تایپوگرافی و جفت کردن فونت SECTION 9 Typography and Font Pairing

• پوشش پیشنهادی Proposal cover

• کدام رنگ ها وجود دارد Which colors exist

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

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

• عناصر برای گنجاندن Elements To Include

• بخش 10 شمایل نگاری SECTION 10 Iconography

• بخش 15 سیستم های طراحی SECTION 15 Design Systems

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

• تجسم داده های شما Visualising your data

• بخش 19 یافتن شغل SECTION 19 Finding a Job

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

• بخش 13 تکلیف SECTION 13 ASSIGNMENT

• بخش 5 تکلیف SECTION 5 ASSIGNMENT

• تابلوی حالت خود را به اشتراک بگذارید یا صادر کنید Share or export your mood board

• نکاتی برای بهترین نتایج Tips For Best Results

• پروژه کلاس Class Project

• بخش 7 قاب های کاغذی SECTION 7 Paper Wireframes

• نحوه راه اندازی شبکه ها در Adobe Xd How to set up grids in Adobe Xd

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

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

• ساختار دوره و فایل پروژه Course structure and project files

• کدام عناصر را در نظر بگیرید Which elements to consider

• انواع فونت Font types

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

• بخش 4 تکلیف SECTION 4 ASSIGNMENT

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

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

• بخش ما کی هستیم Who We Are Section

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

• صفحه مشخصات خودرو Car Details Page

• بخش قهرمان خانه Home Hero Section

• شبکه، تایپوگرافی و رنگ ها Grid, Typography and Colors

• بخش 2 خلاصه طراحی SECTION 2 Design Briefs

• ایجاد و فروش کیت UI شما Creating and selling your UI Kit

• بخش 17 ساخت جریان وب SECTION 17 Webflow Build

• بخش 7 تکلیف SECTION 7 ASSIGNMENT

• بخش انتخاب خودرو Car Selection Section

• چگونه تحقیق خود را انجام دهید How to do your research

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

• سبک های وایرفریم Wireframe styles

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

• طراحی توکن ها Design tokens

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

• کاربر شخصی User Persona

• ترکیب رنگ Color combinations

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

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

• مقیاس بندی سیستم طراحی شما Scaling your design system

• متحرک سازی طراحی Animating The Design

• بخش 18 مطالعات موردی SECTION 18 Case Studies

• ساخت نوار ناوبر Navbar Build

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

• ساختار UI Kit در Adobe Xd UI Kit structure in Adobe Xd

• صادرات دارایی ها Exporting The Assets

• بخش 11 تکلیف SECTION 11 ASSIGNMENT

• پیشنهاد پروژه Project Proposal

• نکات نمونه کارها Portfolio Tips

• مقیاس قلم Font scale

• پرتره موبایلی پاسخگو Responsive Mobile Portrait

• انیمیشن ها در جریان وب Animations in Webflow

• ساخت قالب خودروها Cars Template Build

• ایجاد مجموعه CMS Creating CMS Collection

• بخش 1 مبانی طراحی UX SECTION 1 UX Design Basics

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

• انتشار و صادرات کد Publish And Code Export

• طراحی روی کاغذ شبکه نقطه ای Drawing on dot grid paper

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

• نمونه های مطالعه موردی عالی Awesome Case Study Examples

• بخش 16 تکلیف SECTION 16 ASSIGNMENT

• کدام اجزا مهم هستند Which components are important

• ایجاد یک پیشنهاد پروژه در Adobe Xd Creating a project proposal in Adobe Xd

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

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

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

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

• بخش 15 تکلیف SECTION 15 ASSIGNMENT

• بخش مزایا Benefits Section

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

• کار با سیستم شبکه 8 پیکسل Working with 8px grid system

• سیستم شبکه چیست و چرا مهم است What is a grid system and why it's important

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

• بخش 8 تکلیف SECTION 8 ASSIGNMENT

• انواع کیت های رابط کاربری Types of UI Kits

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

• طراحی برای واکنش گرا Designing For Responsive

• خلاصه طراحی Design Brief

• ایجاد کیت UI در Adobe Xd UI Kit creation in Adobe Xd

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

• منظره موبایل پاسخگو Responsive Mobile Landscape

• ایجاد پرسونای کاربری شما Creating Your User Persona

• صفحه وام Loans Page

• بخش 17 تکلیف SECTION 17 ASSIGNMENT

• بخش 1 تکلیف SECTION 1 ASSIGNMENT

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

• نکات ارائه Presentation Tips

• طراحی صفحه اصلی قسمت 2 Home Page Design Part 2

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

• رایگان VS Premium Free VS Premium

• بخش 8 طرح‌بندی و شبکه‌ها SECTION 8 Layout and Grids

• ساخت قالب ماشین ها قسمت 4 Cars Template Build Part 4

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

• بخش 13 تابلوهای خلق و خو SECTION 13 Mood Boards

• فرم تماس Contact Form

• کیت های UI چیست و چرا مفید هستند What are UI Kits and why are they useful

• بخش 10 تکلیف SECTION 10 ASSIGNMENT

• بخش پاورقی Footer Section

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

• بخش 3 پیشنهادات پروژه SECTION 3 Project Proposals

• صفحه وام Loans Page

• ایجاد تابلوی خلق و خو Mood Board Creation

• نقاشی روی کاغذ ساده Drawing on plain paper

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

• بخش 14 تکلیف SECTION 14 ASSIGNMENT

• آیکون ها چیست؟ What Are Icons

• بخش 16 طراحی وب سایت در Adobe Xd SECTION 16 Website Design in Adobe Xd

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

• پیشنهاد پروژه چیست What is a project proposal

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

• عشایر دیجیتال Digital Nomads

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

• قاب های کاغذی چیست؟ What are paper wireframes

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

• ایجاد خلاصه طراحی در Adobe Xd Creating a design brief in Adobe Xd

• بخش 9 تکلیف SECTION 9 ASSIGNMENT

• بخش 12 تصاویر SECTION 12 Images

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

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

• بخش 6 جریان های کاربر SECTION 6 User Flows

• راهنمای ایجاد سبک Creating Style Guide

• راه اندازی پروژه Setting Up The Project

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

• سیستم طراحی چیست؟ What is a Design System

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

• جفت کردن فونت Font Pairing

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

• انواع مختلف آیکون ها Different Types Of Icons

• استفاده از CMS Collection Using CMS Collection

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

• بخش 6 تکلیف SECTION 6 ASSIGNMENT

• تایپ فیس در مقابل فونت Typefaces VS Fonts

• کار با بوت استرپ Working with Bootstrap

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

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

• طراح UX چه می کند What does UX designer do

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

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

• کدام عناصر را شامل شود Which elements to include

• طراحی صفحه اصلی قسمت 4 Home Page Design Part 4

• مقدمه ای بر جریان وب Introduction To Webflow

• مطالعه موردی چیست What Is A Case Study

• In House VS Freelance Designer UX In House VS Freelance UX Designer

• خلاصه طراحی چیست What is a design brief

• نحوه انجام تحلیل ویژگی How to do a feature analysis

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

• بخش 5 تجزیه و تحلیل رقابتی SECTION 5 Competitive Analysis

• جریان های خود را به اشتراک بگذارید Sharing your flows

• نمادهای رایگان VS Premium Free VS Premium Icons

• کتابخانه‌های آیکون، بسته‌ها و فرمت‌های فایل Icon Libraries, Packs And File Formats

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

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