UX: فرآیند طراحی بصری [ویدئو]

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

مبانی طراحی بصری Visual Design Foundations

• عناصر و اصول هنر و طراحی The Elements and Principles of Art and Design

• خط، شکل و فرم Line, Shape, and Form

• فضا و بافت Space and Texture

• ارزش و رنگ Value and Color

• تعادل و هارمونی Balance and Harmony

• تاکید، تنوع و تناسب Emphasis, Variety, and Proportion

• حرکت و ریتم Movement and Rhythm

مدیریت بازخورد به عنوان یک طراح UX Handling Feedback as a UX Designer

• اهمیت مدیریت بازخورد خوب The Importance of Handling Feedback Well

• چالش های مدیریت بازخورد The Challenges of Handling Feedback

• انواع بازخورد Types of Feedback

• درخواست بازخورد Requesting Feedback

• ورود به ذهنیت درست Getting into the Right Mindset

• دریافت بازخورد Receiving Feedback

• اقدام بر اساس بازخورد Acting on Feedback

دریافت بازخورد UX توسط مثال Receiving UX Feedback by Example

• دریافت بازخورد سازنده Receiving Constructive Feedback

• دریافت بازخورد غیر سازنده Receiving Non-Constructive Feedback

• دریافت بازخورد تجویزی Receiving Prescriptive Feedback

جمع آوری الهامات طراحی Collecting Design Inspiration

• سایت ها و ابزارهای جمع آوری الهام Sites and Tools for Collecting Inspiration

مقدمه ای بر وایرفریمینگ Introduction to Wireframing

• وایرفریم ها چیست؟ What Are Wireframes?

• مزایای Wireframing Benefits of Wireframing

• انواع وایرفریم Types of Wireframes

• نحوه استفاده از وایرفریم How Wireframes Are Used

• وایرفریم های دستی Hand-Drawn Wireframes

• نمایش وایرفریم روی کاغذ Demonstration of Wireframing on Paper

• نکات و ابزار Tips and Tools

• به اشتراک گذاری و دریافت بازخورد Sharing and Getting Feedback

• مزایا و معایب وایرفریم روی کاغذ The Pros and Cons of Wireframing on Paper

• وایرفریم در Balsamiq Wireframing in Balsamiq

• نمایش وایرفریم در Balsamiq Demonstrating Wireframes in Balsamiq

• اشتراک گذاری و دریافت بازخورد در Balsamiq Sharing and Getting Feedback in Balsamiq

• مزایا و معایب Wireframing در Balsamiq Pros and Cons of Wireframing in Balsamiq

• ساخت وایرفریم در Adobe XD Making Wireframes in Adobe XD

• نمایش Wireframes در Adobe XD Demonstrating Wireframes in Adobe XD

• اشتراک گذاری و دریافت بازخورد در Adobe XD Sharing and Getting Feedback in Adobe XD

• مزایا و معایب Wireframing در Adobe XD The Pros and Cons of Wireframing in Adobe XD

اسکیس را تمرین کنید Practice Sketching

• مشکل Problem

• راه حل Solution

Wireframing را تمرین کنید Practice Wireframing

• مشکل Problem

• راه حل Solution

تایپوگرافی برای طراحان Typography for Designers

• تایپوگرافی چیست؟ What Is Typography?

• چگونه تایپوگرافی بر تجربه کاربر تأثیر می گذارد How Typography Affects the User Experience

• اصطلاحات تایپوگرافی Typography Terminology

• انواع مختلف نوع Different Types of Type

• چاپ در مقابل دیجیتال Print vs. Digital

• چاپ در مقابل دیجیتال Print vs. Digital

• مورد استفاده را در نظر بگیرید Consider the Use Case

• نحوه انتخاب یک تایپ متن برای وب How to Choose a Text Typeface for the Web

• نحوه انتخاب نوع صفحه نمایش How to Choose a Display Typeface

• وزن، سبک و اندازه قلم Font Weights, Styles, and Sizes

• فضای افقی، اندازه گیری، و حاشیه Horizontal Space, Measure, and Margins

