آموزش طراحی UI/UX با فیگما: طراحی وب و اپلیکیشن همراه با پروژه‌ها - آخرین آپدیت

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

مقدمه Introduction

• پیش‌نمایش دوره Course Preview

• معرفی Introduction

• مرور کلی کامل دوره - جدید Complete Course Overview New

Figma Introduction & Explore Interface Figma Introduction & Explore Interface

• Figma مقدمه Figma Introduction

• فریم بسازید و نام آن را تغییر دهید Create Frame & Rename It

• توضیحات قاب و مثال Frame Explanations And Examples

• ابزار Rectangle with Color Fill Rectangle Tool with Colour Fill

• ابزار بیضی/دایره و ابزار چند ضلعی Ellipse/Circle Tool And Polygon Tool

• ابزار خط و پیکان توضیح داده شد Line And Arrow Tool Explained

• متن و تایپوگرافی توضیح داده شده است Text & Typography Explained

• سایر ابزارهای باقیمانده Other Remaining Tools

معرفی رابط کاربری فیگما و گرید با نقاط شکست Figma Interface Intro & Grid with Breakpoints

• دانلود فیگما Download Figma

• معرفی رابط کاربری فیگما و توضیح فریم Figma Interface Introduction and Frame Explained

• گرید و انواع گرید همراه با مثال GRID and Type of Grid with Example

• نقاط شکست دستگاه برای صفحه نمایش موبایل، تبلت و دسکتاپ Device Breakpoints for Mobile Tablet and Desktop Screens

• به جامعه خوش آمدید Welcome To The Community

پروژه 1: طراحی وب سایت Ed-Tech: Navbar PROJECT 1 : Design Ed-Tech Website : Navbar

• خلاصه محصول و طراحی نوار ناوبری Product Brief & Navbar Design

• یاد بگیرید برای نصب پلاگین و Navbar کامل Learn To Install Plugin & Complete Navbar

تئوری رنگ: هماهنگی رنگ، مدل‌های رنگی، پالت رنگ COLOR THEORY : Color Harmony, Color Models, Color Palette

• تئوری رنگ و هماهنگی رنگی توضیح داده شده با مثال Color Theory And Color Harmony Explained with Example

• رنگ‌های یکدست، گرادیان‌ها و دستکاری تصویر Solid Colors, Gradients and Image Manipulation

• چگونه یک پالت رنگ شگفت‌انگیز با افزونه تولید کنیم How To Generate Amazing Color Palette with Plugin

• چگونه افزونه را ذخیره کرده و از ابزار قطره‌چکان استفاده کنیم How to Save Plugin and Use EyeDropper Tool

• مرور و منابع Review & Resource

پروژه 1: طراحی وب سایت Ed-Tech: بخش قهرمان PROJECT 1 : Design Ed-Tech Website : Hero Section

• بخش قهرمان ایجاد کنید و نحوه ایجاد سبک جهانی را بیاموزید Create Hero Section & Learn How To Create Global Style

• ایجاد دکمه با AutoLayout Create Button With AutoLayout

• عنوان قیمت گذاری دوره را ایجاد کنید Create Course Pricing Title

استروک، افکت‌ها و اکسپورت در فیگما Stroke, Effects & Export in Figma

• استروک توضیح داده شد Stroke Explained

• افکت‌ها – سایه افتاده و سایه داخلی توضیح داده شد Effects - Drop Shadow and Inner Shadow Explained

• افکت‌ها – محو کردن لایه و محو کردن پس‌زمینه توضیح داده شده با مثال Effects - Layer Blur and Background Blur Explained with Example

• اکسپورت توضیح داده شده با مثال Export Explained with Example

پروژه 1: طراحی وب سایت Ed-Tech: بخش جزئیات کلاس PROJECT 1 : Design Ed-Tech Website : Class Details Section

• ایجاد عنوان Create Heading

• کارت جزئیات کلاس را با گرادیان OverLay ایجاد کنید Create Class Detail Card With OverLay Gradient

• کارت تکراری و تغییر تصاویر و متن Duplicate Card & Change Images And Text

• ایجاد دکمه فیلتر با کامپوننت اصلی و طرح خودکار Create Filter Button With Master Component & AutoLayout

