طراحی UI/UX با فیگما

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

سواد دیجیتال

سواد عصر جدید

آکادمی معلم؛ ماینکرفت آموزشی

تغییر در روش‌های سنتی آموزش 

آکادمی معلم؛ برنامه نویسی اسکرچ

همگام با تحول سیستم آموزشی در دنیا

مدیریت دانش

بروزترین نیازمندی کارکنان سازمان های دانشی

برنامه نویسی با اسکرچ

تبدیل بازی و سرگرمی کودکان به علم

توانمندسازی دیجیتال اینستاگرامر

تو هم میتونی از اینستاگرام درآمد کسب کنی

توانمندسازی ولاگر آموزشی

با تولید محتوای استاندارد از تولید محتوا کسب درآمد کن

توانمندسازی فروشگاه اینترنتی

کسب و کار خودت رو بدون محدودیت و مرز کن

سواد دیجیتال سازمانی

موقعیت شغلی خودت رو مستحکم کن

برنامه نویسی بلاکچین

فرصتهای بی نظیر شغلی

درباره ما

دانشمند کیست و چه هدفی دارد؟

همکاری با ما

فرصت‌های همکاری با ما در دانشمند

طراحی رابط کاربری (UI) و تجربه کاربری (UX)

طراحی تجربه کاربری (UX) و رابط کاربری (UI) با فیگما

UI مخفف عبارت User Interface و به معنی رابط کاربری و UX مخفف عبارت User Experience و به معنی تجربه کاربری است. این دو مفهوم در روند طراحی اصولی یک محصول کارامد مورد استفاده قرار میگیرند و با هم تعامل زیادی دارند اما در عمل تجربه کاربری را میشود یک مفهوم عام تر و بزرگ تر در نظر گرفت که رابط کاربری هم جزئی از این مفهوم هست. در روند طراحی یک محصول، UX بیشتر جنبه تحلیلی، آماری و فنی دارد. در حالیکه UI بیشتر به جنبه های گرافیکی و ساختار ظاهری محصول می پردازد.

ثبت نام کنید
Figma

طراحی تجربه کاربری (UX) و رابط کاربری (UI) با فیگما

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

اصول و مبانی طراحی

در این بخش در مورد اصول کلی و مبانی طراحی صحبت می کنیم و با نیازمندی های اصلی که هر طراح رابط کاربری می بایست قبل از شروع به طراحی با آن آشنا باشد آشنا میشویم.

    • آشنایی با اصول و مبانی طراحی
    • چیدمان و طرح بندی (Layout)
    • سلسله مراتب بصری (Visual Hierarchy)
    • انواع رنگ ها ، پالت رنگی و تضاد رنگ ها (Color Palette & Contrast)
    • تایپوگرافی (Typography)
    • فاصله گذاری (Spacing)
    • نویز بصری (Visual Noise)
    • ترکیب بندی (Composition)
    • راهنمای طراحی (Design Guide)
    • الگوهای طراحی (Design Patterns)
    • ثبات در طراحی (Design Consistency)
    • آیکونوگرافی (Iconography)
    • سبک های طراحی (Design Trends)
    • گردش کار در طراحی (Design Workflow)
    • طراحی واکنش گرا و اصول آن (Responsive Design)

کاربرد تجربه کاربری در طراحی رابط کاربری

  • در این بخش با تجربه کاربری آشنا می شویم و کاربرد آن را در طراحی رابط کاربری درک می کنیم و با قوانین و اصول آن برای طراحی اصولی تر رابط کاربری آشنا خواهیم شد.
    • آشنایی با کاربرد تجربه کاربری در طراحی رابط کاربری
    • تفاوت طراحی رابط کاربری (UI) و طراحی تجربه کاربری (UX)
    • اشتباهات رایج در طراحی و Best Practice ها
    • تجربه کاربری در وب و موبایل
    • قوانین روانشناسی در تجربه کاربری (UX Psychology Principles)
    • قوانین تجربه کاربری – گشتالت (UX Principles Gestalt)
    • تفکر طراحی (Design Thinking)
    • الگوهای اسکن محتوا در صفحه (Scanning Patterns)
