آموزش UI/UX در تبریز

جلسه ۱: مقدمه و تفکر طراحی (Design Thinking)

موضوعات:

• تعریف دقیق تعامل انسان و کامپیوتر (HCI)

• تفاوت‌های کلیدی UI و UX و مرزبندی وظایف هر کدام

• آشنایی با متدولوژی تفکر طراحی (Design Thinking) و مراحل پنج‌گانه آن

• بررسی چرخه عمر محصول (Product Life Cycle) و جایگاه طراح در تیم

خروجی:

• درک مدل ذهنی طراح و انتخاب موضوع پروژه عملی دوره توسط دانشجو

جلسه ۲: پژوهش کاربر (User Research – بخش اول)

موضوعات:

• تحقیقات کیفی در مقابل کمی (Qualitative vs Quantitative)

• تدوین دقیق پروتکل مصاحبه و نحوه اجرای جلسات مصاحبه با کاربر

• نوشتن پرسشنامه‌های هدفمند و روش‌های توزیع آن

خروجی:

• اجرای فرآیند واقعی مصاحبه با حداقل ۲ کاربر هدف

جلسه ۳: پژوهش کاربر (User Research – بخش دوم)

موضوعات:

• نحوه تحلیل داده های خام حاصل از مصاحبه ها.

• ایجاد پرسونای مخاطب (User Persona) بر اساس الگو های رفتاری واقعی

• رسم نقشه همدلی (Empathy Map) برای درک بهتر نیازها و نقاط درد کاربر

خروجی:

• سند نهایی Persona و Empathy Map پروژه

جلسه ۴: تحلیل رقبا و استراتژی محصول (Competitor Analysis)

موضوعات:

• شناسایی رقبای مستقیم و غیرمستقیم

• تکنیک‌های ارزیابی ویژگی‌ها (Feature Matrix)

• تحلیل SWOT رقبا از منظر تجربه کاربری

• تعریف گزاره ارزش منحصربه‌فرد (UVPs)

خروجی:

• سند تحلیل رقبا و مشخص کردن مزیت‌های رقابتی پروژه

جلسه ۵: نقشه سفر کاربر (User Journey Mapping)

موضوعات:

• ترسیم نقشه سفرکاربر(User Journey Map-UJM)

• شناسایی نقاط تماس(Touchpoints) و کانال‌های تعامل

• ثبت و بررسی فرصت‌های بهبود(Opportunities) در طول مسیر کاربر

خروجی:

• نمودار کامل نقشه سفر کاربر برای سناریوی اصلی محصول

جلسه ۶: معماری اطلاعات (Information Architecture)

موضوعات:

• اصول سازماندهی و برچسب‌گذاری اطلاعات( Organization&Labeling)

• تکنیک دسته بندی کارت ها (Card Sorting) به صورت حضوری و دیجیتال

• طراحی ساختار درختی سایت یا اپلیکیشن (Sitemap)

خروجی:

• نقشه درختی صفحات محصول (Sitemap)

جلسه ۷: جریان‌های کاربر (Task Flows & User Flows)

موضوعات:

• تفاوت میان Task Flow، User Flow و Wireflow

• رسم جریان‌های تصمیم‌گیری و مسیر های فرعی(Edge Cases)

• آشنایی با ابزار های ترسیم فلوچارت ( مانند FigJam)

خروجی:

• نمودار جریان کاربر برای حداقل دو فرایند اصلی(مثلا ثبت نام و خرید)

جلسه ۸: وایرفریمینگ کاغذی و اسکچینگ(Paper Prototyping)

موضوعات:

• تکنیک طوفان فکری بصری (Crazy Eights)

• اسکچینگ سریع روی کاغذ برای ایده پردازی بخش های مختلف صفحه

• تست اولیه وایرفریم کاغذی روی کاربر واقعی

خروجی:

• اسکچ های کاغذی از صفحات اصلی پروژه

جلسه ۹: وایرفریمینگ دیجیتال (Low-Fidelity Wireframes)

موضوعات:

• تبدیل طرح های کاغذی به طرح های دیجیتال خاکستری(Lo-Fi)

• تمرکز بر چیدمان،سلسله مراتب بصری و ساختار محتوا بدون درگیری با رنگ و فونت

• بررسی گریدبندی اولیه در ساختار خاکستری

خروجی:

• وایرفریم های دیجیتال صفحات اصلی در Figma

جلسه ۱۰: مبانی طراحی رابط کاربری (UI Principles)

موضوعات:

• قوانین گشتالت در طراحی رابط کاربری(Principles Gestalt).

• تئوری رنگ در فضای دیجیتال (رنگهای اصلی، ثانویه، معنایی و تضاد رنگی استاندارد WCAG).

• تایپوگرافی در وب و موبایل (انتخاب فونت، سایز، فاصله خطوط و مقیاس های تایپوگرافی)

نکته:

• اصول استفاده از عکاسی صنعتی باکیفیت و تاثیر ادیت و اصلاح نور تصاویر محصولات بر زیبایی نهایی UI.