• ایجاد دکمه کشویی و ابزار مقیاس یادگیری Create Sliding Button & Learn Scale Tool

ابزارهای شکل (مستطیل، خط، فلش، بیضی، دایره، چندضلعی و ابزارهای ستاره) Shape Tools (Rectangle, Line, Arrow, Ellipse, Circle, Polygon & Star Tools)

• اشکال – مستطیل توضیح داده شد Shapes - Rectangle Explained

• ابزارهای خط و فلش توضیح داده شده با مثال Line and Arrow Tools Explained with Example

• بیضی و دایره (سوئیپ، نسبت) توضیح داده شد Ellipse and Circle (Sweep,Ratio) Explained

• چندضلعی و ابزار ستاره Polygon and Star Tool

• قرار دادن مستقیم تصویر داخل شیء Directly place the image inside the object

پروژه 1: طراحی وب سایت Ed-Tech: بخش جزئیات مربی PROJECT 1 : Design Ed-Tech Website : Mentor Details Section

• بخش جزئیات مربی طراحی Design Mentor Details Section

• طراحی بخش چرا به عضویت Design Why To Join Section

• کپی و تغییر متن Copy & Change Text

ابزار تراز، عملیات بولی و اشکال برداری با ابزار قلم Alignment Tool, Boolean Operation and Vector Shapes with Pen Tool

• ابزارهای تراز توضیح داده شد Alignment Tools Explained

• ایجاد اشکال برداری با ابزار قلم و ابزار مداد Create Vector Shapes with Pen Tool & Pencil Tool

• عملیات بولی با اشکال Boolean Operation with Shapes

پروژه 1: طراحی وب سایت Ed-Tech: بخش پاورقی PROJECT 1 : Design Ed-Tech Website : Footer Section

• طراحی پاورقی Footer Design

اصول تایپوگرافی: قانون تایپوگرافی و ابزار متن TYPOGRAPHY PRINCIPLES: Typography Rule and Text Tool

• نظریه متن و تایپوگرافی – فونت‌های سریف و سن سریف Text and Typography Theory - Serif and Sans Serif Typefaces

• ابزار متن و تایپوگرافی در فیگما Text and Typography Tool in Figma

پروژه 1: طرح و نمونه اولیه خود را به اشتراک بگذارید PROJECT 1 : Share Your Design & Prototype

• فایل های طراحی را به اشتراک بگذارید Share Design Files

• ایجاد نمونه اولیه با پیوند قابل اشتراک گذاری Create Prototype With Sharable Link

سه ستون فیگما: AutoLayout، کامپوننت‌ها و واریانت‌ها Three Pillars Of Figma: AutoLayout, Components and Variants

• مقدمه Introduction

• مبانی AutoLayout با پدینگ و تراز توضیح داده شده (مثال ۱) AutoLayout Basics with Padding and Alignment Explained (Example 1)

• فضای بین AutoLayout، استروک‌ها، چیدمان بوم توضیح داده شده (مثال ۲) AutoLayout Space Beween, Strokes, Canvas Stacking Explained (Example 2)

• تراز خط پایه متن AutoLayout (مثال ۳) AutoLayout Text BaseLine Alignment (Example 3)

• موقعیت‌یابی مطلق AutoLayout (مثال ۴) AutoLayout Absolute Positioning (Example 4)

• ویژگی‌های Fill، Hug، Fixed در AutoLayout توضیح داده شد (مثال ۵) AutoLayout Fill, Hug, Fixed Properties Explained (Example 5)

• کامپوننت با جزئیات و مثال Component In Detail with Example

• واریانت‌ها توضیح داده شده با مثال Variants Explained with Example

• ویژگی‌های کامپوننت (واریانت، بولی، جابجایی نمونه و ویژگی متن) Component Properties (Variant, Boolean, Instance Swap and Text Property)

پروژه 2 : وب سایت آژانس مسافرتی : صفحه اصلی PROJECT 2 : Travel Agency Website : HomePage

• طراحی وب سایت وب سایت Travel Website Hompage Design

پروژه ۱: طراحی وب‌سایت استارتاپ EdTech PROJECT 1 : EdTech Startup Website Design

• مقدمه پروژه ۱ Project 1 Introduction