آموزش نرم افزار Figma
در این بخش با نرم افزار Figma و امکانات آن آشنا می شویم و نحوه طراحی رابط کاربری را در آن فرا خواهیم گرفت.

    • معرفی و آشنایی با Figma
    • آشنایی با محیط Figma
    • صفحات ، آرتبوردها و لایه ها
    • آشنایی با نوار ابزار (Toolbar)
    • اشکال و تغییرات روی آنها (Shapes)
    • ترکیب اشکال (Boolean Operations)
    • متون و استایل ها آنها (Text & Text Styles)
    • استایل ها (Styling)
    • ماسک کردن (Mask)
    • کامپوننت ها (Components)
    • طراحی بر اساس Layout
    • پلاگین ها و معرفی آنها (Plugins)
    • خروجی گرفتن (Exporting)
    • چیدمان خودکار  (Auto Layout)
    • طراحی همزمان و ارسال نظر (Multiplayer & Commenting)
    • آشنایی با Library و استفاده تیمی از کامپوننت ها
    • کلیدهای میانبر
عناصر در طراحی رابط کاربری
در این بخش با عناصری که در طراحی رابط کاربری استفاده می شود و انواع آنها آشنا خواهیم شد تا درک درستی از اینکه هر کدام کجا و در چه شرایطی استفاده خواهد شد پیدا کنیم.

  • آشنایی با عناصر رابط کاربری
  • دکمه ها (Buttons)
  • فیلدهای متنی (Text Fields)
  • لیست های بازشو (Dropdown Lists)
  • لیست ها (Lists)
  • کنترل های اسلایدری (Slider Controls)
  • جعبه های راهنما (Tooltip)
  • کنترل های انتخابی (Selection Controls)
  • لیبل ها (Labels)
  • چیپ ها (Chips)
  • کارت ها (Cards)
  • جعبه های دیالوگ (Dialogs)
  • تقسیم کننده ها (Dividers)
  • تب ها (Tabs)
  • منو ها (Menus)
  • نمودارها (Charts)
  • استپرها (Steppers)
  • نوبار پایین (Bottom Navigation)
  • جدول ها (Tables)
طراحی وایرفریم (Wireframing)
در این بخش با طراحی وایرفریم ، انواع آن ، ابزارها و نیازمندی هایی که برای طراحی آن نیاز داریم آشنا خواهیم شد.

    • معرفی و آشنایی Wireframe
    • آشنایی با وایرفریم ، انواع آن و ابزارهای مورد نیاز
    • گردش کاربر (Userflow)
    • پروژه طراحی Userflow
    • طراحی وایرفریم در Adobe XD ، Figma و Sketch
    • پروژه طراحی Wireframe

نحوه ایده پردازی ، شروع طراحی و ارائه طرح

در این بخش به نحوه ایده پردازی برای شروع طراحی و همچین ارائه پروژه طراحی شده می پردازیم.

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

  • طراحی اپلیکیشن فروشگاه آنلاین در Figma – بخش اول
  • طراحی اپلیکیشن فروشگاه آنلاین در Figma – بخش دوم
  • طراحی پنل مدیریت در Figma – بخش اول
  • طراحی پنل مدیریت در Figma – بخش دوم

پروتوتایپ و پیش نمایش محصول (Prototyping & Interactivity)

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

  • آشنایی با پروتوتایپ و انواع آن – قسمت اول
  • آشنایی با پروتوتایپ و انواع آن – قسمت دوم
  • آشنایی با پروتوتایپ و انواع آن – قسمت سوم
  • پروتوتایپ در Figma – قسمت اول
  • پروتوتایپ در Figma – قسمت دوم
  • پروتوتایپ در Figma – قسمت سوم
بوت کمپ عملی طراحی رابط کاربری

در این بخش شما به صورت عملی ۳۰ پروژه را در مدت ۹۰ روز طراحی می کنید و پس از طراحی هر پروژه ، نظر مدرس را برای رفع اشکال و پیشرفت در طراحی دریافت می کنید.