• فضای عمودی، ارتفاع خط، و ریتم عمودی Vertical Space, Line Height, and Vertical Rhythm

• معرفی سلسله مراتب تایپوگرافی Introducing Typographic Hierarchy

• سلسله مراتب تایپوگرافی: سبک، وزن، اندازه و موقعیت Typographic Hierarchy: Style, Weight, Size, and Position

• سلسله مراتب تایپوگرافی: کلاه و رنگ Typographic Hierarchy: Caps and Color

• درمان های چیدمان Layout Treatments

• ترکیب حروف چاپی Combining Typefaces

• تایپوگرافی پاسخگو Responsive Typography

• سیستم های شبکه بیشتر More Grid Systems

• فونت های متغیر Variable Fonts

• جزئیات خوب The Fine Details

قبل و بعد: تایپوگرافی Before and After: Typography

• تایپوگرافی قبل Typography Before

• تایپوگرافی بعد Typography After

طراحی چیدمان ها Designing Layouts

• املا، گرامر، و حروف عنوان Spelling, Grammar, and Title Casing

• سرصفحه ها و برچسب ها Headers and Labels

• تایپوگرافی و سلسله مراتب Typography and Hierarchy

• استفاده از گرید Using a Grid

• رنگ ها و کنتراست Colors and Contrast

ایجاد موکاپ Creating Mockups

• مقدمه ای بر موکاپ ها Introduction to Mockups

• هدف ماکاپ ها The Purpose of Mockups

• آماده سازی برای ساخت ماکاپ Preparing to Make Mockups

• ساخت ماکاپ Making Mockups

• نکات کارایی Efficiency Tips

• به اشتراک گذاری موکاپ ها Sharing Mockups

قبل و بعد: رنگ Before and After: Color

• رنگ قبل Color Before

• رنگ بعد Color After

قبل و بعد: طرح بندی Before and After: Layout

• طرح بندی قبل Layout Before

• طرح بعد Layout After

نمونه سازی با Adobe XD Prototyping with Adobe XD

• چرا نمونه اولیه در Adobe XD؟ Why Prototype in Adobe XD

• رابط Adobe XD The Adobe XD Interface

• پیمایش در فضای کاری Navigating the Workspace

• رسم اشکال Drawing Shapes

• افزودن تصاویر Adding Images

• اضافه کردن متن Adding Text

• لایه ها و شبکه های تکراری Layers and Repeat Grids

• اضافه کردن تابلوهای هنری Adding Artboards

• ایجاد صفحات جدید Creating New Screens

• افزودن تعامل به نمونه های اولیه Adding Interactivity to Prototypes

• به اشتراک گذاری طرح ها Sharing Designs

نمونه سازی با Figma Prototyping with Figma

• چرا نمونه اولیه در Figma Why Prototype in Figma

• راه اندازی پروژه Project Setup

• پیمایش بوم Navigating the Canvas

• چیدمان عناصر طراحی Arranging Design Elements

• استفاده مجدد از طرح ها با کامپوننت ها Reusing Designs with Components

• طراحی با اشکال Drawing with Shapes

• ترسیم خطوط منحنی Drawing Curved Lines

• اتمام رابط Finishing the Interface

• افزودن تعامل به نمونه های اولیه Adding Interactivity to Prototypes

• به اشتراک گذاری طرح ها Sharing Designs

نمونه سازی را تمرین کنید Practice Prototyping

• مشکل Problem

• راه حل Solution

همکاری با توسعه دهندگان Collaborating with Developers

• مقدمه همکاری با توسعه دهندگان Intro to Collaborating with Developers

• ارتباط برای توسعه Communicating for Development

• دستیابی به طراحی نهایی Final Design Handoff

ارائه ایده های طراحی Presenting Design Ideas

• مخاطب خود را بشناسید Know Your Audience

• انتظارات و اهداف را تعیین کنید Set Expectations and Goals

• مشکل و اهداف را بیان کنید State the Problem and Goals

• در مورد مشکل تحقیق کنید Research the Problem

• حل مشکل Solving the Problem

• جدول زمانی و مراحل بعدی Timeline and Next Steps

• بازخورد Feedback