مدرسه دیزاین ملینا
UI
بازگشت به دوره‌ها
UI DESIGN
UI
COLOR
TYPE
LAYOUT
۵۵
ساعت ویدیو
Figma
آفلاین·مقدماتی۳۳۷ دانشجو
UI DESIGN

طراحی رابط کاربری

همون ویدیوها و پروژه‌های دوره‌ی بی‌نهایت، با یک سال پشتیبانی تلگرامی. برای کسی که می‌خواد با تمپوی خودش جلو بره.

55 ساعت ویدیو·پشتیبانی 12 ماهه·5 پروژه عملی
FigmaUI DesignDesign SystemTypographyComponents
۵٬۰۰۰٬۰۰۰ تومان
ثبت‌نام و مشاوره در تلگرام

برای ثبت‌نام و مشاوره، در تلگرام به پشتیبانی پیام بده

آموزش از صفر و بدون پیش‌نیاز
5 پروژه عملی در ویدیوها
پشتیبانی ۱ ساله از طریق تلگرام
لایسنس اسپات پلیر بعد از خرید
بروزرسانی رایگان دوره
بدون جلسات منتورینگ گروهی
BASICS

اصلاً UI و UX چی هستن؟

طراحی رابط کاربری یعنی ساختنِ لایه‌ای که کاربر می‌بینه و لمسش می‌کنه. یه UI خوب فقط «قشنگ» نیست — با رنگ، فاصله و سلسله‌مراتب درست، مسیر چشم کاربر رو هدایت می‌کنه و به محصول اعتبار می‌ده. این دوره از صفر شروع می‌شه و کاری می‌کنه بتونی خروجیِ قابل‌ارائه به بازار کار بسازی.

تمرکز این دوره
UI — طراحی رابط کاربری
«محصول چه شکلیه؟»

لایه‌ی دیداری محصول: رنگ، تایپوگرافی، فاصله‌ها، آیکون‌ها، کامپوننت‌ها و دیزاین‌سیستم. کاری می‌کنه محصول تمیز، حرفه‌ای و قابل‌اعتماد به‌نظر برسه.

  • رنگ و تایپوگرافی
  • گرید و فاصله‌گذاری
  • کامپوننت و دیزاین‌سیستم
  • ظاهر نهایی صفحه‌ها
UX — طراحی تجربه کاربری
«کار کردن باهاش چه حسیه؟»

لایه‌ی منطقی محصول: فهمیدن مسئله‌ی کاربر، معماری اطلاعات، طراحی مسیرها و تست‌کردن. کاری می‌کنه کاربر بدون سردرگمی به هدفش برسه.

  • تحقیق کاربر
  • معماری اطلاعات
  • جریان کاربری و وایرفریم
  • تست و بازطراحی

این دوره به درد کیا می‌خوره؟

کسی که از صفر می‌خواد وارد دنیای دیزاین بشه
گرافیستی که می‌خواد به دیجیتال و محصول کوچ کنه
توسعه‌دهنده‌ای که می‌خواد خروجی کارش حرفه‌ای‌تر دیده بشه
فریلنسری که دنبال پروژه‌های بهترِ طراحی رابطه
۰۱

چی یاد می‌گیری

  • اصول بصری پایه: رنگ، تایپوگرافی، فاصله‌بندی، elevation و آیکون
  • طراحی با فیگما — از ابزارهای پایه تا Variables، Auto Layout پیشرفته و Prototype
  • ساخت کامپوننت‌های حرفه‌ای با تمام state‌ها، variant‌ها و property‌ها
  • متدولوژی Atomic Design و ساخت Design System کامل از صفر
  • طراحی واکنش‌گرا برای موبایل، تبلت و دسکتاپ
  • Interaction Design و اصول micro-animation در UI
  • تحویل طراحی به توسعه‌دهنده — Inspect، توکن و مستندات
۰۲

این دوره برای کیه

  • کسی که می‌خواد از صفر وارد دیزاین بشه — بدون هیچ پیش‌نیازی
  • کسی که طراحی می‌کنه ولی پایه‌هاش قوی نیست و می‌خواد سیستماتیک یاد بگیره
  • توسعه‌دهنده‌ای که می‌خواد طراحی رو هم بلد باشه
  • کسی که می‌خواد پرتفولیو واقعی بسازه و وارد بازار کار بشه
۰۳

بعد از دوره چی داری

  • ۵ پروژه واقعی آماده برای پرتفولیو — از اپ پادکست تا Design System
  • توانایی طراحی UI حرفه‌ای از ایده تا تحویل به توسعه‌دهنده
  • یه Design System کامل ساخته‌شده توسط خودت
  • آمادگی برای مصاحبه شغلی به عنوان طراح UI
