نقشه راه یادگیری UI/UX؛ از صفر تا اولین شغل

نقشه راه UI/UX یعنی یادگیری به این ترتیب: اول مبانی بصری و ابزار فیگما، بعد فرایند تجربه کاربری و پژوهش، سپس رابط کاربری حرفه‌ای و دیزاین سیستم، و در پایان دو یا سه پروژه‌ی کامل برای نمونه‌کار. اگر هفته‌ای حدود ۱۰ تا ۱۵ ساعت منظم وقت بگذارید، رسیدن به سطح کارآموزی یا جونیور معمولاً بین ۶ تا ۱۲ ماه طول می‌کشد؛ این عدد تقریبی است و به پیش‌زمینه و کیفیت تمرین شما بستگی دارد.

مشکل بیشتر کسانی که شروع می‌کنند کمبود منبع نیست؛ زیادی منبع است. ده‌ها ویدیو، دوره و مقاله هست و معلوم نیست کدام اول بیاید. این نقشه راه برای هر مرحله سه چیز مشخص می‌کند: چه چیزی یاد بگیرید، چه چیزی بسازید و از کجا بفهمید آماده‌ی مرحله‌ی بعد هستید. اگر هنوز فرق این دو حوزه برایتان روشن نیست، اول مطلب تفاوت UI و UX را بخوانید.

نقشه راه UI/UX در یک نگاه

مسیر را به پنج مرحله تقسیم کرده‌ایم. مرحله‌ها پشت‌سرهم‌اند، ولی مرزشان سفت نیست؛ مثلاً تمرین فیگما در همه‌ی مرحله‌ها ادامه پیدا می‌کند. زمان‌ها برای کسی است که هفته‌ای ۱۰ تا ۱۵ ساعت وقت دارد.

• مرحله‌ی ۱، پایه‌ها (حدود ۶ تا ۸ هفته): اصول بصری، تایپوگرافی، رنگ، گرید و تسلط کاربردی بر فیگما.
• مرحله‌ی ۲، فرایند تجربه کاربری (حدود ۸ هفته): پژوهش کاربر، پرسونا، یوزر فلو، وایرفریم و تست کاربردپذیری.
• مرحله‌ی ۳، رابط کاربری حرفه‌ای (حدود ۶ تا ۸ هفته): کامپوننت، اتولی‌اوت، طراحی ریسپانسیو، دیزاین سیستم و هندآف.
• مرحله‌ی ۴، پروژه و نمونه‌کار (حدود ۸ تا ۱۲ هفته): دو یا سه کیس استادی کامل و یک پورتفولیوی منظم.
• مرحله‌ی ۵، ورود به بازار کار: رزومه، شبکه‌سازی، کارآموزی، مصاحبه و ادامه‌ی یادگیری روی پروژه‌ی واقعی.

مرحله‌ی ۱: مبانی بصری و تسلط بر فیگما

در این مرحله هدف «هنرمند شدن» نیست؛ هدف این است که بفهمید چرا یک صفحه مرتب و خوانا به نظر می‌رسد و صفحه‌ی دیگر شلوغ. بیشتر این دانش قاعده‌مند است و با تمرین آموخته می‌شود، نه با استعداد ذاتی.

چه چیزی یاد بگیرید

• سلسله‌مراتب بصری: اندازه، وزن، رنگ و فاصله چطور ترتیب خواندن را تعیین می‌کنند.
• تایپوگرافی فارسی: انتخاب فونت، اندازه‌ی متن بدنه، ارتفاع خط و تفاوت راست‌چین با چپ‌چین.
• رنگ: رنگ اصلی، رنگ‌های خنثی، رنگ‌های معنایی (خطا، موفقیت، هشدار) و کنتراست کافی.
• فاصله‌گذاری و گرید: سیستم فاصله‌گذاری ثابت و چیدمان ستونی.
• فیگما: فریم، اتولی‌اوت، کامپوننت، استایل و پروتوتایپ ساده.

تمرین و خروجی این مرحله

