آموزش طراحی رابط کاربری سایت (UI) در ایلوستریتور — از صفر تا خروجی کد
اگه دنبال این هستی که طراحی رابط کاربری وب رو با ایلوستریتور یاد بگیری و از همون ابتدا اصولی پیش بری، این دوره دقیقاً همون مسیریه که لازم داری. قراره قدم‌به‌قدم یک رابط کاربری ساده رو از صفر پیاده‌سازی کنیم؛ از تنظیمات سند و ف...
آموزش طراحی رابط کاربری سایت (UI) در ایلوستریتور — از صفر تا خروجی کد
اگه دنبال این هستی که طراحی رابط کاربری وب رو با ایلوستریتور یاد بگیری و از همون ابتدا اصولی پیش بری، این دوره دقیقاً همون مسیریه که لازم داری. قراره قدم‌به‌قدم یک رابط کاربری ساده رو از صفر پیاده‌سازی کنیم؛ از تنظیمات سند و فضای کار گرفته تا خروجی گرفتن و حتی استخراج کد CSS.
📌 نگاه کلی به دوره
مشخصه
جزئیات
عنوان دوره
آموزش طراحی رابط کاربری سایت (UI) در ایلوستریتور
سطح
متوسط
تعداد دروس
۱۹ درس در ۱ فصل
مدت زمان
حدود ۶۲ دقیقه
حجم فایل‌ها
۱۵۵.۷۰ مگابایت
چرا این دوره رو انتخاب کنی؟
خیلی از بچه‌ها فکر می‌کنن طراحی UI وب فقط با فیگما یا فتوشاپ ممکنه، اما ایلوستریتور یه مزیت بزرگ داره: ترکیب وکتور، سمبل‌ها و استایل‌های گرافیکی باعث می‌شه طراحی‌های تکرارشونده رو خیلی سریع‌تر انجام بدی. توی این دوره هم دقیقاً همین قابلیت‌ها رو با مثال عملی تمرین می‌کنی.
نکته جالب ماجرا اینه که در انتها می‌تونی کد CSS رو هم از طرح ایلوستریتور استخراج کنی — یعنی خروجی کارت فقط یه تصویر گرافیکی نیست، یه قدم به سمت پیاده‌سازی واقعی نزدیک‌تر می‌شی.
توی این دوره چی یاد می‌گیری؟ 🎯
تنظیمات سند و شخصی‌سازی فضای کار وب — پایه‌ای‌ترین قدم که خیلی‌ها ازش رد می‌شن
ایجاد چند آرت‌بورد در یک سند (Artboard) — برای مدیریت صفحات مختلف طراحی
کار با گریدها (Grids) — نظم و انسجام در چیدمان
مد رنگ و تنظیمات رنگ (Color modes & Settings)
تکست استایل (Text Style) — یکدستی تایپوگرافی در کل پروژه
دکمه داینامیک (Dynamic Button) — طراحی دکمه‌هایی که قابل استفاده مجدد هستن
استایل گرافیکی (Graphic Style) و سمبل (Symbol)
مقیاس ۹ بخشی (9-Slice Scale) — یکی از ترفندهای کاربردی برای کشش هوشمند اجزا
ویرایش رنگ و رنگ‌آمیزی مجدد آرت‌بورد (Recolor Artwork)
پس‌زمینه یکپارچه (Seamless Background)
نقشه سایت (Site Map) و ساخت وایرفریم (Wireframe)
نویگیشن (Navigation) — طراحی منو و مسیر حرکت کاربر
تمپلیت و PDF، خروجی گرفتن (Export) و استخراج کد CSS
ترفندهای طراحی (Design Tips & Tricks) — جمع‌بندی نکات عملی
پیش‌نیازها
آشنایی مقدماتی با محیط ایلوستریتور کافیه. اگه هنوز با ابزارهای پایه این نرم‌افزار راحت نیستی، پیشنهاد می‌کنیم اول دوره جامع و پروژه‌محور ایلوستریتور ۲۰۱۹ رو ببینی و بعد سراغ این دوره بیای.
این دوره به چه کسی می‌خوره؟
دانشجوها و افرادی که می‌خوان تازه وارد حوزه طراحی رابط کاربری بشن
طراحان وب که می‌خوان ابزارهاشون رو گسترش بدن
کسایی که روی پروژه‌های درسی یا فریلنسری نیاز به طراحی UI دارن و می‌خوان سریع به نتیجه برسن
فهرست کامل دروس
تنظیمات سند و شخصی‌سازی فضای کار وب — ۰۰:۰۵:۴۴
ایجاد چند آرت‌بورد در یک سند — ۰۰:۰۳:۰۷
گریدها — ۰۰:۰۴:۱۰
مد رنگ و تنظیمات — ۰۰:۰۲:۰۱
تکست استایل — ۰۰:۰۴:۰۲
دکمه داینامیک — ۰۰:۰۴:۰۴
استایل گرافیکی — ۰۰:۰۳:۲۰
سمبل — ۰۰:۰۱:۴۷
مقیاس ۹ بخشی — ۰۰:۰۲:۳۵
ویرایش رنگ — ۰۰:۰۲:۵۹
رنگ‌آمیزی مجدد آرت‌بورد — ۰۰:۰۲:۰۵
پس‌زمینه یکپارچه — ۰۰:۰۲:۵۳
نقشه سایت (Site Map) — ۰۰:۰۲:۳۳
ساخت وایرفریم — ۰۰:۰۳:۵۸
نویگیشن — ۰۰:۰۲:۵۰
تمپلیت و PDF — ۰۰:۰۲:۵۵
خروجی گرفتن — ۰۰:۰۲:۰۷
استخراج کد CSS — ۰۰:۰۲:۰۲
ترفندهای طراحی — ۰۰:۰۱:۵۷
سوالی که ممکنه ذهنت رو مشغول کنه 🤔
«این دوره به کارم میاد یا فقط تئوریه؟»
باید بگیم بیشتر جنبه عملی داره. مثلاً همون بخش Symbol و 9-Slice رو اگه یاد بگیری، توی پروژه‌های واقعی مثل طراحی صفحات فرود یا داشبورد، سرعت کارت چند برابر می‌شه. یا وقتی وایرفریم بسازی و بعدش کد CSS خروجی بگیری، دقیقاً همون چیزیه که یه تیم فرانت‌اند ازت انتظار
طراحی رابط کاربری سایت با ایلوستریتور؛ ثبت‌نام با تخفیف
