Description

In website design, the element of every layout plays a vital role. Throughout the Diploma in Typography for UI Designers course, you will learn the basics of typography for web and mobile UI to make the copy powerful.

The course teaches Font Pairing, Web Typography, App Typography & Vertical Rhythm. At first, you will be introduced to the typography terms and anatomy and learn how to create stunning and elegant web and mobile app design by using meaningful fonts. The course covers the use of fonts, line-height and letter spacing, Google android typography, using Vertical Rhythm in Bootstrap, balancing your design by using LEGO Blocks method, connecting your Photoshop Screen to iPhone or Android Device, and more.

Upon completion, you will be able to convert your boring design into Dribbble level by applying the acquired techniques.

What Will I Learn?

Create elegant web & Mobile app design by selecting and pairing meaningful fonts
How to use white space effectively by using Vertical Rhythm and Modular Grid
Dramatically improve your boring designs with Modular Grid & Baseline Grid
Learn about Typography Classes and Anatomy
Learn about how to use line-height and letter spacing effectively
Learn about IOS App Typography and understand different IPhone Screen siz
Learn Google Android Typography, its scale and its SP unit of type
How to connect your Photoshop Screen to IPhone or Android Device
How to balance your design using LEGO Blocks method
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 for Developers
How to use padding, margins and other elements to create Vertical Rhythm in CSS for Developers
How to use Vertical Rhythm in Bootstrap for Developers
Learn when to use em, rem, vm or % font-size units for Developers
How to set up Typography Scale using online tools easily for Developers

Requirements

Must have good knowledge of Adobe Photoshop (For Designers)
Must know HTML and CSS (For Developers)
Download and Install Adobe Photoshop Latest version

Introduction to Typography
	1.2.Intro to typography course	00:05:00
	1.3. how typography cousre is laid out	00:02:00
	1.4.What are Font Families	00:05:00
	1.5.typography-antomy-terms	00:07:00
	1.6.Humanist Old and Transitional	00:07:00
	1.7.Sans-Serif Script Other Sans	00:06:00
	1.8. Line-length in Typography	00:03:00
	1.9.Alignments of your text	00:05:00
	1.10.Line-height matters	00:07:00
	1.11.Letter Spacing kerning	00:05:00
	1.12.exercise to apply all we learned	00:11:00
More about Typography
	2.1.Different Types of Hyphens & Dashes	00:02:00
	2.2. About Quotation Marks	00:03:00
Typography Scales and Grids
	3.1.1Expanding Scales-NEW	00:07:00
	3.1.Roles Of Typefaces-1	00:05:00
	3.2.Typography Scale-1	00:03:00
	3.3Type Hierarchy Online Tools	00:05:00
	3.4.How Many Levels Of Hierarchy-update	00:03:00
	3.5.Vertical Rhythm-updated	00:05:00
	3.6.Vertical Rhythm In Photoshop	00:07:00
	3.7.exercise Vertical Rhythm-1	00:12:00
	3.8.modular Grid	00:11:00
EXERCISES: Modular + Baseline Grid Design Ultimate Exericse
	4.1.prepare Modular Grid For Design Exericse	00:11:00
	4.2.Modular Design part 1	00:16:00
	4.3.Modular design 2nd	00:10:00
	4.4.Modular Design Refining the design	00:03:00
	4.5.Modulr Design 3rd Layout	00:10:00
How to Select Fonts?
	5.1.how Many Fonts	00:05:00
	5.2.Moods Voices Of Typefaces-	00:13:00
	5.3.colors Efffect On Typo	00:04:00
How to Pair Fonts?
	6.1.Font Pairing Intro-Updated	00:04:00
	6.2.X-height Matching	00:05:00
	6.3.Contrast Matching	00:08:00
	6.4.Look For Similar Features	00:10:00
	6.5.Avoid Too Similarity	00:05:00
	6.6.Pairing Fonts Same Family Designer	00:05:00
	6.7.Online Tools Font Pairing	00:06:00
How to get Variation in text for Great Designs
	7.1.variation with bold italic	00:04:00
	7.2.variation with colors	00:03:00
	7.3.Variation with Reverse-colors updated-	00:03:00
	7.4.variation with lineheight	00:04:00
EXERCISES: Dribbble LEVEL Designs
	8.1. Dribbble Hero Design preperation	00:05:00
	8.2.dribbble Hero Design V1 Part 1	00:16:00
	8.3.dribbble Hero Design V1 Part 2	00:16:00
	8.4. Dribbble Hero Variation Intro	00:04:00
	8.5. Dribbble Hero Variation 2 Part 1	00:08:00
	8.6. Dribbble Hero Variation 2 Part2	00:06:00
Exercise: Social Media Ad Design with 3 different fonts
	9.1.summer Discount Ad DesignPreperations	00:04:00
	9.2 Preparing base of design	00:07:00
	9.3. Adding Text and styles	00:14:00
	9.4.final Adjustments	00:03:00
Nature Health Themed Typography Exercises
	10.1.juicy Design Exercise Preperations-1	00:03:00
	10.2.making Of Juicy Design-2	00:16:00
	10.3.juicy Designs Final-3	00:12:00
Typography for Iphone and Android App Designs (Mobile App Typography)
	11.1 Intro IOS point sizing	00:05:00
	11.2.IOS Font Specs	00:03:00
	11.3.Designing multiple IOS Screens	00:14:00
	11.4. Student Question About Resoltutions	00:14:00
	11.5.connect Your Iphone With Photoshop	00:05:00
	11.6. Android Typography	00:04:00
	11.7.android Design Exercise For All Sizes	00:09:00
Typography for Web Developers
	12.1.Using Google Fonts	00:04:00
	12.2.using Premium Fonts	00:06:00
	12.3.Intro to css font sizigin	00:03:00
	12.4.what Is Em Font Size	00:08:00
	12.5.What is rem font size	00:05:00
	12.6.How percentage font size works	00:04:00
	12.7.How vw font unit works	00:04:00
Responsive Typography for Developers
	13.1.how Vertical Rhythm Works In CSS	00:08:00
	13.2.Gridlover Exercise	00:08:00
	13.3.custom Typographic Scale Boostrap-3	00:13:00
	13.4.dont Use Code From Typescale	00:02:00
New and Latest in Typography
	14.1.responsive Typography Intro	00:07:00
	14.2.different Ratios And Scales In Responsive Typography	00:10:00
	14.3.percentage Value Technique For Responsive Type	00:12:00
	15.1 Color Fonts	00:05:00
	15.2 variable-fonts101	00:08:00

Course Images

Diploma in Typography for UI Designers

By iStudy UK

Booking options

Highlights

Description

What Will I Learn?

Requirements

About The Provider

Tags

Reviews