آموزش مطالعه موردی طراحی رابط تجربه کاربری – Adobe XD UX UI

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

معرفی Introduction

• معرفی Introduction

Adobe XD را یاد بگیرید Learn Adobe XD

• UX در مقابل UI UX vs UI

• آشنایی با محیط و کار با ابزارها را شروع کنید Start knowing the Environment and Working with Tools

• ایجاد اشکال ساده Create Simple Shapes

• تکلیف - ایجاد اشکال متعدد Assignment - Create Multiple Shapes

• تکلیف ایجاد یک جغد Assignment Create an Owl

• کار با Types Working with Types

• ایجاد تایپوگرافی با سایه ها Create Typography with Shadows

• پوشاندن تصاویر در یک شکل در Adobe XD Masking images within a shape in Adobe XD

• تکلیف ایجاد یک صفحه پروفایل اینستاگرام برای تبلت Repeat Grid Assignment Create an Instagram Profile page for Tablet Repeat Grid

• نحوه استفاده از مؤلفه‌ها از «سبک کاراکتر رنگ‌ها» در کتابخانه‌ها یا پانل دارایی‌ها How to use components Colors Character Style in Libraries or assets panel

• طراحی سایت ریسپانسیو ایجاد کنید Create a Responsive Website Design

طراحی تجربه کاربری User Experience Design

• پروژه دنیای واقعی - بیان مسئله - چگونه کار را بدست آوریم Real world project – Problem Statement – how to get the job

• استراتژی طراحی تحقیق کاربر چیست چگونه جدول زمانی کاری ایجاد کنیم What is User Research Design Strategy How to create work timeline

• نحوه انجام مصاحبه کاربر Create Gathering بینش How to do User interview Create Gathering insight

• نحوه انجام تحقیقات بازار و تجزیه و تحلیل رقابتی با ایجاد Moodboard How to do Market Research and competitive analysis by creating moodboard

• نحوه ایجاد یک کاربر کاربر How to Create a User Personas

• چگونه یک نقشه همدلی ایجاد کنیم - مشتری خود را بشناسید How to Create an Empathy Map - Get to know your Customer

• نقشه سفر کاربر یا نقشه سفر مشتری ایجاد کنید Create User Journey Mapping or Customer journey Map

• چگونه برای ایجاد جریان کاربر How to Create User Flow

• مرتب سازی کارت چیست و Moodboard چگونه می تواند کمک کند What is Card Sorting and How Moodboard Can Help

• نحوه ایجاد معماری اطلاعات How to Create Information Architecture

• نحوه ایجاد Wireframes یا Wireframing با وفاداری پایین How to Create Wireframes or Low fidelity wireframing

Wireframing - طراحی رابط کاربری Wireframing - User Interface Design

• اندازه‌های وب‌سایت و سیستم شبکه - قاب سیمی با وفاداری بالا Website Sizes and Grid System- High fidelity wireframing

• طراحی بخش قهرمان یا اسلایدر یا طرح بنر طراحی Hi Fi Design Hero Section or Slider or banner design Hi Fi Design

• اطلاعات طراحی صفحه برای صفحه اصلی طراحی Hi Fi info Page Design for main page Hi Fi Design

• بخش پرطرفدار طراحی طراحی Hi Fi Design Trending Section Hi Fi Design

• بخش طراحی پیشنهادی طراحی Hi Fi Design Recommended Section Hi Fi Design

• بخش پیشنهاد ویژه طراحی Hi Fi Design Design Special Offer section Hi Fi Design

• بخش تخفیف طراحی Hi Fi Design Design Discount section Hi Fi Design

• طراحی بخش آخرین اخبار طراحی Hi Fi Design Latest News Section Hi Fi Design

• بخش توصیفات طراحی طراحی Hi Fi Design Testimonials section Hi Fi Design

• طراحی اشتراک و پاورقی بخش Hi Fi Design Design Subscribe and Footer Section Hi Fi Design

• صفحه فیلتر طراحی Hi Fi Design Design Filter Page Hi Fi Design

• صفحه بندی طراحی Hi Fi Design Design Pagination Hi Fi Design

• طراحی بخش های پیشنهادی و پرطرفدار Hi Fi Design Design Recommended and popular sections Hi Fi Design

• کتاب طراحی تک صفحه و اطلاعات Hi Fi Design Design Book Single page and info Hi Fi Design

• ایجاد انیمیشن کامپوننت برای جزئیات محصول طراحی Hi Fi Create Component Animation for Product Details Hi Fi Design

• Create My Card Page Hi Fi Design Create My Card Page Hi Fi Design

• طراحی Hi Fi ردیابی محموله را ایجاد کنید Create Shipment Tracking Hi Fi Design

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

• چگونه نمونه سازی و انیمیشن را شروع کنیم How to Start Prototyping and Animation

• نمونه سازی صفحه اصلی Prototyping the main page

• ایجاد صفحه فیلتر مؤلفه متحرک نمونه سازی طراحی Hi Fi Create animated component Filter page Prototyping Hi Fi Design

• دسته بندی کتاب ها نمونه سازی افزودن به کارت انیمیشن طراحی Hi Fi Books Categories prototyping Add to card animation Hi Fi Design

• نمونه سازی اولیه و انیمیشن Hi Fi Design را تمام کنید Finish the prototyping and animation Hi Fi Design

• نمونه اولیه خود را ضبط کنید و بررسی نهایی Hi Fi Design Record your prototype and Final check Hi Fi Design

طراحی رابط کاربری و نمونه سازی User Inteface Design & Prototyping

• راز انتخاب رنگ – راهنمای احساس رنگ برای ایجاد سیستم طراحی The secret of choosing colors – Color emotion guide to create design system