PREREQUISITES

قبلش چی باید بلد باشی؟

  • هیچ پیش‌نیاز تخصصی لازم نیست — از صفر شروع می‌کنیم
  • یک لپ‌تاپ یا کامپیوتر برای کار با فیگما (رایگان)
  • آشنایی معمولی با کامپیوتر و اینترنت
  • هفته‌ای چند ساعت وقت برای تمرین — یادگیری با تمرین جا می‌افته
CURRICULUM

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

26 فصل
1
Chapter 1: Introduction to UX Design
چرا یه طراح UI باید UX رو بشناسه؟ تفاوت و رابطه‌ی این دو در پروژه‌های واقعی.
2
Chapter 2: A Brief History of Web Development
از HTML اولیه تا مدرن‌ترین رویکردهای طراحی — چرا این تاریخ به کارت میاد.
3
Chapter 3: Figma Basics
محیط فیگما، Auto Layout، فریم‌ها و ابزارهایی که از روز اول ازشون استفاده می‌کنی.
4
Chapter 4: Visual Design Trends
ترندهای UI روز دنیا و اینکه چطور از ترند استفاده کنی بدون اینکه طراحیت قدیمی بشه.
5
Chapter 5: Visual Design Principles
اصول اثبات‌شده‌ی بصری: تضاد، تکرار، تراز و مجاورت — پایه‌ی هر طراحی خوب.
6
Chapter 6: UI Fundamentals — Layout
گریدها، ستون‌ها، بریک‌پوینت‌ها و اینکه چطور ساختار بصری یه صفحه رو بسازی.
7
Chapter 7: UI Fundamentals — Spacing
سیستم فاصله‌گذاری ۸px و اینکه چطور نظم بصری ایجاد کنی بدون تلاش زیاد.
8
Chapter 8: UI Fundamentals — Color Theory
مدل‌های رنگی، پالت semantic، کنتراست و دسترس‌پذیری در طراحی رابط.
9
Chapter 9: UI Fundamentals — Typography
انتخاب فونت، سلسله‌مراتب متن، فاصله‌گذاری خط و چطور خوانایی رو بالا ببری.
10
Chapter 10: UI Fundamentals — Images
استفاده صحیح از عکس در UI، نسبت تصویر و اصول ترکیب‌بندی بصری.
11
Chapter 11: UI Fundamentals — Elevation
سایه، عمق بصری و کاربرد درست elevation در کارت، مدال و نوار ناوبری.
12
Chapter 12: UI Fundamentals — Iconography
انتخاب آیکون مناسب، اندازه‌بندی، یکپارچگی استایل و چطور کیت آیکون بسازی.
13
Chapter 13: Podcast Concept (Project)PROJECT
پروژه اول: طراحی کامل UI یه اپ پادکست — از صفحه اصلی تا پلیر با تمام المان‌های پایه.
14
Chapter 14: Basic Styleguide Design
ساختن یه Styleguide اولیه که رنگ، تایپوگرافی و فاصله‌بندی پروژه رو مستند کنه.
15
Chapter 15: Introduction to Design Systems
Design System چیه، چرا تیم‌های بزرگ بهش نیاز دارن و چه مزایایی داره.
16
Chapter 16: Atomic Design
متدولوژی Atomic Design — از اتم و مولکول تا ارگانیسم و اینکه چطور باهاش فکر کنی.
17
Chapter 17: Advanced Figma
Variables، Auto Layout پیشرفته، Smart Animate و ترفندهای حرفه‌ای که سرعتت رو چند برابر می‌کنن.
18
Chapter 18: Component Encyclopedia
ساخت کتابخانه کامپوننت با تمام state‌ها، variant‌ها و property‌های ضروری.
19
Chapter 19: Responsive Design
طراحی واکنش‌گرا برای موبایل، تبلت و دسکتاپ — بدون اینکه کیفیت رو فدا کنی.
20
Chapter 20: Interaction Design
اصول انیمیشن در UI، micro-interaction و پیاده‌سازی با Figma Prototype.
21
Chapter 21: Instagram Dashboard (Project)PROJECT
پروژه دوم: طراحی داشبورد تحلیل اینستاگرام — پیچیده، واقعی و اضافه‌شدنی به پرتفولیو.
22
Chapter 22: How to Start a Project
متدولوژی شروع پروژه حرفه‌ای: briefing، moodboard و ساختار فایل فیگما.
23
Chapter 23: Design Hand-offs & Design System
تحویل طراحی به توسعه‌دهنده، کار با Inspect و ساختن توکن‌های طراحی.
24
Chapter 24: HaloNews (Project)PROJECT
پروژه سوم: طراحی اپ خبری با تمرکز روی typography، readability و سلسله‌مراتب محتوا.
25
Chapter 25: Smart Home Landing (Project)PROJECT
پروژه چهارم: Landing Page یه محصول هوشمند — conversion-focused با اصول persuasive design.
26
Chapter 26: Creating a Design System
پروژه پنجم: ساخت Design System کامل از صفر — foundation، tokens، components و مستندات.
ROADMAP