سه صفحه از اپلیکیشن‌هایی که هر روز استفاده می‌کنید (مثلاً صفحه‌ی ورود یک بانک، صفحه‌ی محصول یک فروشگاه و صفحه‌ی تنظیمات یک پیام‌رسان) را دقیق در فیگما بازسازی کنید. بازسازی دقیق به شما یاد می‌دهد طراح‌های حرفه‌ای فاصله‌ها و اندازه‌ها را چطور انتخاب کرده‌اند. برای شروع ابزار، آموزش فیگما رایگان از صفر نقطه‌ی خوبی است.

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

مرحله‌ی ۲: یادگیری فرایند تجربه کاربری

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

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

• مصاحبه با کاربر: نوشتن سؤال باز، پرهیز از سؤال جهت‌دار و خلاصه کردن یافته‌ها.
• تحلیل رقبا و الگوهای رایج در محصولات ایرانی و خارجی.
• پرسونا و سفر کاربر برای خلاصه کردن آنچه از کاربر فهمیده‌اید.
• معماری اطلاعات و یوزر فلو: کاربر از کجا شروع می‌کند و به کجا می‌رسد.
• وایرفریم کم‌جزئیات و تست کاربردپذیری با پنج کاربر.

یک چارچوب کلی مثل تفکر طراحی (Design Thinking) کمک می‌کند این ابزارها را کنار هم ببینید. ولی چارچوب را حفظ نکنید؛ آن را روی یک مسئله‌ی کوچک واقعی اجرا کنید.

تمرین و معیار عبور

یک مسئله‌ی کوچک از اطرافتان انتخاب کنید؛ مثلاً رزرو نوبت در یک کلینیک محله یا ثبت سفارش در یک کافه. با پنج نفر مصاحبه کنید، مشکل اصلی را در یک جمله بنویسید، یوزر فلو و وایرفریم بکشید و نسخه‌ی کم‌جزئیات را با سه تا پنج نفر تست کنید. معیار عبور: می‌توانید در پنج دقیقه توضیح دهید چه چیزی را چرا تغییر دادید و این تغییر از کدام یافته آمده است.

مرحله‌ی ۳: رابط کاربری حرفه‌ای و دیزاین سیستم

حالا وایرفریم‌ها باید به رابط کاربری قابل‌ساخت تبدیل شوند. در تیم‌های واقعی هیچ‌کس صفحه را از صفر نمی‌کشد؛ همه با کامپوننت‌ها و قواعد مشترک کار می‌کنند. یادگیری این مرحله شما را از «تمرین‌کننده» به کسی تبدیل می‌کند که می‌تواند وارد فایل یک تیم شود.

• ساخت کامپوننت با حالت‌های مختلف (پیش‌فرض، فشرده، غیرفعال، خطا).
• طراحی ریسپانسیو برای موبایل و دسکتاپ با یک گرید منطقی.
• حالت‌های فراموش‌شده: صفحه‌ی خالی، بارگذاری، خطا و پیام موفقیت.
• اصول پایه‌ی دسترس‌پذیری: کنتراست، اندازه‌ی ناحیه‌ی لمس و متن جایگزین.
• هندآف: نام‌گذاری لایه‌ها، مستندسازی رفتارها و همکاری با برنامه‌نویس.

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

مرحله‌ی ۴: پروژه‌ی کامل و نمونه‌کار

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

چه پروژه‌هایی انتخاب کنید

• یک بازطراحی واقعی: بخشی از یک محصول ایرانی را که مشکل مشخص دارد انتخاب کنید و با شواهد بهبودش دهید.
• یک محصول از صفر: مسئله‌ای که خودتان یا اطرافیانتان دارید، از پژوهش تا پروتوتایپ.
• یک پروژه‌ی تیمی یا واقعی: کار برای یک کسب‌وکار کوچک، پروژه‌ی داوطلبانه یا تمرین مشترک با یک برنامه‌نویس.