• طراحی نوبار EdTech EdTech Navbar Design

• طراحی صفحه اصلی EdTech و کاوش جامعه EdTech HomePage Design & Explore Community

• طراحی صفحه جزئیات دوره EdTech ETech Course Detail Page Design

• صفحه جزئیات مربی EdTech EdTech Mentor Details Page

• چرا به EdTech بپیوندیم EdTech Why To Join

• طراحی فوتر EdTech EdTech Footer Design

• ایجاد پروتوتایپ و لینک قابل اشتراک Create Prototype And Sharable Link

پروژه 2 : وب سایت آژانس مسافرتی : فعالیت های مسافرتی PROJECT 2 : Travel Agency Website : Travel Activities

• صفحه جزئیات فعالیت های سفر Travel Activities Details Page

• جزئیات فعالیت سفر کامل شد Travel Activity Details Complete

پروژه ۲: طراحی وب‌سایت آژانس مسافرتی PROJECT 2 : Travel Agency Website Design

• مقدمه پروژه ۲ Project 2 Introduction

• طراحی صفحه اصلی آژانس مسافرتی با نوار جستجو Travel Agency HomePage Design with Searchbar

• طراحی صفحه فعالیت‌های وب‌سایت مسافرتی Travel Website Activities Page Design

• چگونه طرح رنگی برای پروژه انتخاب کنیم How To Choose Color Scheme For The Project

• پر کردن نهایی رنگ در صفحه فعالیت‌های سفر Travel Activities Page Final Color Fill

• صفحه نقل قول Quote Page

• طراحی صفحه توصیفات مشتری Client Testimonial Page Design

• گالری تصاویر با AutoLayout تودرتو Image Gallery with nested AutoLayout

• طراحی فوتر آژانس مسافرتی Travel Agency Footer Design

• اتصال تمام صفحات و پروتوتایپ Connect All The Pages & Prototype

پروژه های آینده بیشتر More Upcoming Projects

• پروژه های آینده Upcoming Projects

پروژه ۳: طراحی پورتفولیو طراح UI/UX PROJECT 3 : UI/UX Designer Portfolio Design

• مقدمه پروژه ۳ Project 3 Introduction

• طراحی صفحه درباره ما About Page Design

• طراحی صفحه نمایش کار Work Showcase Page Design

• طراحی صفحه وبلاگ Blog Page Design

• طراحی صفحه تماس Contact Page Design

• اتصال تمام صفحات و آپلود پورتفولیو به BEHANCE Join The All Pages and Upload the Portfolio To BEHANCE

پروژه ۴: طراحی پلتفرم CryptoMoney PROJECT 4 : CryptoMoney Platform Design

• مقدمه پروژه ۴ Project 4 Introduction

• طراحی نوبار CryptoMoney Design CryptoMoney Navbar

• طراحی صفحه اصلی CryptoMoney Design CryptoMoney Homepage

• طراحی کارت رمز ارز سفارشی Design Custom Crypto Card

• طراحی چرا از CryptoMoney استفاده کنیم Design Why To Use CryptoMoney

• تنظیم تصویرسازی Arrange Illustration

• طراحی جریان کاربری سه مرحله‌ای Design Three Step Userflow

• طراحی صفحه مقاله خبری CryptoMoney Design CryptoMoney News Article Page

• طراحی فوتر خلاقانه Design Creative Footer

فیگما پیشرفته: پروتوتایپ و تمام انیمیشن‌ها توضیح داده شد ADVANCE FIGMA : Prototype and All Animation Explained

• مبانی پروتوتایپ Prototype Basics

• تریگرهای On Drag و While Hover توضیح داده شد TRIGGER On Drag and While Hover Trigger Explained

• تریگرهای Mouse Enter & Leave و Touch Up & Down توضیح داده شد TRIGGER Mouse Enter & Leave and Touch Up & Down Trigger Explained

• تریگر After Delay توضیح داده شد TRIGGER after delay trigger Explained

• تفاوت تریگرهای OnTap و OnClick TRIGGER OnTap vs OnClick Difference

• مبانی اکشن با Navigate To توضیح داده شد ACTION Basics with Navigate To Explained

• اکشن Change To توضیح داده شد ACTION Change To Explained