• رنگ ها را به پالت رنگ اضافه کنید Add Colors to Color Pallet

• چگونه بهترین فونت ها را برای وب سایت خود پیدا کنیم How to find the best Fonts for our website

• نحوه ایجاد سبک شخصیت برای طراحی خود How to Create character style for your design

• نوار منوی وب سایت را طراحی کنید Design the website menu bar

• طراحی بخش قهرمان طراحی وب یا اسلایدر یا طراحی بنر Web Design Hero Section or Slider or banner design

• بخش های اطلاعات وب سایت Website info sections

• طراحی بخش های پرطرفدار Design trending sections

• طراحی بخش های توصیه شده Design recommended sections

• طراحی هدر Web View Mobile Design Mobile Web View header

• اطلاعات طراحی و بخش های پرطرفدار نمایش وب موبایل Design info and trending sections Mobile Web View

• طراحی بخش های پیشنهادی وب موبایل Design Recommended Sections Mobile Web View

• طراحی بخش های پیشنهاد ویژه نمایش وب موبایل Design Special offer sections Mobile Web View

• طراحی تخفیف و بخش های محبوب نمایش وب موبایل Design Discount and Popular Sections Mobile Web View

• طراحی آخرین اخبار و توصیفات وب سایت موبایل Design Latest News and Testimonials Mobile Web View

• دسته بندی صفحه فیلتر طراحی Design Filter page Categories

• طراحی کتاب های ذکر شده Design Listed Books

• صفحه بندی را طراحی کنید و صفحه فیلتر را تمام کنید Design Pagination and Finish the Filter page

• طراحی صفحه فیلتر نمایش وب موبایل Design Filter Page Mobile Web View

• صفحه واحد را طراحی کنید Design the Single Page

• نمای وب موبایل تک صفحه را طراحی کنید Design the Single Page Mobile Web View

• صفحه کارت من را طراحی کنید Design My Card Page

• نمای وب موبایل صفحه کارت من را طراحی کنید Design My Card Page Web Mobile View

• طراحی صفحه پیگیری حمل و نقل Design Shipment Tracking Page

• طراحی صفحه ردیابی محموله نمای وب موبایل Design Shipment Tracking Page Web Mobile view

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

• ویدئو را به هدر اضافه کنید و از انیمیشن Lottie در Adobe XD استفاده کنید Add Video to Header and Use Lottie Animation in Adobe XD

• بخش‌های پرطرفدار Hover Animation را ایجاد کنید Create Hover Animation trending sections

• انیمیشن را با اسکرول گروه ها بکشید Drag Animation with Scroll Groups

• بخش گواهی انیمیشن سه بعدی 3D Animation Testimonial Section

• انیمیشن کشویی – حالت جزء Drop Down Animation – Component State

• دسته بندی انیمیشن – حالت جزء Categories Animation – Component State

• شمارنده متحرک سازی و افزودن به کارت انیمیشن - حالت جزء Animating Counter and Add to Card Animation – Component State

• نمونه سازی نهایی و قالب بندی سیمی Final Prototyping and wireframing

• نمای وب موبایل نمونه سازی و قالب بندی سیمی Mobile Web view Prototyping and wireframing

• معرفی برنامه طراحی صفحه و نمونه سازی انیمیشن App intro Page Design and Prototyping Animation

• نصب برنامه در طراحی ثبت نام و نمونه سازی انیمیشن بخوان App Onboarding Sing in Sign Up Design and Prototyping Animation

• قوانینی برای طراحی کامل اپلیکیشن موبایل Rules for Perfect Mobile App Design

• انیمیشن طراحی صفحه اصلی برنامه App Main Page Design Prototyping Animation

• با استفاده از طراحی منوی برنامه حالت جزء و نمونه سازی انیمیشن Using Component State App Menu Design and Prototyping Animation

• نوار جستجوی برنامه انیمیشن نمونه سازی ساده App Search bar Simple Prototyping Animation

• طراحی دسته‌های برنامه و نمونه‌سازی انیمیشن App Categories Design and Prototyping Animation

• نوار جستجو طراحی حرفه ای و نمونه سازی انیمیشن Search bar Professional Design and Prototyping Animation

• طراحی و نمونه سازی مرتب سازی بر اساس دسته بندی ها Design and prototyping Sorting based on categories

• انیمیشن کشیدن ویژه کتابفروشی BookStore Special Drag Animation

• طراحی تک صفحه و نمونه سازی انیمیشن Single page Design and Prototyping Animation

• متن و مولفه کتاب Tone E برای خواندن بهتر انیمیشن تغییر می کند Text and Tone E book component change for better reading Animation

• Flip Page Effect Adobe XD Design and Prototyping Animation Flip Page Effect Adobe XD Design and Prototyping Animation

• 3D Glass Effect Card Credit Card Adobe XD Design Prototyping Animation 3D Glass Effect Credit Card Adobe XD Design Prototyping Animation

• اطلاعات پرداخت طراحی نمونه اولیه انیمیشن Payment info Design Prototyping Animation

• ردیابی حمل و نقل و طراحی منوی جانبی انیمیشن نمونه سازی Shipment Tracking and Side Menu Design Prototyping Animation

• منوی اصلی برنامه نمونه سازی انیمیشن App Main Menu Prototyping Animation

• تست کاربر با اشتراک گذاری کار شما و گرفتن بازخورد User Testing by Sharing your Work and Getting Feedback

• Final Project UX UI Case Study Design Website خرید فروشگاه موبایل Web Vi Final Project UX UI Case Study Design Grocery Shopping Website Mobile Web Vi