آموزش یادگیری فیگما: اصول طراحی رابط کاربری (UI) و تجربه کاربری (UX) - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه ای بر دوره Introduction to the course

• مقدمه Introduction

• ساختار دوره Structure of the course

• ابزارهای مورد نیاز Required Tools

• کیت های رابط کاربری رایگان Free UI Kits

• کتاب الکترونیکی رایگان خود را دریافت کنید Get Your Free E-book

مبانی طراحی Design Basics

• مقدمه ای بر مبانی طراحی Intro to Design Basics

• چیدمان Layout

• سلسله مراتب بصری Visual hierarchy

• نویز بصری Visual noise

• نشانه شناسی Iconography

• تایپوگرافی Typography

• کنتراست رنگ Color Contrast

• پالت رنگ Color Palette

• فاصله گذاری Spacing

• ترکیب Composition

• راهنمای طراحی Design Guide

• فونت های سازگار Consistent fonts

• رنگ های سازگار Consistent Colors

• آیکون های سازگار Consistent Icons

• عناصر رابط کاربری سازگار Consistent UI Elements

• منابع فونت Font Resources

• منابع رنگ Color Resources

• منابع آیکون Icon Resources

آکادمی فیگما Figma Academy

• مقدمه ای بر فیگما Introduction to Figma

• نیازمندی های فیگما Figma Requirements

• محیط فیگما Figma Environment

• دارایی ها Assets

• اشکال Shapes

• ویرایش اشکال Editing Shapes

• مبانی لایه Layer Basics

• عملیات بولی Boolean Operations

• متن Text

• بازرس متن Text Inspector

• سبک های متن Text Styles

• محدودیت ها و چیدمان های تطبیقی Constraints And Adaptive Layouts

• چیدمان خودکار Auto Layout

• تصاویر Images

• سبک دهی: پر کردن Styling: Fill

• سبک دهی: خط Styling: Stroke

• سبک دهی: افکت ها Styling: Effects

• سبک رنگ Color Style

• ماسک گذاری Masking

• کامپوننت ها Components

• واریانت ها (جدید) Variants (NEW)

• شبکه های چیدمان Layout Grids

• پلاگین ها Plugins

• خروجی گیری Exporting

• نمونه سازی اولیه Prototyping

• چند نفره و نظردهی Multiplayer & Commenting

• میانبرهای صفحه کلید Keyboard Shortcuts

• پروژه های نهایی Final Projects

عناصر رابط کاربری UI Elements

• مقدمه ای بر عناصر رابط کاربری Intro to UI Elements

• فیلدهای متنی Text Fields

• دکمه ها Buttons

• اسلایدرها Sliders

• راهنمای ابزار Tooltip

• کنترل انتخاب Selection Control

• تراشه ها Chips

• کارت ها Cards

• دیالوگ ها Dialogs

• لیست ها Lists

• جداول Tables

• ناوبری Navigation

• منو Menu

• نمودارها Charts

• گام شمارها Steppers

• پیامک Snackbar

وایرفریمینگ Wireframing

• وایرفریمینگ چیست؟ What is Wireframing?

• جریان های کاربری User Flows

• نمونه های اولیه تعاملی Interactive Prototypes

• ابزارهای وایرفریمینگ Wireframe Tools

• وایرفریمینگ در فیگما Wireframing in Figma

• پروژه نهایی Final Project

ایجاد سیستم طراحی شما - بخش ۱ Creating your Design System - Part 1

• سبک رنگ چیست؟ What is a color style?

• رنگ های اصلی، معنایی و تأکیدی Primary, Semantic & Accent Colors

• رنگ های خاکستری و گرادیانت ها Grey Colors & Gradients

• حاشیه ها و سایه ها Borders & Shadows

• فایل راهنمای سبک Style Guide File

ایجاد سیستم طراحی شما - بخش ۲ Creating your Design System - Part 2

• مقدمه ای بر سبک های تایپوگرافی Intro to Typography Styles

• راهنمای تایپوگرافی بخش ۱ Typography guide part 1

• راهنمای تایپوگرافی بخش ۲ Typography guide part 2

• فایل راهنمای سبک Style Guide File

طراحی برنامه - برنامه مالی Application Design - Finance App

• طراحی یک برنامه مالی مدرن Designing a Modern Finance App

• دارایی ها Assets

• صفحه پرتاب Launch Screen

