Prepare Modular Grid | LEARNUXID

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Typography, Colors and Layout Master Class for Designers and Developers (Bundle of 3 Courses)

Introduction to Typography Basics

Intro to Typography Course (4:40)
How this course is laid out (2:02)
What are font families (5:09)
Typography Anatomy and Terms (6:36)
Humanist (Old) and Transitional Typefaces (6:45)
Sans Serif and Script Typefaces (5:34)
Line Length in Typography (3:14)
Alignments of your text (4:55)
Line-height Matters (6:39)
Kerning/ Letter Spacing (4:47)
Tracking in Typography (8:56)
Exercise All we have learned so far (10:58)
Download Typography Resources and Design Files

A bit more about Typography

Quotation Marks in Typography (2:52)
Types of Hyphens and Dashes (2:28)

Typography Scales and Vertical Rhythm

Roles of Typefaces (4:37)
Typography Scales (3:00)
Type Hierarchy Online Tools (5:28)
Expanding Type Scales (6:56)
How many levels of Type Hierarchy (3:13)
Vertical Rhythm (5:13)
Vertical Rhythm in Photoshop (7:02)
Exercise Vertical Rhythm (12:04)
Creating Modular Grid (11:07)

Modular Baseline Grid with Exercise

Prepare Modular Grid (10:44)
Modular Design Part 1 (16:21)
Modular Design Part 2 (10:02)
Refining your Modular Design (3:10)
Modular Design Grid Layout (9:30)

How many fonts + Typography Voice or Moods

How many fonts do we need? (5:18)
Moods or Voices of Typefaes (12:42)
Effect of Colors on Typefaces (3:57)

Pairing Typefaces - 5 Techniques

Intro to Type Pairing (3:49)
Matching X-Height (5:28)
Matching with Contrast (7:47)
Looking for Similarities (10:04)
Avoid too much similarities in Typefaces (4:15)
Pairing typefaces from the same Designer (5:14)
Online tools for type pairing (5:31)

Contrast and Variation with Type

Variation using Bold and Italic (3:30)
Color Variations with Typography (2:57)
Variation with Line-height (3:38)
Variation with Reverse Colors (3:02)

Dribbble level Hero/Header Design Exercise

Hero Header Design Preperations (5:00)
Design Dribbble like Header Part 1 (16:19)
Design Dribbble like Header Part 2 (15:31)
Design Dribbble like Header Part 3 - Variations (3:52)
Design Dribbble like Header Part 4- Variations (7:41)
Design Dribbble like Header Part 5- Variations (5:34)

Social Media Ad Design Exercise

Summer Discount Advertisement Preperation (3:59)
Prepare base of Ad Design (6:38)
Adding Text and Styles (14:26)
Final Refinements (2:54)

Juicy Food header Design Exercise

Juicy Design Preperations (3:26)
Making of Juicy Design (15:58)
Finalizing Juicy Header Design (12:03)

Typography for Web Developers

Using Google Fonts (3:36)
Why use Premium Typefaces? (5:37)
Intro to Font Sizing in CSS (2:37)
What is em font size (8:11)
What is rem (4:34)
How vw units work? (4:09)
Precentage Font sizes in CSS (4:15)

Vertical Rhythm for Web Developers

How Vertical Rhythm works in CSS (8:28)
Gridlover Exercise (8:05)
Custom Typographic Scales Bootstrap (12:33)
Dont use Typescale Code (2:22)

Responsive Typography for Developers

Intro to Responsive Typography (6:55)
Ratios and Scales in Web Typography (9:44)
Percentage value technique in Web Typography (11:38)

What's new in Typography

Variable Fonts 101 (7:52)
What are Color Fonts? (5:13)

Mobile Typography - Using Fonts for IOS, Google Material and Responsive Web Design

IOS Apple iPhone Typography (14:47)
Google Material Design Typography (10:02)
Responsive Web Design Typography (7:08)
IOS Typography Resources
Google Material Typography Resources

Teach online with

Prepare Modular Grid

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock