آموزش مسترینگ طراحی وب با فیگما در سال ۲۰۲۶ - تبدیل به متخصص Web Design PRO - آخرین آپدیت

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

مقدمه دوره Introduction to course

• سلام طراحان Hola Designers

• چگونه بیشترین بهره را از این دوره ببریم؟ How to get best from this course?

• من کی هستم؟ Who am I?

مبانی فیگما Figma Basics

• فیگما چیست و چگونه حساب رایگان بسازیم؟ What is Figma & How to Create a Free Account

• مرور داشبورد فیگما + ایجاد اولین فایل طراحی Figma Dashboard Overview + Create Your First Design File

• توضیح کامل نوار ابزار فیگما Figma Toolbar Explained

• لایه ها، گروه‌ها، فریم‌ها و کامپوننت‌ها Layers, Groups, Frames, and Components

• اتولایوت، کانستریت‌ها و ترازبندی Auto Layout, Constraints & Alignment

• پروژه کوچک: طراحی کارت پروفایل شخصی Mini Project: Design a Personal Profile Card

اصول UI/UX در عمل UI/UX Principles in Action

• مقدمه بخش سوم Introduction to Section 3

• اصول بنیادی طراحی بصری (UI) - بخش اول Foundational Visual Design Principles (UI) - Part 1

• اصول بنیادی طراحی بصری (UI) - بخش دوم Foundational Visual Design Principles (UI) - Part 2

• قوانین کلیدی UX که بر چیدمان تاثیر می‌گذارند Core UX Laws That Impact Layout

• بیایید آن طراحی خراب را اصلاح کنیم! Let’s Fix That Broken Design!

• پروژه کوچک: اصلاح بخش Hero Mini Project: Fix the Hero Section

ساختاربندی حرفه‌ای وب‌سایت‌ها Structuring Websites Like a Pro

• ساختار بصری وب‌سایت‌ها چگونه است؟ How Websites Are Structured Visually

• درک لایوت‌ها، گریدها و ستون‌ها Understanding Layouts, Grids, and Columns

• وایرفریمینگ به سبک طراحان (Low Fidelity) Wireframing Like a Designer (Low Fidelity)

• طراحی لندینگ پیج (فقط وایرفریم) Design a Landing Page (Wireframe Only)

• پروژه کوچک: طراحی وایرفریم برای لندینگ پیج Mini Project: Design the Wireframe for Landing Page

شروع طراحی Let's Design

• مقدمه بخش طراحی Introduction to Let's Design Section

• تبدیل وایرفریم به لندینگ پیج ۰۱ Wireframe to Landing Page 01

• تبدیل وایرفریم به لندینگ پیج ۰۲ Wireframe to Landing Page 02

• تبدیل وایرفریم به لندینگ پیج ۰۳ Wireframe to Landing Page 03

• آشنایی با وب‌سایت‌های چند صفحه‌ای Intro to Multi-Page Website

• وب‌سایت چند صفحه‌ای: لندینگ پیج ۰۱ Multi-Page Website: Landing Page 01

• وب‌سایت چند صفحه‌ای: لندینگ پیج ۰۲ Multi-Page Website: Landing Page 02

• وب‌سایت چند صفحه‌ای: لندینگ پیج ۰۳ Multi-Page Website: Landing Page 03

• وب‌سایت چند صفحه‌ای: ترکیب + صفحه حریم خصوصی Multi-Page Website: Combine + Privacy Page

• وب‌سایت چند صفحه‌ای: صفحه ثبت‌نام Multi-Page Website: Sign Up Page

• وب‌سایت چند صفحه‌ای: صفحه قیمت‌گذاری Multi-Page Website: Pricing Page

• مقدمه‌ای بر طراحی داشبورد Intro to Dashboard Design

• طراحی داشبورد Design the Dashboard

• پروژه کوچک: طراحی یک لندینگ پیج Mini Project: Design a Landing Page

طراحی وب ریسپانسیو Responsive Web Design

• ریسپانسیو یا واکنش‌گرایی چیست؟ What is Responsiveness?

• ریسپانسیو در سطح اتمیک و مولکولی Atomic & Molecular Responsiveness

• حالت طراحی: ریسپانسیو Design Mode: Responsiveness

• مثال‌های دنیای واقعی: ریسپانسیو Real World: Responsiveness

• کامپوننت‌ها: ریسپانسیو Components: Responsiveness

• پروژه کوچک: تبدیل این وب‌سایت به ریسپانسیو واقعی Mini Project: Make this Website Real Responsive