• صفحه ورود و خوش آمد گویی Sign-in & Welcome Page

• صفحه ثبت نام Sign-up Page

• صفحات تأیید OTP OTP Verification Screens

• صفحات پروفایل Profile Screens

• صفحه اصلی Homepage

• منو Menu

• صفحه کارت های اعتباری Credit Cards Page

• صفحه تراکنش ها Transactions Page

• صفحه تراکنش جزئی Detailed Transaction Page

• صفحه انتقال Transfer Page

• صفحه تأیید Confirmation Page

• صفحه اعلان Notification Page

• پروفایل کاربر User's Profile

• صفحات آنبوردینگ Onboarding Pages

• پروژه نهایی Final Project

طراحی وب - طراحی وب سایت شما Web Design - Design Your Website

• مقدمه پروژه Introduction to the Project

• دارایی ها Assets

• صفحه فرود چیست؟ What is a Landing Page?

• راه اندازی پروژه شما Setting up Your Project

• ایجاد سبک های رنگی شما Creating Your Color Styles

• وایرفریمینگ پروژه شما - بخش ۱ Wireframing Your Project - Part 1

• وایرفریمینگ پروژه شما - بخش ۲ Wireframing Your Project - Part 2

• نوار ناوبری Navigation Bar

• بخش Hero - بخش ۱ Hero Section - Part 1

• بخش Hero - بخش ۲ Hero Section - Part 2

• بخش ویژگی - کارت اعتباری Feature Section - Credit Card

• بخش ویژگی - آمار Feature Section - Statistics

• بخش ویژگی - پشتیبانی Feature Section - Support

• طرح های عضویت Membership Plans

• بخش سوالات متداول FAQ Section

• پاورقی Footer

• نمونه سازی اولیه Prototyping

• پروژه نهایی Final Project

طراحی لوگو Logo Design

• انواع لوگو Logo Types

• فایل های مورد نیاز Required files

• طراحی اولین لوگوی ما Designing Our First Logo

• طراحی دومین لوگوی ما Designing Our Second Logo

• طراحی سومین لوگوی ما Designing Our Third Logo

• پروژه نهایی Final Project

فتوشاپ ادوبی Adobe Photoshop

• مقدمه ای بر فتوشاپ ادوبی Introduction to Adobe Photoshop

• محیط فتوشاپ ادوبی Environment of Adobe Photoshop

• مبانی فتوشاپ ادوبی Basics of Adobe Photoshop

• فتوشاپ ادوبی برای طراحی UI/UX Adobe Photoshop For UI/UX Design

مدل سازی سه بعدی برای طراحی رابط کاربری 3D Modeling For UI Design

• مقدمه ای بر مدل سازی سه بعدی Intro to 3D modeling

• ایجاد اولین مدل سه بعدی خود Create Your First 3D Model

• دوربین و نورپردازی Camera & Lightings

• متریال و بافت ها Materials & Textures

• ایجاد یک صحنه سه بعدی Create a 3D scene

• رندرینگ و خروجی گیری Rendering & Exporting

نمونه سازی اولیه Prototyping

• ابزارها Tools

• نمونه سازی اولیه در فیگما Prototyping in Figma

• نمونه سازی یک برنامه در فیگما Mocking up an app in Figma

• پروژه نهایی Final Project

پورتفولیو Portfolio

• چگونه پورتفولیوی آنلاین خود را ایجاد کنیم؟ How to Create Your Own Online Portfolio?

• چگونه از دریببل استفاده کنیم؟ How to Use Dribbble?

• چگونه از بیهنس استفاده کنیم؟ How to Use Behance?

ایده های کسب و کار Business Ideas

• چگونه اولین مشتری خود را پیدا کنیم؟ How to Get Your First Client?

• چگونه کسب و کار خود را راه اندازی کنیم؟ How to Start Your Own Business?

• چگونه کسب و کار خود را مقیاس بندی کنیم؟ How to Scale Your Business?

• ارتباط با مشتریان خود Communicating With Your Clients

• قراردادها Contracts

الهام و منابع Inspiration & Resources

• کجا الهام طراحی در سطح جهانی پیدا کنیم؟ Where to Find World-Class Design Inspiration?

• منابع تصویر Image Resources

قدم بعدی چیست؟ What to do Next?

• قدم بعدی شما چیست؟ What is your next step?

درس پاداش Bonus Lecture

• درس پاداش Bonus Lecture