Typography & Vertical Rhythm for UI Designers and Web Developers

Ahsan Idrisi, UI UX Visual Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
71 Videos (8h 29m)
    • What we will cover in this course

      4:35
    • Introduction to Typography

      4:40
    • About Font and Font Families

      5:09
    • Typography Anatomany terms

      6:36
    • Humanist Old and Transitional

      6:45
    • Sans Serif and Script

      5:34
    • About Line Length

      3:14
    • Text Alignements

      4:55
    • Line-Height (Leading)

      6:39
    • Letter Spacing (Kerning)

      4:47
    • Design Exercise to apply what we have learned so far

      10:58
    • Hyphen, en & em dash usage

      2:28
    • Using Quotation marks properly

      2:52
    • Roles of Typefaces

      4:37
    • Typographic Scales

      3:00
    • Online Tools for Typographic Scales

      5:28
    • How many Levels of Typographic Hierarchy do i need?

      3:13
    • Vertical Rhythm

      5:13
    • Vertical Rhythm in Photoshop

      7:02
    • Design Exercise for Vertical Rhythm

      12:04
    • Intro to Modular Grid

      11:07
    • Preparing Grid for Blog Layout Design Exercise

      10:44
    • Design First Blog Layout

      16:21
    • Design Second Layout for Blog

      10:02
    • Refining the 2nd Layout Design

      3:10
    • Last layout for Blog Design

      9:30
    • How many fonts to select?

      5:18
    • Moods/Voices of Typefaces

      12:42
    • Effect of Color on Typeface Mood (Voice)

      3:57
    • Introduction to Font Pairing

      3:49
    • x-height matching

      5:28
    • Pairing with contrast

      7:47
    • Pairing typefaces on similar features

      10:04
    • Avoid too much similarity

      4:15
    • Pairing fonts from same designer or family

      5:15
    • Online Tools for Font Pairing

      5:31
    • Dribbble Design Exercise Preperations

      5:00
    • Hero Header Design Part 1

      16:19
    • Hero Header Design Part 2

      15:31
    • Hero Header Design -2nd Theme

      3:52
    • Hero Header Design - 2nd Theme Part 1

      7:42
    • Hero Header Design - 2nd Theme Part 2

      5:34
    • Social Media Ad Design Exericse → Preperations

      3:59
    • Social Media Ad Design Part 1

      6:38
    • Social Media Ad Design Part 2

      14:26
    • Social Media Ad Design Final Touches

      2:54
    • Juicy Design Exercise - Preperations

      3:26
    • Juicy Typography Design Exercise Part 1

      15:58
    • Juicy Typography Design Exercise Part 2

      12:03
    • Intro to Point (PT) sizing in IOS Devices

      12:00
    • IOS Typography Specifications

      3:22
    • Designing Multiple resolution IOS Screens with Photoshop

      13:57
    • Student Question about Resolutions

      13:55
    • Mirroring your Photsshop to Iphone

      5:04
    • Android Typography and Scales

      4:16
    • Desinging for Multiple Android Screen Sizes

      8:30
    • For Developers → Using Google Fonts

      3:36
    • For Developers → Using Premium Fonts

      5:38
    • For Developers → CSS Font Sizing

      2:37
    • For Developers → em Font Sizing

      8:11
    • For Developers → rem Font Sizing

      4:34
    • For Developers → % Font Sizing

      4:15
    • For Developers → vw Font Unit

      4:09
    • For Developers → How Vertical Rhythm works in CSS

      8:28
    • For Developers→ Gridlover Coding Exercise

      8:05
    • For Developers→ Custom Typographic Scale Bootstrap

      12:33
    • For Developers → Dont use code from Typescale

      2:22
    • For Developers → Intro to Responsive Typography

      6:55
    • For Developers→ Different Scales for Multiple Screen Sizes

      9:44
    • For Developers → Percentage CSS unit for Responsive Typography

      11:39
    • Student QA → How to Expand Typographic scale for Responsive Web Design usage

      6:56

About This Class

Have you ever wondered that Why the designs of Dribbble and Behance looks so elegant. One of the secrets behind those great Web and Mobile App Designs is perfect use of Font Combinations, powerful usage of white space and grids.

To learn this Super Power of Typography and use of Time and Space, Take this course

This course main focus is on Typography for Designers and Developers. All great designers possess the skill of Typography and their usage of white space is always out class.

Take Away For Designers :-

In this course we will convert your boring designs to Dribbble level designs by learning

  • Basics of Typography Classes and Anatomy
  • Learn how to make your text look interesting by using variation techniques
  • Create elegant web & Mobile app design by selecting and pairing meaningful fonts
  • How different Moods or Voices of Fonts works
  • Master Font pairing and learn tons of online resources to automatically pair fonts
  • How to use white space effectively by using Vertical Rhythm and Modular Grid
  • Learn about IOS App Typography and understand different IPhone Screen sizes
  • Learn Google Android Typography, its scale and its SP unit of type
  • Use Free Apps to connect your Photoshop Screen to IPhone or Android Device
  • How to balance your design using LEGO Blocks method
  • Dribbble Styled Design Exercises to improve your designs

Take Away For Developers :-

  • How to use padding, margins and other elements to create Vertical Rhythm in CSS
  • How to use Vertical Rhythm in Bootstrap
  • What are absolute & relative font-size units e.g em, rem, vm, % and when to use them?
  • Step by Step coding exercises to apply Baseline Grid for Developers
  • How to show baseline grid in HTML page with just one line of code
  • What font sizes are best standards as Base font Size
  • How to set up Typography Scale using online tools easily
  • A lot of quizzes to test your knowledge

So if you really want to step ahead of your fellow Designers & want to get out of the crowd. 

Requirements to take this Course :-

  • Must have good knowledge of Adobe Photoshop (For Designers)
  • Must know HTML and CSS (For Developers)
  • Download and Install Adobe Photoshop CC2015 or latest version

Take this course now and I will see you inside the course

  • NOT for Novices (Must have some Photoshop Experience)
  • Web Designers
  • Mobile App Designers
  • All Designers who think their design have something missing
  • Web Developers
  • Graphic Designer

130

Students

--

Projects

Ahsan Idrisi

UI UX Visual Designer

I started my Freelancing Career just 8 years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 1 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects
I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing Page design contests.

Worked with Clients all over the world mostly from USA, Australia, UK, and United Arab Emirates while learning a lot about how to deal with clients while freelancing and how to present your work to them

Although I started as a UI Designer 6 years ago but I am playing with Photoshop since the year 2002

My ultimate aim is to make more Awesome UI Designers and ease the pain of learning from new comers in this field of UI Design