Release date:2022, December

Duration:08 h 56 m

Author:Muhammad Ahsan Pervaiz

Skill level:Beginner

Language:English

Exercise files:Yes

What will you learn Design elegant web and mobile apps by choosing and pairing meaningful fonts Use Vertical Rhythm and Modular Grid to effectively utilize white space Enhance your designs with the use of Modular Grid and Baseline Grid Gain knowledge on Typography Classes and Anatomy Utilize line-height and letter spacing effectively for improved typography Understand IOS App Typography and the various IPhone Screen sizes Learn about Google Android Typography, its scale, and the SP unit of type Connect your Photoshop screen to iPhone or Android devices Achieve balance in your designs through the LEGO Blocks method Follow step-by-step coding exercises to apply Baseline Grid for Developers Show the baseline grid in HTML pages with just one line of code for Developers Create Vertical Rhythm using padding, margins, and other elements in CSS for Developers Apply Vertical Rhythm in Bootstrap for Developers Determine when to use em, rem, vm, or % font-size units for Developers Establish a Typography Scale with ease using online tools for Developers Requirements Designers should possess a strong proficiency in Adobe Photoshop. Developers should have a solid understanding of HTML and CSS. Adobe Photoshop latest version should be downloaded and installed prior to the start of the course. Description

Have you ever wondered why designs on Dribbble and Behance look so elegant? One of the secrets behind these great web and mobile app designs is the perfect use of font combinations, effective white space, and grids.

To learn the superpower of typography and the use of time and space, enroll in this course. The course is focused on typography for designers and developers. All great designers possess typography skills, and their usage of white space is always outstanding.

Takeaway for designers:

In this course, we will convert your boring designs into Dribbble-level designs by teaching you:

Basics of typography classes and anatomy Variation techniques to make your text interesting How to create elegant web and mobile app designs by selecting and pairing meaningful fonts The different moods or voices of fonts Mastering font pairing and using tons of online resources to automatically pair fonts
01. Introduction to Typography

01. Intro to Typography Course 02. How this course has been laid out → Headshot video 03. What are Fonts, Font Families and Font Styles 04. Typography Terms & Anatomy 07. Type Classification – Old and Transitional 08. Type Classification – Modern, Sans-serif, Script 11. Optimal Line-Length for Web and Mobile 12. Which text alignment for what purpose 13. Line-Height (Leading) 14. Letter Spacing (Kerning) 15. Tracking in Typography 17. EXERCISE Designing Awesome Article Page in Photoshop

02. More about Typography

01. Hyphen, en & em dash usage → Student Request Lecture 02. Using Quotation marks properly → Student Request Lecture

03. Typography Scales and Grids

01. Roles of Typefaces 02. Typographic Scales for hierarchy 03. Online Tools for Typographic Scales 04. Student Question → How to extend Modular Scale to apply in Responsive Design 06. How many Levels of Typographic Hierarchy do I need 07. Vertical Rhythm and Spacing 08. Vertical Rhythm in Adobe Photoshop 09. DESIGN Exercise Typographic Scales, Making and Breaking Vertical Rhythm 10. Using Modular Grid for Designing Web, Mobile Layout

04. EXERCISES Modular + Baseline Grid Design Ultimate Exericse

01. Preparing Modular and Baseline Grid in Photoshop 02. Blog Design 1st Design with Modular Grid 03. Blog Design 2nd Design Iteration with Modular Grid 04. Blog Design 2nd Design Refinements 05. Blog Design 3rd Design Layout with Modular Grid

05. How to Select Fonts

01. How many fonts to select 02. Training your eye for Moods or Voice of Typefaces 03. Effect of Color on Typeface Mood (Voice)

06. How to Pair Fonts

01. Basic Principles of Font Pairing 02. Pairing fonts from Same Designer + Using Mega Font Families 03. Matching Fonts with X-Height 04. Using Contrast to Pair Fonts 05. Look for Similar Features while Font Pairing 06. Avoid too much similarity between Fonts 07. Online Tools for Font Pairing

07. How to get Variation in text for Great Designs

01. Using Bold, Italic & Capitalize for Variation in Type 02. Variation using Line-Height and Letter-Spacing 03. Variation using Colors in Type 04. Variation using Reverse Colors in Type

08. EXERCISES Dribbble LEVEL Designs

01. Tech Company Web Design (Preperations) 02. Tech Company Web Design (Part 1) 03. Tech Company Web Design (Part 2) 04. Userable Web Design Intro (Preperations) 05. Userable Web Design (Part 1) → Chainging Fonts to change theme 06. Userable Web Design (Part 2) → Spacing & White space fine tuning

09. Exercise Social Media Ad Design with 3 different fonts

01. Exercise Social Media Ad → Gathering Resources 03. Exercise Social Media Ad Design → Part 1 04. Exercise Social Media Ad Design → Part 2 05. Exercise Social Media Ad Design → Final touches

10. Nature Health Themed Typography Exercises

01. Fresh & Juicy Design Exercise – Preperations 03. Fresh & Juicy Design Exercise – Part 1 04. Fresh & Juicy Design Exercise – Part 2

11. Typography for Iphone and Android App Designs (Mobile App Typography)

01. Understanding IOS Screen Sizes and Point sizes for Typography 02. IOS Font Sizes and Specifications 05. Exercise Design Blog Post for Iphone 1x, 2x and 3x screens in Photoshop 06. Student Question 1X and 2X Resolution IOS Font Sizing Problems 07. Connecting (Mirroring) Photoshop to Iphone Screen while designing 08. Android Typography Specifications – What are SP font Sizes and DPI 10. Exercise Design Simple Blog Post for Multiple Android Screen Sizes

12. Typography for Web Developers

01. Using Google fonts Pros and Cons 02. Using Premium Fonts Pros and Cons with guide to purchasing them 03. Introduction to CSS font-size units 04. What is em font-size unit 05. What is Percentage % font-size 06. What is VW font-size 07. What is rem font size 08. How Vertical Rhythm works in CSS 09. CODE Exercise Using Vertical Rhythm with Gridlover tool 10. Vertical Rhythm & Typography Scales with Boostrap 11. Dont use TypeScale Online tool (use gridlover instead)

13. Responsive Typography for Developers

01. Responsive Typograhy Introduction 02. Percentage font-size for Responsive Typography 03. Different Typographic Scales for Responsive Typography

14. New and Latest in Typography

01. What are Color Fonts 02. What are Variable Fonts 03. What to do NEXT

[Udemy] Typography for Designers & Developers – Dont suck at design.7z [Udemy] Typography for Designers & Developers – Dont suck at design_Subtitles.7z

  Channel    and      Group

下载说明：用户需登录后获取相关资源
1、登录后，打赏30元成为VIP会员，全站资源免费获取！
2、资源默认为百度网盘链接，请用浏览器打开输入提取码不要有多余空格，如无法获取 请联系微信 yunqiaonet 补发。
3、分卷压缩包资源 需全部下载后解压第一个压缩包即可，下载过程不要强制中断 建议用winrar解压或360解压缩软件解压！
4、云桥网络平台所发布资源仅供用户自学自用，用户需以学习为目的，按需下载，严禁批量采集搬运共享资源等行为，望知悉！！！
5、云桥网络-CG数字艺术学习与资源分享平台，感谢您的赞赏与支持！平台所收取打赏费用仅作为平台服务器租赁及人员维护资金 费用不为素材本身费用，望理解知悉！