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

درس ها Lessons

• برای توسعه دهندگان → از کد Typescale استفاده نکنید For Developers → Dont use code from Typescale

• طراحی هدر قهرمان قسمت 1 Hero Header Design Part 1

• مقدمه ای بر جفت کردن فونت Introduction to Font Pairing

• طراحی سربرگ قهرمان - موضوع دوم Hero Header Design -2nd Theme

• برای توسعه دهندگان → مقدمه ای بر تایپوگرافی پاسخگو For Developers → Intro to Responsive Typography

• ترازهای متن Text Alignements

• ریتم عمودی در فتوشاپ Vertical Rhythm in Photoshop

• طراحی تبلیغات رسانه های اجتماعی قسمت 2 Social Media Ad Design Part 2

• اومانیست قدیمی و انتقالی Humanist Old and Transitional

• طراحی سربرگ قهرمان - موضوع دوم قسمت 2 Hero Header Design - 2nd Theme Part 2

• مقدمه ای بر تایپوگرافی Introduction to Typography

• طراحی صفحه نمایش IOS با وضوح چندگانه با فتوشاپ Designing Multiple resolution IOS Screens with Photoshop

• برای توسعه دهندگان → rem Font Sizing For Developers → rem Font Sizing

• انعکاس فتوشاپ خود به آیفون Mirroring your Photsshop to Iphone

• آنچه در این دوره به آن خواهیم پرداخت What we will cover in this course

• طراحی اولین طرح وبلاگ Design First Blog Layout

• تمرین طراحی تایپوگرافی شاداب قسمت 1 Juicy Typography Design Exercise Part 1

• ارتفاع خط (پیشرو) Line-Height (Leading)

• تمرین طراحی تایپوگرافی شاداب قسمت 2 Juicy Typography Design Exercise Part 2

• استفاده از خط تیره، en & em Hyphen, en & em dash usage

• بدون سریف و اسکریپت Sans Serif and Script

• برای توسعه دهندگان → نحوه عملکرد ریتم عمودی در CSS For Developers → How Vertical Rhythm works in CSS

• به چند سطح از سلسله مراتب تایپوگرافیک نیاز دارم؟ How many Levels of Typographic Hierarchy do i need?

• طراحی طرح دوم برای وبلاگ Design Second Layout for Blog

• ریتم عمودی Vertical Rhythm

• برای توسعه دهندگان → em اندازه قلم For Developers → em Font Sizing

• تایپوگرافی و ترازو اندروید Android Typography and Scales

• نقش های تایپ فیس Roles of Typefaces

• برای توسعه دهندگان → واحد CSS درصد برای تایپوگرافی پاسخگو For Developers → Percentage CSS unit for Responsive Typography

• تایپوگرافی اصطلاحات آناتومانی Typography Anatomany terms

• معرفی اندازه نقطه (PT) در دستگاه های IOS Intro to Point (PT) sizing in IOS Devices

• آخرین طرح برای طراحی وبلاگ Last layout for Blog Design

• QA دانشجویی ← نحوه گسترش مقیاس تایپوگرافی برای استفاده از طراحی وب پاسخگو Student QA → How to Expand Typographic scale for Responsive Web Design usage

• فاصله حروف (کرنینگ) Letter Spacing (Kerning)

• جفت شدن با کنتراست Pairing with contrast

• برای توسعه دهندگان → استفاده از فونت های ممتاز For Developers → Using Premium Fonts

• سوال دانش آموز در مورد قطعنامه Student Question about Resolutions

• جفت کردن فونت ها از همان طراح یا خانواده Pairing fonts from same designer or family

• درباره طول خط About Line Length

• تاثیر رنگ بر حالت تایپ فیس (صدا) Effect of Color on Typeface Mood (Voice)

• برای توسعه دهندگان → تمرین کدگذاری Gridlover For Developers→ Gridlover Coding Exercise

• برای توسعه دهندگان → استفاده از فونت های گوگل For Developers → Using Google Fonts

• مقدمه ای بر شبکه مدولار Intro to Modular Grid

• آماده سازی گرید برای تمرین طراحی چیدمان وبلاگ Preparing Grid for Blog Layout Design Exercise

• ابزار آنلاین برای مقیاس های تایپوگرافی Online Tools for Typographic Scales

• طراحی هدر قهرمان قسمت 2 Hero Header Design Part 2

• برای توسعه دهندگان → % اندازه قلم For Developers → % Font Sizing

• طراحی تبلیغات رسانه های اجتماعی قسمت 1 Social Media Ad Design Part 1

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

• استفاده صحیح از علامت نقل قول Using Quotation marks properly

• درباره فونت و خانواده فونت About Font and Font Families

• مقدمات تمرین طراحی دریبل Dribbble Design Exercise Preperations

• برای توسعه دهندگان → واحد قلم vw For Developers → vw Font Unit

• تمرین طراحی برای ریتم عمودی Design Exercise for Vertical Rhythm

• اصلاح طرح 2 طرح‌بندی Refining the 2nd Layout Design

• برای توسعه دهندگان → مقیاس های مختلف برای چند اندازه صفحه نمایش For Developers→ Different Scales for Multiple Screen Sizes

• نکات نهایی طراحی تبلیغات رسانه های اجتماعی Social Media Ad Design Final Touches

• طراحی برای چندین اندازه صفحه نمایش اندروید Desinging for Multiple Android Screen Sizes

• از تشابه زیاد خودداری کنید Avoid too much similarity

• جفت کردن حروف در ویژگی های مشابه Pairing typefaces on similar features

• برای توسعه دهندگان → بوت استرپ مقیاس تایپوگرافی سفارشی For Developers→ Custom Typographic Scale Bootstrap

• تطابق قد x x-height matching

• تمرین طراحی شاداب - مقدمات Juicy Design Exercise - Preperations

• تمرین طراحی تبلیغات رسانه های اجتماعی ← آماده سازی Social Media Ad Design Exericse → Preperations

• تمرین طراحی کنید تا آنچه را که تاکنون آموخته ایم به کار ببندید Design Exercise to apply what we have learned so far

• ابزارهای آنلاین برای جفت کردن فونت Online Tools for Font Pairing

• طراحی سربرگ قهرمان - موضوع دوم قسمت 1 Hero Header Design - 2nd Theme Part 1

• حالات/صدای حروف چاپی Moods/Voices of Typefaces

• برای توسعه دهندگان → اندازه قلم CSS For Developers → CSS Font Sizing

• مشخصات تایپوگرافی IOS IOS Typography Specifications

• چند فونت انتخاب کنیم؟ How many fonts to select?