• اکشن‌های Open Overlay و Swap Overlay توضیح داده شد ACTION Open Overlay and Swap Overlay Explained

• اکشن‌های Open و Swap Overlay و Scroll To و Open Link توضیح داده شد ACTION Open and Swap Overlay and Scroll To and Open Link Action Explained

• اکشن‌های Back و Close overlay توضیح داده شد ACTION Back and Close overlay Explained

فیگما پیشرفته: ترنزیشن و منحنی Easing ADVANCE FIGMA : Transition and Easing Curve

• ترنزیشن Instant توضیح داده شد TRANSITION Instant Explained

• ترنزیشن Dissolve توضیح داده شد TRANSITION Dissolve Explained

• ترنزیشن Smart Animate توضیح داده شد TRANSITION Smart Animate Explained

• ترنزیشن‌های Move In و Move Out و Push توضیح داده شد TRANSITION Move In and Move Out and Push Explained

• ترنزیشن‌های Slide In و Out توضیح داده شد TRANSITION Slide In and Out Explained

• تیک Smart Animate Smart Animate Tick

• مبانی منحنی بِزیِه و Linear Ease توضیح داده شد Bezier Curve Basics and Linear Ease Explained

• Ease In و Out توضیح داده شد Ease In and Out Explained

• Ease In و Out Back توضیح داده شد Ease In and Out Back Explained

• تمام منحنی‌ها با ایجاد کامپوننت توضیح داده شد All Curves Explained by Creating Component

پروژه ۵: طراحی اپلیکیشن وب ProYoga Buddy با انیمیشن و میکرو-اینتراکشن‌ها PROJECT 5 : ProYoga Buddy Web App Design With Animation and Micro-Interactions

• خلاصه محصول پروژه ۵ Project 5 Product Brief

• بخش Hero صفحه اصلی با انیمیشن اسلاید تصویر HomePage HeroSection with Slide Image Animation

• چرا به کلاس‌های یوگا در صفحه اصلی بپیوندیم HomePage Why To Join Yoga Classes

• دکمه صفحه اصلی برای ناوبری به صفحه دوره HomePage Button To Navigate To The Course Page

• جزئیات طرح عضویت صفحه اصلی با انیمیشن HomePage Membership Plan Details with Animation

• فوتر صفحه اصلی با ورودی ایمیل پویا HomePage Footer With Dynamic Email Input

• عنوان جزئیات دوره CourseDetails Heading

• کارت‌های جزئیات دوره با افکت هاور CourseDetails Cards with Hover Effect

• عنوان صفحه درباره ما و ماموریت کلاس‌های یوگا About Page Heading and Mission of Yoga Classes

• اتصال تمام صفحات و لمس نهایی اپلیکیشن وب ProYoga Buddy Connect All Pages and Final Touch to ProYoga Buddy Web App

تفکر طراحی: اصول و قوانین آن DESIGN THINKING: Its Principles and Rules

• چهار اصل تفکر طراحی Four Principles of Design Thinking

• پنج فاز تفکر طراحی Five Phases of Design Thinking

فرآیند طراحی UX، طوفان فکری FIGJAM و پرسونای کاربر UX Design Process, FIGJAM Brainstorming and User Persona

• فرآیند طراحی UX با مثال UX Design Process with Example

• چگونه از FIGJAM برای طوفان فکری استفاده کنیم How To Use FIGJAM for Brainstorming

• پرسونای کاربر با مثال User Persona with Example

پروژه ۶: پلتفرم رزرو هتل (وایر فریم + کامپوننت‌های تعاملی) PROJECT 6 : Hotel Booking Platform (Wireframe+Interactive Components)

• خلاصه محصول پلتفرم رزرو هتل Product Brief of Hotel Booking Platform

• وایر فریم چیست و چرا آن را ایجاد کنیم؟ What is Wireframe and Why to create it ?

• وایر فریم Low-Fi برای صفحه اصلی و صفحه نتایج جستجو Low Fi Wireframe for Homepage and Search Result Page

• وایر فریم Low-Fi برای صفحه رزرو و صفحه ورود-ثبت نام Low Fi Wireframe for Booking Page and Login-SignUp Page

• پلتفرم رزرو هتل – طراحی نوبار Hotel Booking Platform - Navbar Design

