آنچه یاد خواهید گرفت:
با استفاده از ابزارهای مدرنِ مورد استفاده شرکتهای برتر در 2023، پروژههای وب و موبایل با طراحی زیبا برای مشتریان خود بسازید.
به عنوان طراح استخدام شوید یا به یک فریلنسر تبدیل شوید که بتواند از هرجا و برای هرکسی کار کند. طراحان بسیار پرتقاضا هستند.
شامل 100+ دارایی و قالبهای طراحی پریمیوم است که میتوانید آنها را نگه دارید و برای شخصیسازی همه پروژههای آیندهتان استفاده کنید.
Figma را برای نیازهای طراحی خود بهخوبی یاد بگیرید و سپس بیاموزید چگونه طرحهایتان را به یک وبسایت لایو با HTML و CSS تبدیل کنید.
در پایان دوره، یک پورتفولیوی طراحی فوقالعاده داشته باشید که بهصورت حرفهای و متناسب با نیاز شما تکمیل شده است (ما آن را برای شما فراهم میکنیم.)
هم اصول طراحی وب و هم طراحی موبایل را بهخوبی یاد بگیرید و بفهمید چگونه از اسکچ اولیه به طرحهای نهایی باکیفیت و دقیق برسید که مشتریان را شگفتزده میکنند.
یاد بگیرید با استفاده از Figma و دیگر ابزارهایی که برخی از برترین طراحان جهان استفاده میکنند، برای همه انواع دستگاهها طراحی کنید.
یاد بگیرید چگونه با HTML5 و CSS3 طرحهای خود را جانبخشی کرده و وبسایتهای کاملاً تابعی بسازید.
بهترین شیوههایی را یاد بگیرید که معمولاً سالها زمان میبرد تا در صنعت طراحی به آنها مسلط شوید.
یاد بگیرید برای همه نیازهای برندینگ، لوگوهای حرفهای و انتخابهای طراحی مناسب بسازید.
بهترین شیوههای UI/UX را با استفاده از جدیدترین روندهای صنعت یاد بگیرید.
یاد بگیرید همزمان هم طراح باشید و هم توسعهدهنده وب (ترکیبی نادر از مهارتها که بسیار پرتقاضاست.)
پیشنیازهای دوره
هیچ پیشنیازی ندارد. ما همه موارد را از پایه به شما آموزش و نشان میدهیم! از صفر تا تسلط
آماده باشید که عاشق طراحی شوید و تا پایان عمر، هر چیزی را که لمس میکنید به پروژههایی زیبا تبدیل کنید.
توضیحات دوره
این دوره همین حالا با همه ابزارهای مدرن طراحی و بهترین شیوهها بروزرسانی شده است. در دورهای شرکت کنید که توسط متخصصان صنعت تدریس میشود؛ افرادی که واقعاً در Silicon Valley و Toronto برای شرکتهای برتر کار کردهاند. پیدا کردن یک طراح عالی روزبهروز سختتر میشود و حالا دیدن حقوقهای 160,000+ دلاری برای طراحان غیرمعمول نیست، چون این مهارت ارزش بسیار بالایی دارد. ما به شما یاد میدهیم چگونه به آن سطح برسید.
با استفاده از جدیدترین و بهترین شیوهها در طراحی وب و طراحی موبایل، و همچنین طراحی رابط کاربری و تجربه کاربری (UI/UX)، این دوره روی این تمرکز دارد که شما را بهصورت کارآمد از صفر به نقطهای برساند که بتوانید استخدام شوید یا قراردادهای فریلنسری بگیرید. ما از ابزارهای پرتقاضایی مثل Figma استفاده میکنیم تا یک گردشکار کامل را از ابتدا تا انتها به شما نشان دهیم. فارغالتحصیلان دورههای Andrei اکنون در Google و Tesla و Amazon و Apple و IBM، JP Morgan و Facebook و دیگر شرکتهای برتر فناوری کار میکنند.
این دوره همچنین شامل 100+ دارایی و قالبهای طراحی پریمیوم است که میتوانید آنها را نگه دارید و برای شخصیسازی همه پروژههای آیندهتان استفاده کنید. ما تضمین میکنیم که این جامعترین منبع آنلاین برای یادگیری مهارتهای طراحی است.
این برنامهی آموزشی کاملاً عملی است و شما را از ابتدا تا انتهای مسیر کار بهعنوان یک طراح، از یادگیری ساخت طرحهای نهایی و حرفهای گرفته تا تبدیل آنها به وبسایتها یا اپلیکیشنهای واقعی با استفاده از HTML و CSSهمراهی میکند.
موضوعاتی که در این دوره پوشش داده میشوند عبارتند از:
اصول طراحی وب و موبایل + تفاوت طراحی با توسعه وب
شروع کار - اسکچینگ، الهامگیری + ساختار
اسکچینگ
مقدمهای بر اسکچ
فرآیند اسکچینگ
اسکچینگجریانهای کاربر
نکات اسکچینگ
الهام گرفتن
چگونه الهامات را دریافت کنیم؟
چگونه بهصورت آنلاین الهامات پیدا کنیم؟
مبانی Figma
پلنها و ثبتنام
Figma را کجا استفاده کنیم؟
رابط کاربری Figma - ساختار
رابط کاربری Figma - فایلها
رابط کاربری Figma - نوار ابزار
رابط کاربری Figma - سایدبار چپ
رابط کاربری Figma - سایدبار راست
اشکال و ابزارها — فریمها
شکلها و ابزارها - گروهها
شکلها و ابزارها - شکلهای اولیه و عملیاتهای بولی
طراحی در Figma - تصاویر
طراحی در Figma - شروع کار با متن
طراحی در Figma - محدودیتها
طراحی در Figma - استفاده از طرحبندی خودکار
طراحی در Figma - ویژگیهای طرحبندی خودکار
منابع و همکاری - فایلهای Community
منابع و همکاری - پلاگینهای Community
منابع و همکاری - اشتراکگذاری و نظرات
پروژه - ساخت لوگو با استفاده از شکلهای اولیه
پروژه - دکمههای طرحبندی خودکار
پروژه - ساخت ناوبری واکنشگرا
پروژه - متن واکنشگرا
پروژه - تصاویر و گرادیانها
پروژه - Strokeها و شکلها
پروژه - طرحبندی و واکنشگرایی
جریانهای کاربر
آمادهسازی برای این بخش
بایدها و نبایدها
جریانهای کاربر در Figma - آنبوردینگ
جریانهای کاربر در Figma - جستجو
Sitemap
مقدمهای بر Sitemap
ساخت یک Sitemap ساده
داراییهای قابلاستفاده مجدد برای Sitemap
بررسی Figma - کامپوننتها و واریانتهای پایه
Sitemap در Figma - لایه بالایی
Sitemap در Figma - بررسی عمیقتر
نکاتی برای ساخت Sitemap عالی
بررسی و تکرار - وایرفریمها، نمونهسازی اولیه و بازخورد
وایرفریمها
وایرفریم چیست؟
چگونه یک وایرفریم بسازیم؟
بررسی Figma - کامپوننت دکمه اولیه
بررسی Figma - واریانتها
چگونه از کامپوننتهای وایرفریم استفاده کنیم؟
وایرفریمها - صفحه اصلی
وایرفریمها - سبد خرید
وایرفریمها - پروفایل
نمونهسازی اولیه
بررسی Figma - نمونهسازی اولیه در Figma
نمونهسازی اولیه در Figma - جریانها و نقاط شروع
نمونهسازی اولیه در Figma - اتصالها
نمونهسازی اولیه در Figma - تعاملها
نمونهسازی اولیه در Figma - انیمیشنها
نمونهسازی اولیه در Figma - تنظیمات نمونه
نمونهسازی اولیه در Figma - ارائه نمونه
پروژه - ناوبری
پروژه - حذف یک آیتم از Wishlist
پروژه - پیدا کردن یک محصول
گرفتن بازخورد
چرا بازخورد مهم است؟
بازخورد سازنده
طراحی ویژوال - تئوری طراحی + دسترسپذیری
فاصلهگذاری و گریدها
گرید چیست؟
مبانی گرید
بررسی Figma - گریدهای ثابت و شناور
بررسی Figma - نقاط شکست
بررسی Figma - استایل گرید
پروژه - گرید طرحبندی موبایل
پروژه - گریدهای طرحبندی دسکتاپ
قوانین سادهای که باید رعایت شوند
تایپوگرافی
Serifها
Sans Serifها
Display و Mono
انتخاب فونتها
بررسی Figma - ویژگیهای متن
تمرین - ارتقای یک برند
تمرین - سناریوهای Typeface
تمرین - Google Fonts
پروژه - بررسی Typeface
پروژه - جفت کردن خانوادههای فونت
پروژه - تیترها، متن اصلی و برچسبها
پروژه - سیستم Typeface
بررسی Figma - استایلهای متن
رنگ
پالتهای رنگ
سؤالهای مهمی که باید پرسید؟
ساخت پالتهای رنگ
بررسی Figma - رنگها
تمرین - گسترش یک پالت رنگ محدود
تمرین - ساخت یک پالت رنگ
بررسی Figma - سبکهای رنگ
تمرین - استفاده از سبکهای رنگ
پروژه - رنگهای اصلی و خنثی
پروژه - رنگهای تأکیدی
تصاویر و آیکوننگاری
مقدمهای بر داراییهای ویژوال
بررسی Figma - پلاگینهای تصویر
بررسی Figma - سبکهای تصویر
بررسی Figma - ماسکها
تمرین - بررسی تصاویر
تمرین - کار کردن متن و تصویر در کنار هم
بررسی Figma - پلاگینهای Illustration
تمرین - افزودن تصاویر به طرحهایتان
بررسی Figma - پلاگینهای آیکون
بررسی Figma - ابزار Pen
تمرین - آیکونهای سفارشی با ابزارPen
فرمها + عناصر UI
فرمها و عناصر UI چیستند؟
بهترین شیوهها - فرمها
بهترین شیوهها - ورودیهای پایه و پیشرفته
بهترین شیوهها - ورودیها
بهترین شیوهها - دکمهها
بررسی Figma - ویژگیهای کامپوننت
ویژگیها در برابر واریانتها
بررسی Figma - ویژگیهای کامپوننت دکمه
بررسی Figma - واریانتهای دکمه
بررسی Figma - ترکیب کامپوننتها
بررسی Figma - امکانات کامپوننت فرم
پروژه - جریان رجیستریشن
دسترسپذیری
دسترسپذیری چیست؟
فناوریهای کمکی
الگوهای ویژوال برای دسترسپذیری
ابزارهایی برای دسترسپذیر کردن طراحی شما
کاوش طراحی – طراحی اپلیکیشن + سیستمهای طراحی
الگوهای طراحی
الگوهای طراحی چیستند؟
چرا الگوهای طراحی ارزشمند هستند؟
چگونه الگوهای طراحی را بهکار ببریم؟
تحلیل الگوهای طراحی
شکافتن و انتخاب الگوهای طراحی
طراحی موبایل
بهترین شیوههای طراحی موبایل
ویژوال استایل و کاوش
دقت طراحی
کاوش ویژوال - ناوبری
کاوش ویژوال - دکمهها
بررسی Figma - سبکهای افکت
کاوش ویژوال - کارتهای محصول
کاوش ویژوال - کارتهای متن
طراحی صفحه - صفحه اصلی
طراحی صفحه - صفحه محصول
موشن و میکروتعاملات
اهمیت موشن
چرا میکروتعاملات مهم هستند؟
میکروتعامل چیست؟
بررسی Figma - مقدمهای بر Smart Animate
بررسی Figma - ویژگیهای Smart Animate
تمرین - پارالاکس
تمرین - پیام جدید
تمرین - Overlayها
بررسی Figma - کامپوننتهای تعاملی
تمرین - دکمههای تعاملی
پروژه - صفحه خوشآمدگویی پارالاکس
پروژه - آنبوردینگ با Drag
پروژه - Overlay سبد خرید
پروژه - میکرواینترکشن دکمه
کنار هم قرار دادن همه مطالب - استفاده از سیستم طراحی ما و نمونهسازی اولیه Hi-Fi با Figma
سیستمهای طراحی
استایلها و کامپوننتهای اولیه در برابر کامپوننتهای مخصوص محصول
ساخت دقت طراحی و سازماندهی کامپوننتها و استایلهای بالقوه
استایلها و کامپوننتهای پایه
کامپوننتها - دکمهها
کامپوننتها - کارتها
کامپوننتها - هدرها
کامپوننتها - ورودیها
کامپوننتها - آیتمهای لیست
کامپوننتها - ناوبری
کامپوننتها - عناصر متفرقه
اجرا
حرکت به سوی طرحهای نهایی خود
اجرا - صفحه معرفی
اجرا - صفحههای آنبوردینگ
اجرا - صفحههای رجیستریشن
اجرا - صفحه اصلی
اجرا - صفحههای Wishlist
اجرا - صفحه پروفایل
اجرا - سبد خرید و چکاوت
نمونههای اولیه - رجیستریشن
نمونههای اولیه - افزودن به سبد خرید
نمونههای اولیه - چکاوت
نمونههای اولیه - پلاگین Lottie Files
نمونههای اولیه - جستجو و فیلترها
از Figma به وبسایت (یک طرح Figma را بردارید و با HTML و CSS آن را به یک وبسایت لایو تبدیل کنید.)
07 HTML + HTML5
08 CSS + CSS3 - مبانی CSS و CSS Grid و Flexbox و انیمیشنهای CSS
آنلاین کردن وبسایت شما
این دوره کاملاً جدید شما را از ابتداییترین مفاهیم، یعنی اصول و مبانی طراحی گرافیک، تا ساخت محصولات زیبا، یادگیری UX/UI و تعاملات و ایجاد یک فرایند کامل طراحی برای استفاده در همه پروژهها و مشتریان آیندهتان همراهی میکند. ما تقریباً همه موارد را پوشش میدهیم تا دفعه بعد که مسئول طراحی یک محصول شدید، یک نقشه گامبهگام و راهنمای حرفهای برای کار در اختیار داشته باشید.
ما مهارتهایی را به شما آموزش میدهیم که به شما اجازه میدهد برای زمان خود پول زیادی دریافت کنید، نه اینکه در چند وبسایت فریلنسری تصادفی برای چند دلار در ساعت رقابت کنید. هدف این است که مهارتهای یک طراح برتر را به شما بدهیم و در این مسیر، یک محصول واقعی برای یک شرکت طراحی کنیم که بتوانید آن را به پورتفولیوی خود اضافه کنید.
این دوره درباره این نیست که فقط بدون درک اصول، تماشا کنید و جلو بروید تا وقتی دوره تمام شد، جز دیدن یک آموزش دیگر ندانید چهکار کنید. نه! این دوره شما را به چالش میکشد تا از یک مبتدی مطلق به فردی تبدیل شوید که یک طراح برتر است و میتواند استخدام شود. طراحی مهارتی ارزشمند است که برخلاف بیشتر مهارتهای فنی، به راحتی منسوخ نمیشود. روندها تغییر میکنند، اما مهارتها و اصولی که در این دوره یاد میگیرید، تا سالهای زیادی در آینده همراه شما خواهند بود.
این دوره برای شما مناسب است اگر:
- شما کاملاً مبتدی هستید و میخواهید طراح شوید و فریلنسری کار کنید.
- شما طراح هستید و میخواهید برای کار خود دستمزد بیشتری بگیرید.
- شما توسعهدهندهای هستید که میخواهید مهارتهای طراحی خود را بهتر کنید.
این دوره برای چه کسانی مناسب است؟
کسی که میخواهد یک کسبوکار طراحی وب یا موبایل را بهصورت جانبی و فریلنسری شروع کند، یا بهعنوان طراح در یک شرکت کار کند.
توسعهدهندگان وب و موبایل که میخواهند یک مهارت ارزشمند دیگر به ابزارهای خود اضافه کنند.
کسی که میخواهد بهعنوان طراح وب، طراح موبایل یا طراح UI/UX استخدام شود.
کسی که میخواهد درباره جدیدترین قابلیتهای CSS3 مانند Flexbox و CSS Grid و متغیرهای CSS و همچنین HTML5 یاد بگیرد.