مدرسه دیزاین ملینا
PATH
LEARNING PATH

چک‌لیست یادگیری از صفر

بیشتر آدم‌ها به‌خاطر نداشتن منبع شکست نمی‌خورن، به‌خاطر نداشتن ترتیب شکست می‌خورن. این همون ترتیبیه که توی دوره‌ها طی می‌کنیم، برای هر دو مسیر رابط کاربری و تجربه کاربری.

۲
مسیر
۱۶
مرحله
۱۲۱
آیتم
UI Design·UX Design·Figma·Design System·Atomic Design·Typography·Color Theory·Interaction Design·User Research·Wireframe·Case Study·Mentoring·Real Projects·From Zero·Card Sorting·Prototyping·UI Design·UX Design·Figma·Design System·Atomic Design·Typography·Color Theory·Interaction Design·User Research·Wireframe·Case Study·Mentoring·Real Projects·From Zero·Card Sorting·Prototyping·
۰۱

فیگما و محیط کار

حدود ۲ هفته

قبل از هر بحث زیبایی‌شناسی، باید بتونی چیزی که تو ذهنته رو بدون کلنجار بسازی. این مرحله فقط درباره‌ی تسلط به ابزاره.

محیط فیگما و پنل‌ها

فریم، لایه، صفحه و پنل‌های کناری. کافیه گم نشی و بدونی هر چیزی کجاست.

فریم در برابر گروه

تفاوتشون رو بفهم. انتخاب اشتباه اینجا، بعداً کل ساختار فایلت رو خراب می‌کنه.

شکل، متن و تصویر

ابزارهای پایه‌ی رسم. با همین‌ها هشتاد درصد کارهای روزمره انجام می‌شه.

ترازبندی و توزیع

چیدن دقیق اجزا کنار هم. چشم انسان بی‌نظمی چند پیکسلی رو تشخیص می‌ده.

استایل‌های مشترک

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

میانبرهای پرکاربرد

ده تا میانبر اصلی رو حفظ کن. سرعتت دو برابر می‌شه.

مرتب نگه‌داشتن فایل

نام‌گذاری درست لایه‌ها و صفحه‌ها. فایل شلخته یعنی همکاری غیرممکن.

اولین صفحه‌ی کاملت

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

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

ثبت‌نام در دوره
۰۲

چیدمان و سلسله‌مراتب

حدود ۲ هفته

اینجاست که کار آماتور از حرفه‌ای جدا می‌شه. بیشتر طرح‌های ضعیف مشکل ابزار ندارن، مشکل چیدمان دارن.

سلسله‌مراتب بصری

تصمیم بگیر چشم کاربر اول کجا بره، بعد کجا. با اندازه، وزن و کنتراست کنترلش کن.

مقیاس فاصله‌گذاری

یک مقیاس مشخص بردار مثل ۴ و ۸ و ۱۶ و ازش خارج نشو. فاصله‌ی تصادفی شلختگی می‌سازه.

قانون نزدیکی

چیزهای مرتبط رو نزدیک هم بذار و بین گروه‌ها فاصله بنداز. ساده‌ترین راه برای ساختن نظم.

گرید و ستون‌بندی

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

فضای خالی

فضای خالی تزئین نیست، ابزار تمرکزه. پر کردن هر سانتی‌متر، خواندن رو سخت می‌کنه.

تعادل و وزن بصری

توزیع سنگینی عناصر در صفحه، جوری که یک سمت غلط‌انداز سنگین نشه.

تکرار و یکدستی

یک الگو رو در کل محصول تکرار کن. یکدستی، اعتماد می‌سازه.

بازطراحی تمرین قبلی

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

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

ثبت‌نام در دوره
۰۳

تایپوگرافی

حدود ۲ هفته

بخش عمده‌ی هر رابطی متنه. اگر تایپوگرافیت ضعیف باشه، هیچ رنگ و افکتی نجاتش نمی‌ده.

آناتومی حروف

ارتفاع ایکس، صعودی و نزولی. فهمیدن اینها انتخاب فونت رو از حدس درمیاره.

مقیاس اندازه

یک مقیاس هماهنگ بساز به‌جای اینکه هر بار عدد دلخواه بذاری.

ارتفاع خط

برای متن بدنه حدود یک و نیم برابر اندازه‌ی فونت. متن فارسی به فضای بیشتری نیاز داره.

طول خط

بین شصت تا هفتاد و پنج کاراکتر. خط خیلی بلند، چشم رو موقع برگشت گم می‌کنه.

وزن و تاکید

با وزن فونت سلسله‌مراتب بساز، نه با رنگ‌های متفاوت.

فونت فارسی و لاتین

جفت کردن درست این دو، مخصوصاً وقتی اعداد و اصطلاح انگلیسی وسط متن میاد.

خوانایی روی موبایل

حداقل شانزده پیکسل برای متن بدنه. کوچک‌تر از این یعنی کاربر زوم می‌کنه.

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

ثبت‌نام در دوره
۰۴

رنگ و کنتراست

حدود ۲ هفته

رنگ توی رابط کاربری وظیفه داره. باید بگه چی مهمه، چی قابل کلیکه و چی خطرناکه.

ساخت طیف رنگ

از رنگ برند، یک طیف نه یا ده پله‌ای بساز از خیلی روشن تا خیلی تیره.

رنگ‌های خنثی

بیشتر سطح یک محصول جدی با خاکستری پر می‌شه. یک مجموعه‌ی خوب خاکستری بساز.

رنگ‌های وضعیت

موفقیت، خطا، هشدار و اطلاع. هر کدوم باید بلافاصله قابل تشخیص باشن.