• پلتفرم رزرو هتل – منوی کشویی مکان پویا Hotel Booking Platform - Dynamic Location Dropdown Menu

• پلتفرم رزرو هتل – انتخاب‌گر تاریخ تعاملی Hotel Booking Platform - Interactive Date Picker

• پلتفرم رزرو هتل – دکمه جستجو Hotel Booking Platform - Search Button

• پلتفرم رزرو هتل – صفحه عضویت با تصویرسازی متحرک Hotel Booking Platform -Membership Page with Animated Illustration

• پلتفرم رزرو هتل – صفحه جزئیات مکان-هتل با اسکرول افقی Hotel Booking Platform - Hotel-Location-Details Page with Horizontal Scrolling

• پلتفرم رزرو هتل – صفحه سوالات متداول با آکاردئون واکنش‌گرا و فوتر Hotel Booking Platform - FAQ Page with Responsive Accordion and Footer

• پلتفرم رزرو هتل – صفحه نتایج جستجوی هتل با قابلیت فیلتر – ۱ Hotel Booking Platform - Hotel Search Result Page with Filter Functionality - 1

• پلتفرم رزرو هتل – صفحه نتایج جستجوی هتل با قابلیت فیلتر – ۲ Hotel Booking Platform - Hotel Search Result Page with Filter Functionality - 2

• پلتفرم رزرو هتل – صفحه نتایج جستجوی هتل با قابلیت فیلتر – ۳ Hotel Booking Platform - Hotel Search Result Page with Filter Functionality - 3

• پلتفرم رزرو هتل – صفحه رزرو هتل Hotel Booking Platform - Hotel Booking Page

• پلتفرم رزرو هتل – کارت امکانات هتل Hotel Booking Platform - Hotel Facility Card

• پلتفرم رزرو هتل – کارت رزرو هتل با دکمه تعاملی Hotel Booking Platform - Hotel Booking Card with Interactive Button

• پلتفرم رزرو هتل – صفحه نقد و امتیاز Hotel Booking Platform - Review and Rating Page

• پلتفرم رزرو هتل – لیست املاک مشابه Hotel Booking Platform - List of Similar Properties

• پلتفرم رزرو هتل – کامپوننت ورود و ثبت نام تعاملی Hotel Booking Platform - Interactive Login and SignUp Component

• پلتفرم رزرو هتل – اتصال تمام صفحات و مرور نهایی پروژه Hotel Booking Platform - Connect All Pages and Final Overview of the Project

اکتشافات کاربردپذیری: ۱۰ اصل نیلسن برای طراحی تعامل USABILITY HEURISTICS: Nielsen's 10 Principles for Interaction Design

• اکتشافات کاربردپذیری چیست و قانون اول توضیح داده شد What is Usability Heuristics and First Rule Explained

• قانون دوم اکتشافات کاربردپذیری: تطابق بین سیستم و دنیای واقعی Second Rule of Usability Heuristics: Match between system and the real World

• قانون سوم اکتشافات کاربردپذیری: کنترل و آزادی کاربر Third Rule of Usability Heuristics: User control and Freedom

• قانون چهارم اکتشافات کاربردپذیری: یکپارچگی و استانداردها Fourth Rule of Usability Heuristics: Consistency and Standards

• قانون پنجم اکتشافات کاربردپذیری: پیشگیری از خطا Fifth Rule of Usability Heuristics: Error Prevention

• قانون ششم اکتشافات کاربردپذیری: شناسایی به جای یادآوری Sixth Rule of Usability Heuristics: Recognition rather than recall

• قانون هفتم اکتشافات کاربردپذیری: انعطاف‌پذیری و کارایی استفاده Seventh Rule of Usability Heuristics: Flexibility and efficiency of use

• قانون هشتم اکتشافات کاربردپذیری: طراحی زیبا و مینیمالیستی Eighth Rule of Usability Heuristics: An Aesthetic and minimalist design

• قانون نهم اکتشافات کاربردپذیری: کمک به کاربران برای تشخیص، عیب‌یابی و بازیابی Ninth Rule of Usability Heuristics: Help users recognize, diagnose, and recover

• قانون دهم اکتشافات کاربردپذیری: کمک و مستندات Tenth Rule of Usability Heuristics: Help and documentation