انیمیشن در طراحی وب Animation in Web Design

• مقدمه‌ای بر پروتوتایپینگ (انیمیشن) Introduction to Prototyping (Animation)

• کامپوننت‌ها و پروتوتایپینگ Components & Prototyping

• انیمیشن: هاور کارت (Card Hover) Animate: Card Hover

• انیمیشن: متحرک‌سازی دکمه Animate: Button Animation

• انیمیشن: لودینگ اسپینر Animate: Loading Spinner

• انیمیشن: متحرک‌سازی بخش Hero Animate: Hero Section Animation

طراحی وب‌سایت سه‌بعدی 3D Website Design

• مقدمه‌ای بر طراحی وب سه‌بعدی Intro to 3D Web Designing

• Spline: طراحی یک وب‌سایت سه‌بعدی Spline: Let's Design a 3D Website

طراحی وب با هوش مصنوعی Web Designing using AI

• مقدمه‌ای بر طراحی وب با هوش مصنوعی Introduction to Web Designing with AI

• چگونه با AI ایده‌های طراحی وب تولید کنیم؟ How to generate web design ideas using AI?

• تولید تصاویر برای طراحی وب با AI Generate images for web design using AI

• Stitch: ابزار طراحی گوگل Stitch - A design tool by Google

• طراحی یک بخش Hero با استفاده از AI Let's design a hero section using AI

• پروژه کوچک: طراحی لندینگ پیج با AI Mini Project: Design a Landing Page using AI

مبانی فریلنسینگ طراحی Design Freelance 1O1

• فریلنسینگ چیست و چگونه هدف‌گذاری کنیم؟ What is freelancing and how to target it?

• چگونه مشتری جذب کنیم و پروژه را شروع کنیم؟ How to get clients and initiate projects?

• چگونه به عنوان یک فریلنسر رشد کنیم؟ How to grow as a freelancer?

طراحی وب‌سایت پورتفولیو Portfolio Website Design

• بیایید ببینیم قرار است چه چیزی طراحی کنیم! Let's see what we are going to design!

• وب‌سایت پورتفولیو: بخش Hero Portfolio Website: Hero Section

• وب‌سایت پورتفولیو: بخش درباره من Portfolio Website: About Me Section

• وب‌سایت پورتفولیو: بخش آثار (Work) Portfolio Website: Work Section

• وب‌سایت پورتفولیو: بخش تجربیات Portfolio Website: Experience Section

• وب‌سایت پورتفولیو: بخش CTA Portfolio Website: CTA Section

• وب‌سایت پورتفولیو: فوتر و نهایی‌سازی Portfolio Website: Footer and Final

• انیمیشن: افکت هاور دکمه Animation: Button Hover Effect

• انیمیشن: بخش Hero Animation: Hero Section

• انیمیشن: کارت‌های بازشونده و پایان Animation: Expandable Cards and End

هوش مصنوعی Figma Make Figma Make AI

• مقدمه Figma Make AI و درک رابط کاربری Figma Make AI Intro + Understanding Interface

• نوشتن پرامپت عالی و ویرایش وب‌سایت Write perfect prompt & edit website

• تولید وب‌سایت از روی عکس و یادگیری انیمیشن Generate website from picture and learn animation

• پروژه کوچک: ایجاد یک بخش اسکرولی Mini Project: Create a scrollable section

Figma Site: ساخت و لانچ وب‌سایت Figma Site: Create and Launch Websites

• مقدمه Figma Site Figma Site Introduction

• درک رابط کاربری Understanding the Interface

• مفهوم وب‌سایت ریسپانسیو در Site Responsive Website Concept in Site

• طراحی سایت: وب‌سایت onPay ۰۱ Site Design: onPay Website 01

• طراحی سایت: وب‌سایت onPay ۰۲ Site Design: onPay Website 02

• طراحی سایت: وب‌سایت onPay ۰۳ Site Design: onPay Website 03

• طراحی سایت: وب‌سایت onPay ۰۴ Site Design: onPay Website 04

• مدیریت محتوا (CMS): وب‌سایت وبلاگی ۰۱ Site CMS: Blog Website 01

• مدیریت محتوا (CMS): وب‌سایت وبلاگی ۰۲ (انتشار و SEO) Site CMS: Blog Website 02 (Publish & SEO)

• پروژه کوچک: ساخت یک وب‌سایت وبلاگی کامل Mini Project: Create a complete blog website