آموزش بوت کمپ طراحی UI. استاد تایپوگرافی، رنگ و شبکه

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

معرفی Introduction

• نحوه استفاده از این دوره How To Use This Course

• ارسال کار شما Submitting Your Work

• از این دوره چه انتظاری باید داشت؟ What To Expect From This Course?

ترکیب بندی Composition

• معرفی Introduction

• اصطلاح Expression

• تعادل Balance

• تضاد Contrast

• فرم Form

• سلسله مراتب Hierarchy

• روابط Relations

• هم ترازی Alignment

• دنباله و سرعت Sequence & Pace

• شما ترکیبات را به اشتراک بگذارید Share You Compositions

• خلاصه Summary

طبقه بندی تایپوگرافی Typographic Classifications

• اهمیت تایپوگرافی Importance of Typography

• تایپ فیس یا فونت Typeface or Fonts

• تایپوگرافی وب Web Typography

• ارتباط غیر کلامی Non Verbal Communication

• آناتومی نوع Anatomy of Type

• چاپخانه Printing Press

• سریف تایپ فیس Serif Typeface

• تایپ بدون سریف Sans Serif Typeface

• درک تایپوگرافی Understanding Typography

• یک تایپ فیس را توصیف کنید Describe A Typeface

• خلاصه Summary

انتخاب تایپ فیس ها Selecting Typefaces

• الهام گرفتن Inspiration

• برند را تعریف کنید Define The Brand

• فروشگاه های فونت Font Shops

• متن بدنه Body Text

• A Body Typeface را انتخاب کنید Select A Body Typeface

• تک تایپ Single Typeface

• نمایش متن Display Text

• یک متن نمایشگر را انتخاب کنید Select A Display Text

• اطلاعات متا Meta Information

• جفت کردن فونت Font Pairing

• تمرین جفت کردن فونت Font Pairing Practice

• ایجاد یک جفت فونت Create A Font Pair

• خلاصه Summary

خوانایی Readability

• چگونه می خوانیم How We Read

• خوانایی Readability

• نسبت تصویر Aspect Ratio

• مشاهده فاصله Viewing Distance

• اندازه فونت بدنه برای خوانایی Body Font Size for Readability

• متن بزرگ Large Text

• طول خط Line Length

• ارتفاع خط Line Height

• بومی سازی Localisation

• آزمون خوانایی Readability Quiz

• خلاصه Summary

یک ظاهر طراحی و قالب بندی متن Styling & Formatting Text

• شبکه عمودی Vertical Grid

• سلسله مراتب بصری Visual Hierarchy

• نوع مقیاس Type Scale

• یک مقیاس نوع ایجاد کنید Create A Type Scale

• یک مقیاس نوع ایجاد کنید Create A Type Scale

• یک چالش مقیاس نوع ایجاد کنید Create A Type Scale Challange

• نوع چالش سلسله مراتبی Type Hierarchy Challenge

• سیستم های طراحی Design Systems

• فیگما Figma

• طرح Sketch

• سایر نرم افزارها Other Software

• طراحی ظاهر Styling

• لیگاتورها Ligatures

• کلاه های کوچک Small Caps

• فاصله بین حروف Letter Spacing

• کرنینگ Kerning

• تراز پاراگراف Paragraph Alignment

• اعداد و تاریخ Numbers and Date

• سیستم های تایپوگرافی Typographic Systems

• ایجاد یک سیستم تایپوگرافی Create A Typographic System

• خلاصه Summary

سیستم های شبکه Grid Systems

• هندسه Geometry

• انواع گرید Types of Grid

• اهمیت شبکه ها Importance of Grids

• جعبه مدال Box Modal

• فلکس باکس Flex Box

• Css Grid Css Grid

• پاسخگو در مقابل سیال Responsive vs Fluid

• آناتومی یک شبکه - قسمت 1 Anatomy of a Grid - Part 1

• آناتومی یک شبکه - قسمت 2 Anatomy of a Grid - Part 2

• مسابقه گرید Grid Quiz

• خلاصه Summary

ساخت شبکه ما Building Our Grid

• تراز کردن با Grid Align to Grid

• شبکه جاسازی شده Embedded Grid

• ساخت شبکه ما - قسمت 1 Building our Grid - Part 1

• ساخت شبکه ما - قسمت 2 Building our Grid - Part 2

• ساخت شبکه ما - قسمت 3 Building our Grid - Part 3

• ایجاد یک شبکه Create A Grid

• خلاصه Summary

تعاملات رنگی Colour Interactions

• معرفی Introduction

• تک رنگ One Colour

• دو رنگ Two Colours

• انتقال رنگ ها Transpose Colours

• شفافیت Transparency

• محدوده شفافیت Transparency Range

• ترکیب رنگ Colour Composition

• آزمایشات رنگ خود را به اشتراک بگذارید Share Your Colour Experiments

• خلاصه Summary

رنگ چگونه کار می کند How Colour Works

• اضافه و تفریق Additive and Subtractive

• امواج Waves

• فرآیند سه رنگ Trichromatic Process

• رنگی بودن Chromaticity

• مسابقه رنگ Colour Quiz

• خلاصه Summary

ویژگی های رنگ Colour Attributes

• ارزش های Values

• تمرینات ارزشی Values Exercises

• روشنایی Brightness

• مثال های روشنایی Brightness Examples

• تطبیق رنگ Colour Matching

• اشباع Saturation

• مثال اشباع Saturation Example

• تضاد Contrast

• مثال کنتراست Contrast Example

• ویژگی های رنگ Colour Attributes

• خلاصه Summary

پالت ما را ایجاد کنید Create Our Palette

• فضاهای رنگی Colour Spaces

• هارمونی رنگ Colour Harmonies

• احساسات Emotions

• تمرین احساسات Emotions Exercise

• هدف رنگ Colour Purpose

• یک پالت رنگ ایجاد کنید Create A Colour Palette

• خلاصه Summary

زبان تصویری Visual Language

• عکاسی Photography

• شکل ها Shapes

• تصاویر Illustrations

• عکس ها یا تصاویر را انتخاب کنید Select Photographs or Illustrations

• بافت ها Textures

• الگوها Patterns

• گرادیان ها Gradients

• نمادها Icons

• زبان بصری خود را اضافه کنید Add Your Visual Language

• خلاصه Summary

• ممنون و خداحافظ Thank You & Goodbye