نسبت کنتراست

متن معمولی حداقل چهار و نیم به یک. خاکستری روشن روی سفید برای خیلی‌ها ناخواناست.

رنگ به‌تنهایی پیام نده

کنار رنگ، آیکون یا متن بذار. کاربر کوررنگ فرق سبز و قرمز رو نمی‌فهمه.

استفاده‌ی کم از رنگ لهجه

هر چه رنگ کمتر، تاکید بیشتر. رنگ برند رو برای کار اصلی نگه دار.

حالت تیره

حالت تیره یعنی وارونه کردن رنگ‌ها نیست. باید جدا طراحی و جدا تست بشه.

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

ثبت‌نام در دوره
۰۵

Auto Layout و کامپوننت

حدود ۳ هفته

بدون این مرحله، هر تغییر کوچکی تبدیل می‌شه به ساعت‌ها کار دستی. اینجا کار تو مقیاس‌پذیر می‌شه.

Auto Layout پایه

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

Auto Layout تودرتو

لایه‌های تودرتو برای ساختارهای پیچیده مثل کارت داخل لیست.

رفتار کشش

تعیین اینکه هر جزء موقع تغییر اندازه، ثابت بمونه یا کش بیاد.

ساخت کامپوننت

یک بار بساز و همه‌جا استفاده کن. پایه‌ی کار حرفه‌ای همینه.

ورینت‌ها

همه‌ی حالت‌های یک کامپوننت رو در یک مجموعه جمع کن.

پراپرتی‌های کامپوننت

متن، آیکون و حالت رو قابل تغییر کن بدون اینکه از کامپوننت جدا شی.

کامپوننت‌های پایه

دکمه، فیلد ورودی، برچسب، آواتار و کارت. با ساده‌ترین‌ها شروع کن.

همه‌ی حالت‌ها

عادی، هاور، فشرده، فوکوس، غیرفعال، در حال بارگذاری و خطا.

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

ثبت‌نام در دوره
۰۶

دیزاین سیستم

حدود ۲ هفته

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

توکن‌های پایه

رنگ، تایپ، فاصله، شعاع گوشه و سایه رو به‌صورت متغیر تعریف کن.

نام‌گذاری معنایی

به‌جای نام رنگ، کاربردش رو بنویس. مثل رنگ خطا یا رنگ سطح.

کتابخانه‌ی مشترک

سیستم رو به کتابخانه تبدیل کن تا در چند فایل قابل استفاده باشه.

مستندسازی کوتاه

برای هر کامپوننت سه جمله: کِی استفاده بشه، کِی نشه، و چرا.

نسخه‌بندی و تغییرات

وقتی چیزی عوض می‌شه، بقیه باید بفهمن چی و چرا عوض شده.

همکاری با برنامه‌نویس

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

بازبینی دوره‌ای

سیستم زنده‌ست. هر چند وقت باید هرسش کنی وگرنه باد می‌کنه.

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

ثبت‌نام در دوره
۰۷

الگوها و ریسپانسیو

حدود ۳ هفته

کاربر انتظار داره چیزها همون‌طوری کار کنن که همه‌جا کار می‌کنن. اختراع مجدد چرخ، معمولاً به ضرر کاربره.

ناوبری

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

فرم و ورودی

برچسب ثابت، پیام خطای مشخص و ترتیب منطقی فیلدها.

جدول و لیست

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

مودال و کشو

کِی از کدوم استفاده کنیم و چطور بسته شدنش رو واضح کنیم.

حالت خالی

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

حالت بارگذاری

اسکلت صفحه به‌جای چرخنده. حس سرعت بیشتری می‌ده.

حالت خطا

بگو چی شد و راه حلش چیه. جمله‌ی خطایی رخ داد هیچ ارزشی نداره.

نقاط شکست

طراحی از موبایل شروع شه و بعد به دسکتاپ باز شه.

اندازه‌ی ناحیه‌ی لمسی

حداقل چهل و چهار پیکسل. آیکون کوچک روی موبایل یعنی خطای مکرر.

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

ثبت‌نام در دوره
۰۸

تحویل و پرتفولیو

حدود ۴ هفته

تا وقتی یک محصول کامل نساختی و نتونستی ازش دفاع کنی، هنوز تمرین کردی نه کار.

پروژه‌ی کامل

یک جریان کامل با چند صفحه و همه‌ی حالت‌ها، نه فقط یک صفحه‌ی قشنگ.

آماده‌سازی برای توسعه

نام‌گذاری تمیز، فاصله‌های مشخص و فایل قابل فهم برای برنامه‌نویس.

خروجی گرفتن درست

آیکون و تصویر با فرمت و اندازه‌ی مناسب.

کیس استادی

مسئله، محدودیت، گزینه‌ها، تصمیم و نتیجه. بخش چرا مهم‌ترین قسمته.

انتخاب سه پروژه‌ی قوی

سه تای عمیق از ده تای سطحی خیلی بهتره. بی‌رحم باش و حذف کن.

ارائه و دفاع

تمرین کن تصمیم‌هات رو با صدای بلند توضیح بدی.

دریافت نقد

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

این مرحله رو قدم به قدم توی دوره پرتفولیو با پروژه و فیدبک کار می‌کنیم.

ثبت‌نام در دوره
START

این مسیر رو تنها نرو

همه‌ی این چک‌لیست رو می‌شه خودت جلو بری. فقط معمولاً وسط راه گیر می‌کنی و کسی نیست بگه کجا رو اشتباه رفتی. کار ما دقیقاً همینه.