دسترس‌پذیری: اصول و استانداردهای WCAG ACCESSIBILITY: Principles and WCAG Standards

• دسترس‌پذیری و استانداردهای WCAG Accessibility and WCAG Standards

• سه سطح انطباق: A, AA, AAA Three Levels of Conformance : A, AA, AAA

• بررسی دسترس‌پذیری با کمک پلاگین‌های فیگما Inspect Accessibility with help of Figma Plugins

متدولوژی طراحی اتمیک و روانشناسی رنگ Atomic Design Methodology and Colour Psychology

• طراحی اتمیک چیست و سطوح طراحی اتمیک What is Atomic Design & Levels of Atomic Design

• روانشناسی رنگ توضیح داده شده با مثال‌های عملی Colour Psychology explained with practical examples

روانشناسی شکل و اصول گشتالت با مثال Shape Psychology and Gestalt Principles with Example

• مقدمه بر روانشناسی شکل و معنای اشکال Introduction to Shape Psychology & Meaning of Shapes

• روانشناسی گشتالت چیست (با مثال) What is Gestalt Psychology (with Example)

• قانون مجاورت با کاربرد در طراحی UI (اولین اصل گشتالت) Law of Proximity with Application in UI Design (1st Gestalt Principle)

• قانون شباهت با کاربرد در طراحی UI (دومین اصل گشتالت) Law of Similarity with Application in UI Design (2nd Gestalt Principle)

• قانون تداوم با کاربرد در طراحی UI (سومین اصل گشتالت) Law of Continuity with Application in UI Design (3rd Gestalt Principle)

• قانون بستار با کاربرد در طراحی UI (چهارمین اصل گشتالت) Law of Closure with Application in UI Design (4th Gestalt Principle)

• قانون شکل-زمینه با کاربرد در طراحی UI (پنجمین اصل گشتالت) Law of Figure Ground with Application in UI Design (5th Gestalt Principle)

• قانون سرنوشت مشترک با کاربرد در طراحی UI (ششمین اصل گشتالت) Law of Common Fate with Application in UI Design (6th Gestalt Principle)

• قانون پراگنانز با کاربرد در طراحی UI (هفتمین اصل گشتالت) Law of Pragnanz with Application in UI Design (7th Gestalt Principle)

• قانون تقارن با کاربرد در طراحی UI (هشتمین اصل گشتالت) Law of Symmetry with Application in UI Design (8th Gestalt Principle)

سیستم طراحی: راهنمای رابط کاربری انسانی اپل و متریال دیزاین گوگل DESIGN SYSTEM : Apple Human Interface Guideline and Google Material Design

• مقدمه بر سیستم طراحی و راهنمای رابط کاربری انسانی اپل Introduction to Design System & Apple Human Interface Guideline

• راهنمای متریال دیزاین گوگل و نحوه استفاده از UI Kitها Google Material Design Guideline & How to use UI Kits

کتابخانه طراحی: چگونه برای پروژه‌های UI/UX الهام بگیریم (گذر از پلتفرم Mobbin) DESIGN LIBRARY: How to Take Inspiration for UI/UX Projects (Mobbin Walkthrough)

• چگونه برای پروژه‌های UI/UX الهام بگیریم (گذر از پلتفرم Mobbin) How to Draw Inspiration for UI/UX Projects (Mobbin Platform Walkthrough)

الگوهای طراحی و مقیاس تایپ: طراحی الگوهای UI اپلیکیشن‌های موبایل DESIGN PATTERNS & Typescale : Mobile Apps UI Patterns Design

• الگوی جریان کاربری Onboarding اپلیکیشن اشتراک سفر ۱ Ride Sharing App Onboarding User Flow Pattern 1

• مقیاس تایپ چیست و چگونه از آن استفاده کنیم؟ What is Type scale & How to use it ?

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – ایجاد صفحه راه‌اندازی Ride Sharing App Onboarding Design Pattern - Create Launch Screen

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – فایل Lottie و انیمیشن حرکتی Ride Sharing App Onboarding Design Pattern - Lottie file and Motion Animation

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – ایجاد لودر سفارشی Ride Sharing App Onboarding Design Pattern - Create Custom Loader

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – صفحه ورودی شماره موبایل Ride Sharing App Onboarding Design Pattern - Mobile Number Input Screen

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – صفحه نهایی ورودی شماره موبایل Ride Sharing App Onboarding Design Pattern - Mobile Number Input Screen Final

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – طراحی صفحه ورودی OTP Ride Sharing App Onboarding Design Pattern - OTP Input Screen Design