مسیر یادگیری، قدم به قدم

از صفر شروع می‌کنی و هر قدم روی قدم قبلی سوار می‌شه — آخرش یه خروجی واقعی داری.

۱

مبانی و فیگما

محیط فیگما، فریم‌ها و ابزارهای پایه — تا راحت بتونی هر ایده‌ای رو پیاده کنی.

۲

اصول بصری

رنگ، تایپوگرافی، گرید و فاصله‌گذاری — چیزی که کار آماتور رو از حرفه‌ای جدا می‌کنه.

۳

کامپوننت و دیزاین‌سیستم

ساختن اجزای قابل‌استفاده‌ی مجدد و یکدست‌کردن کل محصول.

۴

پروژه‌ی واقعی

یه محصول کامل رو از اول تا آخر طراحی می‌کنی و فیدبک مستقیم می‌گیری.

۵

پرتفولیو و بازار کار

خروجی رو جوری می‌چینی که کارفرما ببینه و جذب شه.

FAQ

سوالات پرتکرار

01آیا نیاز به تجربه قبلی در طراحی دارم؟+

نه. دوره از صفر مطلق شروع می‌شه. تنها چیزی که لازمه آشنایی پایه با کامپیوتره.

02چه نرم‌افزاری نیاز دارم؟+

فقط Figma — نسخه رایگانش کاملاً کافیه.

03پشتیبانی ۱ ساله یعنی چی دقیقاً؟+

می‌تونی از طریق پشتیبانی تلگرام سوالاتت رو بپرسی و در طول ۱ سال پاسخ می‌گیری. سرعت پاسخ معمولاً ۲۴ تا ۴۸ ساعته.

04آیا محتوا آپدیت می‌شه؟+

آره. هر بار که دوره آپدیت بشه، دسترسی به محتوای جدید برای همیشه رایگانه.

05فرق این دوره با نسخه بی‌نهایت چیه؟+

محتوای ویدیویی کاملاً یکسانه. تفاوت اینه که نسخه آفلاین جلسات منتورینگ گروهی نداره — مناسب کسایی که می‌خوان به تمپو خودشون پیش برن.

06بعد از دوره چی می‌تونم انجام بدم؟+

پرتفولیو داری با ۵ پروژه واقعی. آماده‌ای برای ورود به بازار کار به عنوان طراح UI.

TESTIMONIALS

دانشجوها می‌گن

وقتی آگهی‌های استخدام رو بررسی می‌کردم، تقریباً تمام مهارت‌هایی که درخواست شده بود توی دوره آموزش داده شده بود.

ر
رها

روند تسک و فیلم‌ها هماهنگ بود. این باعث شد مباحث رو کامل یاد بگیرم — بدون شکاف.

ح
حامد

از بیرون که به این حوزه نگاه می‌کردم خیلی نگران بودم. خوشحالم که این دوره رو انتخاب کردم.

ک
کارن

گواهی پایان دوره، قابل استعلام

بعد از اتمام دوره گواهی می‌گیری که یه کد یکتا داره — هر کسی (و هر کارفرمایی) می‌تونه اعتبارش رو همین‌جا روی سایت چک کنه.

استعلام گواهی
م
INSTRUCTOR
مجتبا یزدانپناه
طراح UI/UX — @mojtabaui
دیدن همه دوره‌ها
WHY US

چی تحویل می‌گیری؟

گواهی با کد استعلام

بعد از دوره گواهی می‌گیری که کدش روی سایت قابل استعلامه — قابل ارائه به کارفرما.

پاسخ مستقیم مدرس

سوالت رو خودِ مجتبا جواب می‌ده، نه ربات و نه اپراتور.

پروژه‌ی واقعی برای پرتفولیو

خروجی دوره یه فایل تمرینی نیست — پروژه‌ایه که می‌تونی نشون بدی.

دسترسی دائمی به ویدیوها

ویدیوها بعد از دوره هم در دسترست می‌مونن تا هر وقت خواستی مرور کنی.

هنوز مطمئن نیستی این دوره مناسبته؟

قبل از ثبت‌نام بپرس. توی تلگرام بگو الان کجای مسیری و چی می‌خوای — اگه این دوره برات مناسب نبود، خودم صادقانه می‌گم.