آموزش طراحی تجربه کاربری - طراحی اپلیکیشن UI UX را با Figma بیاموزید

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

معرفی Introduction

• به دوره طراحی اپلیکیشن UX UI خوش آمدید Welcome to UX UI App Design Course

• مقدمه ای بر وایرفریم ها Introduction to wireframes

• معرفی نمونه اولیه و تفاوت بین وایرفریم و نمونه اولیه Introduction to prototype and different between wireframe and prototype

اصول وایرفریم Wireframe Basics

• معرفی فیگما Figma Introduction

• اولین وایرفریم را برای برنامه جیمیل طراحی کنید Design first wireframe for Gmail app

• قاب دوم را برای برنامه YouTube Studio طراحی کنید Design second wireframe for YouTube Studio app

• طراحی وایرفریم سوم برای اینستاگرام Design third wireframe for Instagram

• وایرفریم چهارم را برای لینکدین طراحی کنید Design fourth wireframe for Linkedin

طراحی Wireframes برای برنامه تحویل غذا Design Wireframes for Food Delivery App

• مقدمه ای برای طراحی قاب سیم برای برنامه تحویل غذا Intro to design wireframe for food delivery app

• طراحی صفحه اصلی وایرفریم برای برنامه تحویل غذا Design home page wireframe for food delivery app

• طراحی قالب صفحه جستجو برای برنامه تحویل غذا Design search page wireframe for food delivery app

• طراحی یک صفحه غذا برای اپلیکیشن تحویل غذا Design single food page for food delivery app

• ساخت صفحه سبد خرید برای برنامه تحویل غذا Build cart page for food delivery app

• پنجره تأیید سفارش ساخت برای برنامه تحویل غذا Build order confirm popup for food delivery app

• طراحی افزودن به سبد بازشو برای برنامه تحویل غذا Design add to cart popup for food delivery app

• قبل از تبدیل به نمونه اولیه، آخرین تماس را با وایرفریم انجام دهید Do final touch up to wireframe before convert to prototype

نمونه اولیه برنامه تحویل غذا را ایجاد کنید Create prototype of food delivery app

• ایجاد نمونه اولیه برنامه تحویل غذا - قسمت 01 Create prototype of food delivery app - Part 01

• ایجاد نمونه اولیه برنامه تحویل غذا - قسمت 02 Create prototype of food delivery app - Part 02

• نمونه اولیه برنامه تحویل غذا را آزمایش کنید Test food delivery app prototype

تکلیف اول First Assignment

• جزئیات تکلیف Assignment details

طراحی بصری UX - رنگ ها را انتخاب کنید UX Visual Design - Select Colors

• مقدمه ای بر طراحی بصری UX Introduction to UX Visual Design

• انتخاب رنگ ها با استفاده از روانشناسی رنگ Selecting Colors Using Color Psychology

• انتخاب رنگ اصلی Selecting a Primary Color

• قانون 60-30-10 The 60-30-10 Rule

• ایجاد پالت رنگ Creating the Color Palette

• بررسی دسترسی به رنگ Color Accessibility Check

• سخنرانی جایزه - راه های آسان برای انتخاب رنگ Bonus Lecture - Easy Ways to Select Colors

طراحی بصری UX - تایپوگرافی UX Visual Design - Typography

• مبانی تایپوگرافی Fundamentals of Typography

• پیام و احساس در تایپوگرافی Message and Emotion in Typography

• نحوه استفاده از وب سایت فونت های گوگل How to Use the Google Fonts Website

• انتخاب فونت برای برنامه تحویل غذای جدید Selecting Fonts for a New Food Delivery App

طراحی بصری UX - شمایل نگاری UX Visual Design - Iconography

• شمایل نگاری Iconography

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

• سیستم طراحی Design System

• اصول و قوانین UX UX Principles and Laws

• معماری اطلاعات (IA) Information Architecture (IA)

طراحی رابط کاربری با Figma UI Design with Figma

• ایجاد یک حساب کاربری Figma Creating a Figma Account

• طرح شبکه Grid Layout

• اصول چیدمان خودکار Auto Layout Basics

لوگوی برند Brand Logo

• طراحی لوگوی برند Designing a Brand Logo

مدل های Hi-Fi با Figma Hi-Fi Mockups with Figma

• ورق استیکر Sticker Sheet

• معرفی مدل های Hi-Fi Hi-Fi Mockups Introduction

• طراحی سربرگ Designing the Header

• بهبود هدر Improving the Header

• همه چیز درباره کامپوننت ها All About Components

طراحی موکاپ های فای - صفحه اصلی Hi-Fi Mockups Design - Homepage

• طراحی جعبه جستجو Designing the Search Box

• طراحی بخش دسته بندی Designing the Category Section

• افزودن محتوا به دسته ها Adding Content to Categories

• طراحی بخش غذاهای محبوب Designing Popular Foods Section

• ایجاد تغییرات در جزء مواد غذایی Making Changes to Food Item Component

• افزودن محتوا برای اقلام غذایی Adding Content for Food Items

• طراحی بخش غذاهای پیشنهادی Designing Recommended Foods Section

طراحی مدل های Hi-Fi - صفحه جستجو Hi-Fi Mockups Design - Search Page

• طراحی صفحه جستجو Designing Search Page

• طراحی بخش نتایج جستجو Designing Search Results Section

• نکته حرفه ای برای بهبود مهارت های طراحی UI Pro Tip to Improve UI Design Skills

طراحی موکاپ های فای - صفحه غذای واحد Hi-Fi Mockups Design - Single Food Page

• طراحی صفحه غذای واحد Designing Single Food Page

• طراحی پیش نمایش مبلغ دلار و رتبه بندی ستاره Designing Dollar Amount Preview and Star Rating

• ایجاد کنترل کننده شمارش و اضافه کردن دکمه به سبد خرید Creating Count Controller and Adding to Cart Button

• افزودن بخش توضیحات Adding Description Section

• ایجاد بخش نظرات Creating Reviews Section

طراحی موکاپ های فای - صفحه سبد خرید Hi-Fi Mockups Design - Cart Page

• طراحی صفحه سبد خرید Designing Cart Page

• تغییر طراحی سبد خرید من Changing My Cart Design

• طراحی بخش خلاصه اقلام سبد خرید Designing Cart Items Summary Section

• افزودن محتوا به بخش سبد خرید من Adding Content to the My Cart Section

• طراحی صفحه سبد خرید - قسمت 05 Designing Cart Page - Part 05

• طراحی صفحه سبد خرید - قسمت 06 Designing Cart Page - Part 06

رفع مشکلات UI/UX و طراحی منوی پاورقی Fixing UI/UX Issues and design footer menu

• رفع مشکلات UI/UX در طراحی Fixing UI/UX Issues in the Design

• طراحی منوی پاورقی Designing Footer Menu

نمونه اولیه HI-FI HI-FI Prototype

• معرفی نمونه اولیه Prototype Introduction

• نحوه استفاده از تب Prototype برای تعاملی کردن طراحی How to Use the Prototype Tab to Make Design Interactive

• نمونه سازی - قسمت 2 Prototyping - Part 2

• ساخت طومار چرخ فلک Making Carousel Scroll

• افزودن منوی پاورقی به فریم ها Adding Footer Menu to Frames

• افزودن اتصال به پاپ آپ Adding Connection to Popup

• افزودن پیمایش افقی به بخش مرور Adding Horizontal Scrolling to Review Section

• تعاملی کردن جعبه جستجو Making the Search Box Interactive

• استفاده از متغیرها برای حذف اقلام سبد خرید Using Variables to Remove Cart Items

تکلیف دوم Second Assignment

• تکلیف و تشکر Assignment and Thank you!