هر پروژه را به شکل کیس استادی بنویسید: مسئله، نقش شما، فرایند، تصمیم‌های کلیدی، نتیجه و چیزی که دفعه‌ی بعد متفاوت انجام می‌دهید. صادق باشید؛ اگر پروژه‌ی تمرینی است، همین را بنویسید. کارفرماهای باتجربه پروژه‌ی تمرینیِ صادقانه را به پروژه‌ی «واقعیِ» مبهم ترجیح می‌دهند.

مرحله‌ی ۵: ورود به بازار کار ایران

بیشتر آگهی‌های UI/UX در ایران در تهران و در شرکت‌های نرم‌افزاری، استارتاپ‌ها، بانک‌ها و فروشگاه‌های اینترنتی منتشر می‌شود و عنوان‌ها متنوع است: طراح UI/UX، طراح محصول، طراح رابط کاربری. تقریباً همه‌ی آن‌ها تسلط بر فیگما و نمونه‌کار می‌خواهند و در برخی از آن‌ها تجربه‌ی طراحی راست‌چین هم خواسته می‌شود.

• رزومه‌ی یک‌صفحه‌ای با لینک نمونه‌کار در بالای صفحه؛ برای نوشتنش نکته‌های رزومه‌ی طراحی UX را ببینید.
• کارآموزی یا موقعیت جونیور را جدی بگیرید؛ چند ماه کار در تیم واقعی سرعت یادگیری را چند برابر می‌کند.
• در جامعه‌ی طراحان فعال باشید: رویدادها، گروه‌های تخصصی و نقد گرفتن از طراحان باتجربه‌تر.
• برای هر آگهی، دو یا سه پروژه‌ی مرتبط‌تر را در پیام همراه رزومه برجسته کنید.

انتظار واقع‌بینانه داشته باشید. اولین شغل معمولاً با چند ده درخواست و چند مصاحبه‌ی ناموفق به دست می‌آید. هر مصاحبه را منبع بازخورد ببینید و نمونه‌کار را بر اساس سؤال‌هایی که پرسیده شد بهتر کنید.

اشتباه‌های رایج در مسیر یادگیری UI/UX

• ماندن طولانی در مرحله‌ی دیدن آموزش: بعد از هر ساعت آموزش، دست‌کم یک ساعت تمرین کنید.
• پرش مستقیم به رابط کاربری زیبا و حذف پژوهش؛ نمونه‌کار پر از صفحه‌های قشنگ ولی بی‌دلیل در مصاحبه دوام نمی‌آورد.
• جمع کردن ده‌ها پروژه‌ی دریبل‌مانند به جای دو یا سه کیس استادی عمیق.
• یادگیری همزمان چند ابزار؛ در ایران فیگما ابزار اصلی است و تسلط بر آن کافی است.
• تنها یاد گرفتن و نگرفتن بازخورد؛ بدون نقد بیرونی اشتباه‌های تکراری دیده نمی‌شوند.

نقشه راه خوب شما را سریع‌تر به «ساختن» می‌رساند. هر مرحله وقتی تمام است که خروجی قابل‌نمایش داشته باشید، نه وقتی که ویدیوهایش تمام شده باشد.

سوالات متداول

برای شروع UI/UX اول UI یاد بگیرم یا UX؟

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

آیا بدون مدرک دانشگاهی می‌شود طراح UI/UX شد؟

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

چند پروژه برای نمونه‌کار کافی است؟

برای موقعیت جونیور، دو یا سه کیس استادی کامل و عمیق معمولاً کافی است. کیفیت روایت و تصمیم‌ها از تعداد پروژه‌ها مهم‌تر است.

آیا خودآموزی کافی است یا دوره لازم است؟

با خودآموزی هم می‌شود رسید، ولی معمولاً کند‌تر و با بازخورد کمتر. مزیت اصلی یک دوره‌ی خوب ساختار، پروژه‌ی هدایت‌شده و نقد منظم از طراح باتجربه است.

از نقشه تا اولین قدم؛ از کجا شروع کنید

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