چه چیزی یاد خواهید گرفت؟
طراحی رابط کاربری (UI) و تجربه کاربری (UX) با ابزار فیگما
ابزارها و پلاگین های کاربردی فیگما
جمع آوری اطلاعات اولیه، نظرسنجی و مشخص کردن اهداف کاربر و کسب و کار
ساخت وایرفریم و طرح و چارچوب اولیه محصول
ساخت وایرفریم و طرح و چارچوب اولیه محصول
تئوری رنگ ها و انتخاب رنگ و تصاویر مناسب برای محصول
ساخت آیکون و کامپوننت های گرافیکی قابل استفاده مجد
دربارۀ این دوره
Figma UI UX Design Essentials دوره آموزش طراحی رابط کاربری (UI) و تجربه کاربری (UX) با ابزار فیگما می باشد که توسط Udemy (سابقا آکادمی توسط تخصصی آموزش گرافیک Bring Your Own Laptop) منتشر شده است. Daniel Walter Scott مدرس این دوره آموزشی یکی از مدرسین مطرح در حیطه گرافیک و طراحی دیجیتال است که مدرک آموزش رسمی خود را از شرکت ادوبی دریافت کرده است. هدف شما در این دوره آموزشی خلق تجربه های کاربری تعاملی و ساخت پروتوتایپ اولیه از رابط کاربری یک محصول دیجیتالی مانند یک سایت یا اپلیکیشن است. غایت نهایی طراحی و توسعه یک رابط کاربری رفع نیاز کاربر و افزایش تعداد مشتریان و کاربران یک محصول خاص است. این دوره آموزشی برای افراد کاملا مبتدی و کسانی که هیچ تجربه ای در فرآیند طراحی رابط و تجربه کاربری ندارند طراحی شده است و می تواند نقطه شروع مناسبی برای ورود شما به دنیای طراحی باشد.
طراحی تجربه کاربری یک تخصص بوده و به صورت فرآیند گونه دارای مراحل مختلفی مانند جمع آوری اطلاعات اولیه و مشخص کردن نیاز کاربر و کسب و کار، ساخت وایرفریم و طرح اولیه محصول، استفاده از رنگ ها و تصاویر در محصول، انتخاب فونت و تایپوگرافی مناسب، ساخت آیکون و کامپوننت ای قابل استفاده مجدد گرافیکی مانند دکمه ها، ساخت کیت رابط کاربری و … می باشد.
پیشنهاد شده توسط شرکت های برتر
شرکت های ممتاز این دوره را به کارکنان خود توصیه کرده اند.
نیازمندی ها
داشتن سیستم یا لپتاپ
داشتن علاقه به آموزش دیزاین
نصب برنامه فیگما
پرسش ها (3)
سلام خیلی ممنون یکی از بهترین دوره ها هست خدا قوت
سلام فیلم های این دوره خظای 403 میدن لطفا رسیدگی کنید
سلام وقت بخیر، ویدیوها اصلاح شد.
در بخش اول، با تفاوت‌های Wireframing Low Fidelity و High Fidelity در Figma آشنا می‌شوند و نحوه ایجاد فایل‌ها و آشنایی با فریم‌ها را یاد می‌گیرند.
در بخش دوم، به مباحث Type, Color & Icon Introduction می‌پردازند. این شامل اصول اولیه تایپوگرافی، ایجاد اشکال اساسی، استفاده از رنگ، و مدیریت آیکون‌ها با استفاده از ابزارها و پلاگین‌ها در Figma می‌شود.
این هفته با تقویت مهارت‌های ابتدایی در Figma و ایجاد پایه‌ای برای هفته‌های آینده ختم می‌شود.
در این هفته، دانشجو با ابزارها و تکنیک‌های ابتدایی پروتوتایپ‌سازی و انیمیشن در Figma آشنا شده و می‌توانند مفاهیم یادگرفته را در پروژه‌های خود به کار ببرند، همچنین توانمندی در به اشتراک گذاری و همکاری با سایر اعضای تیم را آموزش خواهند دید.
Prototyping Level 1
دانشجو می آموزد چگونه پروتوتایپ را در Figma ایجاد کند؛ از ابتدای ایجاد پیوندها تا تعیین انیمیشن و زمینه‌های مربوطه. همچنین، تست پروتوتایپ بر روی تلفن همراه با استفاده از Figma Mirror به دانشجو آموزش داده می‌شود.
Animation Level 1
در این بخش، مفاهیم انیمیشن هوشمند و تاخیرها در Figma مطرح می‌شود. دانشجو با توضیحاتی در مورد چگونگی اعمال انیمیشن‌های هوشمند و کنترل تاخیرها آشنا می‌شود.
Commenting
دانشجو با مباحث اشتراک‌گذاری و نظردهی در فایل Figma با اعضای تیم آشنا می‌شود. آموزش اشتراک گذاری و ویرایش فایل با سایر طراحان UX در Figma نیز در این هفته جاری خواهد بود.
در هفته سوم از دوره UI/UX، دانشجو با تکنیک‌های پیشرفته طراحی و ابزارهای متنوع در Figma آشنا می شود.
دانشجو یاد می‌گیرد چگونه الهام‌بخشی برای پروژه‌های UX دریافت کنند و چگونه یک moodboard با کیفیت بالا را در Figma ایجاد کنند.
در این بخش، نحوه کار با ستون‌ها و گرید در Figma به دانشجو آموزش داده می‌شود.
نکات، ترفندها، ترجیحات و جزئیات عجیب در Figma معرفی می‌شود تا دانشجو توانایی بهره‌وری بیشتر از این ابزار را به دست آورند.
دانشجو با الهام‌گیری از رنگها و استفاده از ایدروپر در Figma برای انتخاب رنگ، ایجاد پالت رنگی، ساخت گرادیان و استفاده از استایل‌های رنگی آشنا می‌شود.
مباحث پیشرفته مربوط به متن و فونت‌ها از جمله مقایسه فونت در محیط دسکتاپ و مرورگر، انتخاب فونت‌ها و ترکیب آنها، ایجاد استایل‌های متنی و مسائل مربوط به متن در Figma مورد آموزش قرار می‌گیرد.
در این بخش، تکنیک‌ها و ترفندهای نقاشی در Figma، ایجاد دکمه‌های Squircle با گوشه‌های گرد IOS، عملیات بولین، انتخاب هوشمند و تنظیم مناسب در Figma به دانشجو آموزش داده می‌شود.
سوالاتی مانند آیا نیاز به آشنایی با Illustrator در کنار Figma هست؟ مورد بررسی قرار می‌گیرد.
نکات و ترفندهای استفاده از تصاویر در Figma، ماسک‌گذاری و برش تصاویر، و منابع تصاویر رایگان و پلاگین‌های مرتبط با Figma آموزش داده می‌شود.
آیا نیاز به استفاده از Photoshop برای طراحی UX در Figma وجود دارد؟ این سوال در این هفته پرسیده می‌شود.
مفاهیمی مانند اعمال افکت بلور به لایه‌ها، بلور پس‌زمینه و تصاویر در Figma و چگونگی ایجاد دکمه‌های UI نوآمورفیک در Figma به دانشجو یاد داده می‌شود.
ماسک ها و ویدئو در فیگما
این هفته پروژه هایی که باید انجام بدی ساده هستن ولی با استفاده از اون ها و خلاقیت خودت جذابیت طرح هات رو ببری بالا. سعی کن ذهنت رو محدود به پروژه ها نکنی و پیشنهاد میکنم با توجه به نکته هایی که تا الان یاد گرفتی جزئیات بیشتری در پروژه هات استفاده کنی.
جزئیات هستن که باعث میشه تو از بقیه طراح ها متمایز بشی.
طراحی صفحه خوش آمدگویی
مرحله اول Gradient Animation
یک صفحه خوش آمدگویی با استفاده از Gradient Animation برای طرح خود ایجاد کنید که این ویژگی ها را داشته باشه:
رنگ هایی که مورد استفاده قرار میگیره از برند خودتون باشه
در گرادینت خودتون از ویژگی های blur, linear و radial استفاده کنید.
حتما Animation Gradient شما در یک کامپوننت باشه.
دو عدد دکمه و یک متن خوش آمد گویی در صفحه وجود داشته باشه.
دکمه های حتما باید autolayouts باشن
مرحله دوم Text Animation
PROJECT #2
طراحی بنر تبلیغاتی شبکه اجتماعی
مرحله اول Text Mask
با توجه به موضوع پروژه خودتون یک پست اینستاگرام طراحی کنید که این وِیژگی هارو داشته باشه.
از دو متن در پست استفاده کنید
هر دو متن با توجه به موضوع پروژه حالت Text Mask داشته باشن. (ترجیحا از تصویر مرتبط با پروژه در حالت Mask استفاده کنید)
مرحله دوم Alpha Mask
در پروژه پست اینستاگرام از ویژگی Alpha Mask استفاده کنید.
یک تصویر مرتبط با موضوع پروژه خودتون انتخاب کنید و ویژگی Alpha Mask رو بر روی اعمال کنید.
نکته: شما میتونید تصویر خودتون رو از سایت Unsplash پیدا کنید و در فتوشاپ تبدیل به PNG کنید و یا اینکه یک تصویر PNG رو از گوگل پیدا کنید.
مرحله سوم Luma Mask
یک تصویر مرتبط با پروژه به عنوان پس زمینه در پست اینستاگرامی خود استفاده کنید که ویژگی Luma Mask در اون لحاظ شده باشه.
سلام، زبان ویدئو ها انگلیسی هست درسته؟ اگر زبان غیر فارسی هستش زیر نویس داره دوره؟
سلام وقت بخیر بله تمام دوره ها زیر نویس دارند.