دوره طراحی محصول (طراحی رابط کاربری و تجربه‌کاربری)

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

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

مقدمه      

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

تفکر طراحی

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

کاربر پژوهی در طراحی محصول

در ادامه با کاربر پژوهی یا یوزر ریسرچ (User Research) آشنا خواهیم شد و به دنبال چرایی استفاده از آن خواهیم بود. چرا باید کاربر پژوهی کنیم؟ مزیت‌های کاربرپژوهی چیست؟ کاربر پژوهی برخی از دیتاهای مورد نیاز طراحان را برآورده می‌کند اما نه همه را! چه مواردی را پوشش نمی‌دهد؟
تفاوت پژوهش رفتاری و نگرشی چیست؟ و در نهایت به نحوه تحلیل رقبا یا Competitive Analysis خواهیم پرداخت. اطلاعات کامل‌تر این بخش نیز در دوره تجربه کاربری ما با تمامی سرفصل‌ها قابل مشاهده  است.

پرسونا

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

در انتهای این بخش به این موضوع می‌پردازیم که آیا حتما به پرسونا نیاز داریم؟ و آیا همیشه پرسونا ثابت باقی می‌ماند؟

آموزش فیگما

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

در نهایت با بخش‌های مختلف این نرم‌افزار و ویژگی‌های آن نظیر داینامیک منو در فیگما و همچین لایه‌بندی در فیگما آشنا خواهیم شد و همچنین استفاده حرفه‌ای از این ابزارها را خواهیم آموخت.

رنگ‌ها

دراین بخش با مفهوم رنگ‌ها انواع سیستم‌های رنگی نظیر RGB، HSB و HSL آشنا خواهیم شد و نحوه ساختن رنگ‌های استاندارد طراحی را بر اساس متد HSB فرا خواهیم گرفت. اینکه کدام سیستم رنگی برای طراحی محصول دیجیتال مناسب است و با رنگ‌های اصلی و فرعی یا ثانویه آشنا خواهیم شد. در نهایت دایره رنگی و نحوه استفاده از آن را خواهیم آموخت. ضمنا جهت تبدیل شدن به یک طراح حرفه‌ای در انتخاب رنگ و … می‌توانید نگاهی به ورکشاپ رنگ و تایپوگرافی بیندازید.

فونت‌ها

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

مقدمه‌ای بر تجربه کاربری

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

دیکشنری طراحان در دوره طراحی محصول

آنالیز رقبا یا Competitive Analysis چیست؟ چرا آنالیز رقبا برای ما مهم است؟ چه پلتفرم‌هایی را می‌توانیم به عنوان رقیب در نظر بگیریم؟ مود بورد چیست و چگونه باید یک مود بورد خوب برای طراحی محصول خود بسازیم؟ با پلتفرم‌های دریبل، بی‌هنس و آپ‌لبز آشنا می‌شویم و مزیت‌های ساخت اسکچ و وایرفریم را فرا می‌گیریم. MVP یا حداقل محصول پذیرفتنی در بازار چیست و چه ویژگی‌هایی دارد؟ هندآف یا تحویل کار به چه شکلی هست؟ و بسازی از مفاهیم گسسته دیگر در این حوزه را فرا خواهید گرفت.

مراحل طراحی

در این قسمت به تشریح ۶ مرحله طراحی محصول خواهیم پرداخت. هر طراحی شامل ۶ مرحله تعریف مشکل (Define problem)، جمع‌آوری اطلاعات (Collect information)، طوفان فکری و آنالیز ایده‌ها (Brainstorm, analyse idea)، راه حل‌های توسعه و ساخت مدل اولیه (Develop solution and build a model)، جمع آوری فیدبک‌ها (Gather feedbacks) و در نهایت بهبود راه‌حل (Improve the solution) خواهد بود که در این قسمت ریز به ریز با نکات آن آشنا خواهید شد.

مسیر شغلی طراح محصول

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

وضعیت خالی و فضای سفید (Empty Space و Empty State)

وضعیت خالی (Empty state) چیست و چه کاربردی دارد؟ با نمونه‌هایی از آن آشنا خواهیم شد و همچنین با مفاهیم فضای خالی (Empty Space)، فضای سفید (White Space)، فضای منفی (Negative space) در طراحی محصول آشنا خواهیم شد.

شروع طراحی نرم‌افزار

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

در ادامه مسیر با قواعد بین‌المللی اندازه‌گیری و فواصل در طراحی‌ها کار را به پیش خواهیم برد و با انتخاب تایپ‌فیسی مناسب طراحی را به پیش می‌بریم. و در انتهای این بخش با مفاهیمی نظیر فضای خالی یا Empty Space و همچنین وضعیت خالی یا Empty State آشنا خواهیم شد. در نهایت در این بخش نرم‌افزاری مشابه نرم‌افزار زیر را خواهیم ساخت.

نسبت طلایی

دنباله فیبوناچی چیست؟ چرا استفاده از آن و همچنین نسبت طلابی (Golden ratio) در طراحی مهم است؟ چطور می‌توان اندازه تایپوگرافی را بر اساس نسبت طلایی در طراحی محصول اجرا کرد؟

بوت استرپ و Tailwind

با گایدلاین‌های بین‌المللی طراحی محصول در موبایل و دسکتاپ و ۴ سایز دیگر آشنا خواهیم شد و مباحث مرتبط با بوت‌استرپ و گریدینگ سیستم را فرا خواهیم گرفت. اینکه برای یک طراحی استاندارد به چند سایز طراحی لازم داریم و نحوه استفاده از نقاط شکست (Break point) جهت گرید‌بندی کردن به چه شکلی است؟

نهایی‌سازی طراحی نرم‌افزار

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

با پلاگین‌های مختلف و مورد نیاز جهت افزایش سرعت کار آشنا خواهیم شد و بخش فیگ‌جم را فرا خواهیم گرفت. آموزش فیگ‌جم در این بخش به طور کامل جلو خواهد رفت و ساخت جریان کاربر و نقسه سفر مشتری در آن انجام خواهد شد.