• الگوی طراحی Onboarding اپلیکیشن اشتراک سفر – تست پروتوتایپ نهایی Ride Sharing App Onboarding Design Pattern - Final Prototype Testing

• اپلیکیشن تجارت الکترونیک – الگوی طراحی افزودن به سبد خرید – مقدمه E-commerce App - Add to Cart Design Pattern - Intro

• اپلیکیشن تجارت الکترونیک – الگوی طراحی افزودن به سبد خرید – نوار ناوبری و تصویر محصول E-commerce App - Add to Cart Design Pattern - Nav Bar and Product Image

• اپلیکیشن تجارت الکترونیک – الگوی طراحی افزودن به سبد خرید – توضیحات، دکمه سبد خرید و نوار پایین E-commerce App - Add to Cart Design Pattern - Desc, Cart Button and Bottom Nav

• اپلیکیشن تجارت الکترونیک – الگوی طراحی افزودن به سبد خرید – اعلان Toast و شمارنده سبد خرید E-commerce App - Add to Cart Design Pattern- Toast Notification and Cart Counter

• اپلیکیشن تجارت الکترونیک – الگوی طراحی افزودن به سبد خرید – اتصال تمام صفحه نمایش‌ها و عناصر E-commerce App - Add to Cart Design Pattern - Connect All the Screens & Elements

• الگوی طراحی تعامل نقشه – خلاصه محصول Map Interaction Design Pattern - Product Brief

• الگوی طراحی تعامل نقشه – صفحه انتخاب مکان Map Interaction Design Pattern - Location Choice Screen

• الگوی طراحی تعامل نقشه – نمای نقشه با Bottom Sheet Map Interaction Design Pattern - Map View with Bottom Sheet

• الگوی طراحی تعامل نقشه – ورودی کیبورد Map-Interaction Design Pattern - Keyboard Input

• الگوی طراحی تعامل نقشه – پیشنهادات خودکار قابل اسکرول Map Interaction Design Pattern - Scrollable Auto Suggestions

• الگوی طراحی تعامل نقشه – ژست Panning و Confirm Sheet Map Interaction Design Pattern - Panning Gesture and Confirm Sheet

• الگوی طراحی تعامل نقشه – کامپوننت جزئیات مکان و Message Snackbar Map Interaction Design Pattern - Location Details Component & Message Snackbar

• قابلیت مرتب‌سازی و ارسال نقد – خلاصه محصول و نوبار Review Sorting and Posting Feature - Product Brief and Navbar

• قابلیت مرتب‌سازی و ارسال نقد – طراحی کامپوننت امتیازدهی Review Sorting and Posting Feature - Rating Component Design

• قابلیت مرتب‌سازی و ارسال نقد – طراحی کامپوننت نقد Review Sorting and Posting Feature - Review Component Design

• قابلیت مرتب‌سازی و ارسال نقد – کامپوننت فیلتر نقد Review Sorting and Posting Feature - Review Filter Component

• قابلیت مرتب‌سازی و ارسال نقد – انتخاب فیلتر پویا Review Sorting and Posting Feature - Dynamic Filter Selection

• قابلیت مرتب‌سازی و ارسال نقد – ایجاد لودر و پروتوتایپینگ Review Sorting and Posting Feature - Loader Creation and Prototyping

• قابلیت مرتب‌سازی و ارسال نقد – قابلیت ارسال نقد Review Sorting and Posting Feature - Review Posting Feature

• قابلیت مرتب‌سازی و ارسال نقد – سیستم امتیازدهی ستاره‌ای Review Sorting and Posting Feature - Star Rating System

• قابلیت مرتب‌سازی و ارسال نقد – صفحه پردازش و پروتوتایپینگ نهایی Review Sorting and Posting Feature - Processing Screen and Final Prototyping

• پروژه‌های آینده بیشتر More Upcoming Projects