جلسه ۱۱: گرید، چیدمان و سیستم های فاصله گذاری (Grid & Layouts)

موضوعات:

• سیستم گرید ۱۲ ستونه برای وب و ستون بندی برای موبایل.

• سیستم فاصله گذاری ۸ پیکسلی (8pt Grid System).

• قوانین توازن بصری و نقاط تمرکز در صفحه

خروجی:

• ساخت آرت بوردهای استاندارد مجهز به ساختار گرید مناسب.

جلسه ۱۲: ابزارشناسی فیکما (Dive Deep Figma – بخش اول)

موضوعات:

• آشنایی کامل با محیط کاربری Figma

• کار با ابزار  (Pen Tool) Vector و ساخت اشکال ترکیبی

• استفاده از پالگین های کاربردی و نحوه مدیریت فایل ها

خروجی:

• تسلط بر ابزارهای ترسیم و ساخت آیکون های اختصاصی ساده

جلسه ۱۳: ابزارشناسی فیکما (Dive Deep Figma – بخش اول)

موضوعات:

• مفهوم Auto Layout به صورت عمیق (Padding, Spacing, Wrapping)

• مفهوم Constraints و شبیه سازی رفتار ریسپانسیو المان ها

• ایجاد Components و استفاده از Variants و Component Properties

خروجی:

• طراحی کامپوننت های منعطف و داینامیک

جلسه ۱۴: طراحی اتمیک و سیستم طراحی(ِDesign Systems & Atomic Design)

موضوعات:

• آشنایی با متدولوژی طراحی اتمیک (Atoms, Molecules, Organisms)

• ساخت کتابخانه استایلها (Color Styles, Text Styles, Effect Styles)

• مستندسازی کامپوننت ها (مانند دکمه ها، فرمها، کارت ها و هدر)

خروجی:

• ایجاد یک مینی‌دیزاین سیستم (Mini Design System) برای پروژه

جلسه ۱۵: طراحی واسط کاربری صفحات(Hi-Fi Design – بخش اول)

موضوعات:

• طراحی نسخه نهایی صفحات اصلی وب سایت یا اپلیکیشن (Landing page, Home page)

• اعمال رنگ ها، تصاویر صنعتی و تایپوگرافی بر روی وایرفریم ها بر اساس سیستم طراحی ساخته شده

خروجی:

• طرح نهایی گرافیکی صفحات اصلی

جلسه ۱۶:طراحی واسط کاربری صفحات(Hi-Fi Design – بخش دوم)

موضوعات:

• طراحی صفحات داخلی (داشبورد، سبد خرید، صفحات جزییات محصول، فرم های ثبت اطلاعات)

• رعایت استانداردهای طراحی فرم و ورودی ها (Inputs &Validation States ).

خروجی:

• تکمیل تمام صفحات فرعی پروژه.

جلسه ۱۷: طراحی ریسپانسیو و واکنش گرا ( Responsive Design)

موضوعات:

• قوانین شکست (Breakpoints )برای دسکتاپ، تبلت و موبایل

• انتقال طرح از دسکتاپ به موبایل و برعکس(Mobile-First approach)

• طراحی منوهای همبرگری و چیدمان های منعطف ستونی.

خروجی:

• طراحی نسخه موبایل و تبلت برای صفحات کلیدی پروژه دسکتاپی.

جلسه ۱۸: پروتوتایپ و انیمیشنهای تعاملی (Prototyping & Smart Animate)

موضوعات:

• اتصال آرت بوردها به یکدیگر و تعریف Triggerها و Actionها

• استفاده از قابلیت Smart Animate برای ایجاد حرکت های طبیعی و نرم

• طراحی ریز تعاملها (Micro-interactions) مانند وضعیتهای Hover و انیمیشن لودینگ

خروجی:

• پروتوتایپ تعاملی و قابل کلیک پروژه

جلسه ۱۹: تست کاربردپذیری و ارزیابی ( Usability Testing& Iteration)

موضوعات:

• تعریف سناریوهای تست برای کاربران واقعی

• اجرای تست کاربردپذیری با پروتوتایپ و ضبط رفتار کاربر

• شناسایی گلوگاه ها و مشکلات تجربه کاربری (Usability Issues)

• اصلاح طرح بر اساس داده های تست (Iteration)

خروجی:

• گزارش کوتاه تست کاربردپذیری و اعمال تغییرات نهایی در طرح

جلسه ۲۰: آماده سازی برای برنامه نویس و پورتفولیو (Handoff & Portfolio)

موضوعات:

• نحوه مستندسازی و سازماندهی فایل فیکما برای توسعه دهنده (Developer Handoff).

• استخراج دارایی های گرافیکی (Exporting Assets: SVG, PNG, WebP)

• چگونه یک موردپژوهی (Case Study) جذاب برای Behance یا لینکدین بنویسیم

خروجی:

• خروجی استاندارد پروژه برای توسعه دهنده و آماده سازی ساختار سند پورتفولیو