چه چیزی یاد خواهید گرفت؟
طراحی رابط کاربری (UI) و تجربه کاربری (UX) با ابزار فیگما
ابزارها و پلاگین های کاربردی فیگما
جمع آوری اطلاعات اولیه، نظرسنجی و مشخص کردن اهداف کاربر و کسب و کار
ساخت وایرفریم و طرح و چارچوب اولیه محصول
ساخت وایرفریم و طرح و چارچوب اولیه محصول
تئوری رنگ ها و انتخاب رنگ و تصاویر مناسب برای محصول
ساخت آیکون و کامپوننت های گرافیکی قابل استفاده مجد
دربارۀ این دوره
مقدمه ای در مورد شغل طراحی رابط کاربری و تجربه کاربری (UI/UX)
اگه بخوام در مورد شغل طراحی رابط کاربری یا تجربه کاربری که بهش Designer UI/UX هم میگن، میشه اینطوری توضیحش داد:
شما قرار تعاملات خودتون رو با انسان ها زیاد کنید، عواطف، احساسات، روحیات و شخصیت های مختلف رو ببینید و باهاشون آشنا بشید و به جای تک تکشون زندگی کنید!
یه روز باید پزشک باشید، یه روز باید موبایل و محصولات دیجیتال بفروشید، یه روز باید جای کسی باشید که قرار آموزش بده و حتی قرار یه روز نقش یک بیمار رو داشته باشید و با چالش هاش زمانی که به پزشک مراجعه میکنه آشنا بشید یا خودتون رو بزارید جای یک مهاجر که قرار از یک پلتفرم مهاجرت استفاده کنه!
این شغل قرار احساس آدم هارو در استفاده هر محصولی که در اطرافشون هست بهتر کنه! این شغل قرار دنیارو جای بهتری برای زندگی کنه!
در یک جمله شما قرار انسان هارو با همه چالش هاو تخصص هایی که دارن زندگی کنید و مشکلاتشون رو در استفاده از محصولات حل کنید! جذاب نه ؟
برای هرچیزی که اطرافتون میبینید نیاز به یک طراح رابط کاربری و تجربه کاربری هست! پس دامنه گسترده ای برای شغل طراحی رابط کاربری و تجربه کاربری وجود داره.
در ابتدای راه شغلتون رو با طراحی سایت و اپلیکیشن ها شروع می کنید ولی هر چه تجربه تون در تعامل با انسان ها بیشتر میشه میتونید تبدیل به یک طراح محصول بشید و هرچیزی که در اطرافتون میبینید رو با توجه به خصوصیات انسان های اطرافتون طراحی کنید! چون یاد گرفتید با انسان ها همزادپنداری کنید و نقطه دردهاشون رو زمانی که دارن از یک محصول استفاده میکنن پیدا کنید!
کار کردن در این شغل هم میتونه به صورت کار در شرکت ها و استارت آپ ها باشه و هم میتونه به صورت فریلنسری باشه که شما در هر جا و هر کشوری که بخواهید میتونید با توجه به سطح تخصصی که دارید از فرصت های شغلی استفاده کنید.
این دوره مناسب چه افرادی است؟
خودت رو خلاق میدونی؟
همین کافیه! توی این دوره تخصص استفاده از ابزارها رو از ابتدا تا سطح پیشرفته یاد میگیری!
مثل کسی که ذاتا نقاش هست و فقط کافیه روش استفاده از رنگ ها و قلم هارو یاد بگیره
در این دوره چه مواردی آموزش داده خواهد شد؟
بخش مقدماتی:
• چطور با فیگما به عنوان طراح تجربه کابری(UX Designer) شروع به کار کنیم
• نحوه استفاده فیگما برای طراحی UX/UI
• نحوه طراحی پرسونا کاربر در طراحی UX
• طراحی یک پروژه UX از ابتدا تا انتها
• نحوه طراحی وایرفریم های اولیه
• باید ها و نبایدهایی که در انتخاب فونت طرح های وب و موبایل باید رعایت کنید
• آشنایی با اصطلاحاتی مثل:Components, Constraints & Multi Dimensional Variants.
• طراحی رابط کاربری UI یک اپلیکیشن و وب سایت
• UX Breaf و پرسونا اختصاصی خودتون رو ایجاد میکنید
• نحوه ساخت پروتوتایپ اولیه از پروژه خودتون رو یاد میگیرید
• نحوه استفاده از رنگ ها و تصاویر در طرح ها
• نحوه طراحی آیکن ها، دکمه ها و همه اجزا رابط کاربری (UI) رو یاد میگیرید
• یاد میگیرید که چطور با پلاگین ها و UI Kit های رایگانی که وجود داره سرعت طراحی خودتون رو افزایش بدید
• نحوه طراحی both simple & advanced micro interactions, page transitions & animations رو یاد میگیرید.
• نحوه خروجی گرفتن از Assets ها
بخش پیشرفته:
• نحوه استفاده از متغیرها به صورت پیشرفته و اینکه چطور میتونن به کامل شدن پروتوتایپ شما کمک کنن
• تفاوت بین variables و Tokens رو متوجه میشید و یاد میگیرید چطور Tokensهارو طراحی کنید
• نحوه استفاده از متغیرها برای طراحی نسخه های Light Mode و Dark Mode رو یاد میگیرید
• نحوه طراحی انیمیشن های جادویی برای جذب کاربران، طراحی گرادینت های متحرک
• یاد میگیرید که چطور از فایل های Lottie animation استفاده کنید و اون هارو طراحی کنید
• عناصر رییسپانسیو رو طراحی میکنید و این ویژگی نشون میده که تخصص شما هیچ حد و مرزی نداره
• با تایپوگرافی پیشرفته آشنا میشید و از کلمات آثار هنری خلق می کنید
• با استفاده از هوش مصنوعی AI مهارت طراحی تجربه کاربری UX خودتون رو به سطح بالاتری میبرید
• مهارت Prototyping خودتون رو افزایش میدید و یاد میگیرید که چطور با ترفندهایی از کاربر تست های مهم بگیرید
• با استیکی کردن دکمه ها و عناصر آشنا میشید
• نحوه ساخت منوهای Drop Down, Hover grow effects رو یاد میگیرید
مدرس دوره چه کسی است؟
مدرس این دوره آقای Daniel Walter Scott هست که 14 سال سابقه خلق و تدریس در این حوزه رو داره!
Daniel یکی از مدرس های معتبر Adobe instructor (ACI) در ایرلند هست که از طرف شرکت Adobe تایید شده است.
البته به گفته خود Daniel تنها در حوزه نرم افزارهای Adobe تخصص نداره و بخاطر ماهیت فضای دیجیتال در تمام ابزارهای این حوزه متخصص شده و آموزش میده.
من هم حامد ملک محمودی هستم و با 12 سال سابقه کاری در حوزه UI/UX و طراحی گرافیک به عنوان منتور در کنار شما هستم، Lead Design یک شرکت بین المللی بودم و هم اکنون به صورت فریلنسر مشغول همکاری با شرکت های داخلی و خارجی هستم.
تجربه کار من در پلتفرم های فریلنسری خارجی مثل آپورک و طراحی بیشتر از 100 وب سایت و اپلیکیشن در طول دوره کاری من میتونه به شما کمک کنه تا با کار کردن در این فضا آشنا بشید و چشم انداز خوبی نسبت به مسیرتون داشته باشید.
چرا در این دوره شرکت کنیم؟
دوره های زیادی وجود داره که توسط افراد متخصص دیگه داره ارائه میشه و شما میتونید در اون ها شرکت کنید!
میتونید نکته هایی رو یاد بگیرید و بعد به دنبال موقعیت شغلی مناسب جستجو کنید!
اما تفاوت این دوره با سایر دوره ها در جزئیاتی که باید به اون توجه کنید:
• شما بعد از اتمام دوره رها نمیشید، بلکه با توجه به محتوای دوره و نکته های منتور آماده میشید تا توسط تیم کارپل برای کارآموزی به شرکت های معتبر معرفی بشید
• شما علاوه بر کار کردن بر روی پروژه اختصاصی خودتون در یک تیم عضو میشید و با هم تیمی های خودتون با چالش های کارتیمی و پروژه واقعی آشنا خواهید شد.
• شما و هم تیمی هاتون میتونید روی پروژه همدیگه نظر بدید و اینطوری نکته های مفیدی از همدیگه یاد میگیرید.
• جلسه های هفتگی برای رفع اشکال میتونه فرصتی باشه تا نکته هایی که مشکل داشتید رو حل کنید و من هم در این جلسات آماده هستم تا تجربیات خودم رو در اختیار شما بزارم.
پیشنهاد شده توسط شرکت های برتر
شرکت های ممتاز این دوره را به کارکنان خود توصیه کرده اند.
نیازمندی ها
داشتن سیستم یا لپتاپ
داشتن علاقه به آموزش دیزاین
نصب برنامه فیگما
پرسش ها (0)
در بخش اول، با تفاوت‌های Wireframing Low Fidelity و High Fidelity در Figma آشنا می‌شوند و نحوه ایجاد فایل‌ها و آشنایی با فریم‌ها را یاد می‌گیرند.
در بخش دوم، به مباحث Type, Color & Icon Introduction می‌پردازند. این شامل اصول اولیه تایپوگرافی، ایجاد اشکال اساسی، استفاده از رنگ، و مدیریت آیکون‌ها با استفاده از ابزارها و پلاگین‌ها در Figma می‌شود.
طراحی صفحه وایرفریم بافت پایین (Low Fidelity)
دانشجو باید یک صفحه وایرفریم را بافت پایین طراحی کند. این شامل ایجاد ساختار اصلی صفحه با استفاده از ابزارهای Figma، افزودن المان‌های اساسی مانند دکمه‌ها، متن، و فضاهای خالی برای نمایش ترتیب المان‌ها می‌شود. تمرکز بر تبیین نقاط کلیدی برای مخاطبان و توضیح نحوه تفاوت بافت پایین با بافت بالا است.
ایجاد آیکون با استفاده از پلاگین‌ها
در این پروژه، دانشجو باید یک آیکون برای صفحه وایرفریم ایجاد کند. از دانشجو خواسته می‌شود که از پلاگین‌های Figma برای جستجو و انتخاب یک آیکون موردنظر استفاده کند. سپس آیکون را با توجه به مطالب یادگرفته شده در هفته اول، استایل دهد و آن را به صفحه وایرفریم اضافه کند. این پروژه به دانشجو این امکان را می‌دهد تا با استفاده از پلاگین‌ها در Figma به آیکون‌های زیبا و هماهنگ با طراحی‌های خود دست یابد.
در این هفته، دانشجو با ابزارها و تکنیک‌های ابتدایی پروتوتایپ‌سازی و انیمیشن در Figma آشنا شده و می‌توانند مفاهیم یادگرفته را در پروژه‌های خود به کار ببرند، همچنین توانمندی در به اشتراک گذاری و همکاری با سایر اعضای تیم را آموزش خواهند دید.
Prototyping Level 1
دانشجو می آموزد چگونه پروتوتایپ را در Figma ایجاد کند؛ از ابتدای ایجاد پیوندها تا تعیین انیمیشن و زمینه‌های مربوطه. همچنین، تست پروتوتایپ بر روی تلفن همراه با استفاده از Figma Mirror به دانشجو آموزش داده می‌شود.
Animation Level 1
در این بخش، مفاهیم انیمیشن هوشمند و تاخیرها در Figma مطرح می‌شود. دانشجو با توضیحاتی در مورد چگونگی اعمال انیمیشن‌های هوشمند و کنترل تاخیرها آشنا می‌شود.Animation Level 1
در این بخش، مفاهیم انیمیشن هوشمند و تاخیرها در Figma مطرح می‌شود. دانشجو با توضیحاتی در مورد چگونگی اعمال انیمیشن‌های هوشمند و کنترل تاخیرها آشنا می‌شود.
Commenting
دانشجو با مباحث اشتراک‌گذاری و نظردهی در فایل Figma با اعضای تیم آشنا می‌شود. آموزش اشتراک گذاری و ویرایش فایل با سایر طراحان UX در Figma نیز در این هفته جاری خواهد بود.
طراحی پروتوتایپ و انیمیشن ساده در Figma
در این پروژه، دانشجو قادر خواهد بود تا با استفاده از مفاهیم یاد گرفته شده در هفته دوم دوره UI/UX، یک صفحه پروتوتایپ شده و دارای انیمیشن‌های ساده را طراحی کند و با اشتراک گذاری این پروتوتایپ با هم تیمی های خود نظرات آن ها در رابطه با پروژه خود را خواهند گرفت.
PROJECT STAGES
انتخاب موضوع
دانشجو باید یک موضوع یا یک صفحه اصلی برای طراحی انتخاب کند. مثلاً می‌تواند یک صفحه وب یا اپلیکیشن موبایل باشد.
پروتوتایپ سطح یک
با استفاده از ابزارهای Figma، دانشجو باید صفحه اصلی یا بخشی از وبسایت یا اپلیکیشن خود را (Low Fidelity) پروتوتایپ کند. این شامل افزودن المان‌های اساسی مانند دکمه‌ها، فرم‌ها، و ناوبری می‌شود.دانشجو باید به پروتوتایپ خود انیمیشن‌های ساده اضافه کند. مثلاً می‌تواند انیمیشن در حین کلیک بر روی دکمه‌ها یا تغییر صفحه اعمال کند. این انیمیشن‌ها باید با استفاده از ابزارهای Figma به دقت تعیین شده و بازدهی مطلوب داشته باشند.
تست پروتوتایپ
دانشجو باید پروتوتایپ خود را در Figma Mirror یا به وسیله دیگر ابزارها بر روی تلفن همراه یا دیگر دستگاه‌ها تست کند تا از صحت و سلامت پروتوتایپ اطمینان حاصل شود.
اشتراک‌گذاری و نظر گرفتن
دانشجو باید پروتوتایپ خود را با سایر هم‌طراحان یا افرادی که به عنوان نظردهی‌کننده مشخص می‌شوند، به اشتراک بگذارد. نظرات و بازخوردهای دریافتی را جهت بهبود پروژه خود استفاده کند.
در هفته سوم از دوره UI/UX، دانشجو با تکنیک‌های پیشرفته طراحی و ابزارهای متنوع در Figma آشنا می شود.
دانشجو یاد می‌گیرد چگونه الهام‌بخشی برای پروژه‌های UX دریافت کنند و چگونه یک moodboard با کیفیت بالا را در Figma ایجاد کنند.
در این بخش، نحوه کار با ستون‌ها و گرید در Figma به دانشجو آموزش داده می‌شود.
نکات، ترفندها، ترجیحات و جزئیات عجیب در Figma معرفی می‌شود تا دانشجو توانایی بهره‌وری بیشتر از این ابزار را به دست آورند.
دانشجو با الهام‌گیری از رنگها و استفاده از ایدروپر در Figma برای انتخاب رنگ، ایجاد پالت رنگی، ساخت گرادیان و استفاده از استایل‌های رنگی آشنا می‌شود.
مباحث پیشرفته مربوط به متن و فونت‌ها از جمله مقایسه فونت در محیط دسکتاپ و مرورگر، انتخاب فونت‌ها و ترکیب آنها، ایجاد استایل‌های متنی و مسائل مربوط به متن در Figma مورد آموزش قرار می‌گیرد.
در این بخش، تکنیک‌ها و ترفندهای نقاشی در Figma، ایجاد دکمه‌های Squircle با گوشه‌های گرد IOS، عملیات بولین، انتخاب هوشمند و تنظیم مناسب در Figma به دانشجو آموزش داده می‌شود.
سوالاتی مانند آیا نیاز به آشنایی با Illustrator در کنار Figma هست؟ مورد بررسی قرار می‌گیرد.
نکات و ترفندهای استفاده از تصاویر در Figma، ماسک‌گذاری و برش تصاویر، و منابع تصاویر رایگان و پلاگین‌های مرتبط با Figma آموزش داده می‌شود.
مفاهیمی مانند اعمال افکت بلور به لایه‌ها، بلور پس‌زمینه و تصاویر در Figma و چگونگی ایجاد دکمه‌های UI نوآمورفیک در Figma به دانشجو یاد داده می‌شود.
آیا نیاز به استفاده از Photoshop برای طراحی UX در Figma وجود دارد؟ این سوال در این هفته پرسیده می‌شود.
ارتقاء و بهبود پروتوتایپ با تکنیک‌های پیشرفته
در این پروژه به ارتقاء پروتوتایپ فعلیتون می‌پردازیم! ابتدا، لطفاً یه سری منابع الهام‌بخش برای پروژه UX خودتون رو جمع‌آوری کنید و با استفاده ازشون، یک Moodboard خاص و خیلی باحال رو تو Figma ایجاد کنید. بعد، بهترین استفاده رو از ستون‌ها و گرید در Figma برای بهبود طراحی صفحاتتون ببرید، تا همه‌چی به یکدیگر بخوره. از ترفندها و نکات Figma هم برای سرعت بخشیدن به فرآیند طراحی استفاده کنید.
رنگها و فونت‌ها هم داستان خودشون رو دارن! یه پالت رنگی دل‌انگیز بسازید و فونت‌ها رو با دقت انتخاب کنید، تا یک هماهنگی خوب در طراحی داشته باشید. المان‌های گرافیکی جذاب مثل Squircle buttons هم اضافه کنید و با عملیات بولین حرفه‌ای‌تر بشید.
اگه نیاز به تصاویر دارید، با تکنیک‌های جدید در Figma اون‌ها رو اضافه کنید و ماسک‌گذاری جذاب انجام بدید. اگه دیدید که به فتوشاپ هم نیاز دارید، بی‌درنگ استفاده کنید.
PROJECT STAGES
Moodboard High Fidelity
جستجو و جمع‌آوری منابع الهام‌بخش برای پروژه UX
ایجاد یک Moodboard با کیفیت بالا در Figma بر اساس منابع الهام‌بخش.
Columns
طراحی صفحه با استفاده از ستون‌ها و گرید در Figma برای دستیابی به طرح‌های منظم و هماهنگ.
Tips & Tricks
بهره‌گیری از ترفندها و نکات Figma برای بهبود بهره‌وری در فرآیند طراحی.
Colors
ایجاد یک پالت رنگی جذاب و استفاده از گرادیان‌ها و استایل‌های رنگی در Figma.
Text & Fonts Advanced
انتخاب و ترکیب فونت‌ها برای مطابقت با هم و ایجاد استایل‌های متنی پیشرفته.
Working with Illustrator & Photoshop
در صورت نیاز استفاده از ایلاستریتور و فتوشاپ برای بهبود طرح
Images
افزودن تصاویر به صفحه، ماسک‌گذاری و برش تصاویر با استفاده از تکنیک‌های متنوع در Figma.
Effects
ایجاد افکت‌های جذاب برای لایه‌ها و تصاویر، اعمال بلور و ساخت دکمه‌های 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 در اون لحاظ شده باشه.
دیدگاه (1)
