آموزش اصول طراحی رابط کاربری با Figma

درس ها Lessons

• اصل طراحی وحدت Unity Design Principle

• Hands on UI: Chat Screen Hands on UI: Chat Screen

• انعطاف پذیری و کارایی استفاده Flexibility and efficiency of use

• پیشگیری از خطا Error prevention

• راهنمای سبک: دکمه ها قسمت 1 Style guide: Buttons part 1

• راهنمای سبک: دکمه ها قسمت 3 Style guide: Buttons part 3

• Hands on UI: احراز هویت همسر فریم Hands on UI: Authentication wifeframe

• سازگاری و استانداردها Consistency and standards

• راهنمای معرفی سبک Intro to Style guide

• رنگ ها با استفاده از HSB Colors using HSB

• مقدمه دوره Intro to course

• بیایید شروع کنیم - خوش آمدید Let's get started - Welcome

• چرا به یک راهنمای سبک نیاز دارید؟ Why need you a style guide

• مقدمه ای بر اکتشافی قابلیت استفاده Intro to Usability heuristics

• تطبیق بین سیستم و واقعی Matching between the systems and the real

• مقدمه اکتشافی قابلیت استفاده Usability heuristic  intro

• به جای یادآوری، تشخیص دهید Recognize rather than recall

• تایپوگرافی سبک های متن Typography Text styles

• دست در UI: مقدمه Hands on UI: Intro

• طراحی زیباشناختی و مینیمال pt 2 Aesthetic and minimalist design pt 2

• دست در UI: درک محدوده Hands on UI: Understanding scope

• طرح های رنگی Color schemes

• تمرین تایپوگرافی Typography exercise

• مقدمه ای بر تئوری رنگ Intro to color theory

• راهنمای سبک تایپوگرافی Style guide Typography

• راهنمای سبک: بسته بندی Style guide: Wrapping up

• اصول طراحی مجاورت Proximity Design Principles

• راهنمای سبک: نمادها قسمت 2 Style guide: Icons part 2

• Hands on UI: Example Component UI Hands on UI: Prompt Example Component UI

• Hands on UI: Prompt TextField Improvement Hands on UI: Prompt TextField Improvement

• به کاربران کمک کنید تا خطاهای froddm را شناسایی و بازیابی کنند Help users recognize and recover froddm errors

• مقدمه ای بر تایپوگرافی Intro to typography

• Hands on UI: فهرست چت ها Hands on UI: Chats List

• Hands on UI: ایجاد Moodboard Hands on UI: Creating moodboard

• Hands on UI: ایجاد منوی کشویی Hands on UI: Creating dropdown menu

• چرخ رنگ Color wheel

• راهنمای سبک: سایه ها Style guide: Shadows

• Hands on UI: HTML به Figma Hands on UI: HTML to Figma

• طراحی زیبایی شناختی و مینیمال Aesthetic and minimalist design

• قابلیت مشاهده وضعیت سیستم Visibility of System Status

• راهنما و مستندات Help and documentation

• راهنمای سبک: TextFields Style guide: TextFields

• تایپوگرافی تایپی Typesale typography

• زمان تمرین ساخت پالت رنگ Practice time Build color pallete

• رنگ با استفاده از RGB Color using RGB

• اصل طراحی تکرار Repetition design principle

• درک سایه ها و ورزش Understanding shadows and exercise

• Hands on UI: از Wireframe تا Chat TextField UI Hands on UI: From Wireframe to Chat TextField UI

• راهنمای سبک: نمادها قسمت 1 Style guide: Icons part 1

• اصول طراحی تعادل Balance Design Principles

• اصل طراحی سلسله مراتب Hierarchy design principle

• Hands on UI: آواتار نمایه و اولین حالت خالی Hands on UI: Profile avatar and first empty state

• راهنمای سبک: طرح بندی شبکه ای Style Guide: Grid Layout

• مقدمه اصول طراحی Design Principles intro

• کنترل و آزادی کاربر User control and freedom

• اصل طراحی حرکت Movement design principle

• اصول طراحی تراز Aligment Design Principles

• راهنمای سبک: رنگ ها Style guide: Colors

• اصل طراحی فضای سفید White space design principle

• اصل طراحی تاکیدی Emphasis design principle

• رنگ ها با استفاده از HSL Colors using HSL

• رنگ ها با استفاده از هگز (هگزادسیمال) Colors using Hex (Hexadecimals)

• درک و ایجاد آیکون ها Icons understanding and creating

• Hands on UI: مدیریت صفحه کلید و چت اخیر Hands on UI: Handling keyboard and recent chat

• اصل طراحی کنتراست Contrast design principle

• معنی رنگ ها Colors meaning