آموزش 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?

• مزایای وایرفریمینگ 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

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

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

• نمایش عملی وایرفریم‌ها در Adobe XD Demonstrating Wireframes in Adobe XD

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

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

تمرین اسکچینگ (طراحی سریع) Practice Sketching

• مسئله Problem

• راه حل Solution

تمرین وایرفریمینگ 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

• بررسی مورد استفاده (Use Case) Consider the Use Case

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

• چگونه یک فونت نمایشی (Display) انتخاب کنیم 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) 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

• لایه‌ها و Repeat Grids 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

• کار با بوم (Canvas) 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

• تحویل نهایی طرح (Handoff) 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