Diploma in Typography for UI Designers
In website design, the element of every layout plays a vital role. Throughout the course, you will learn the basics …
Course 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
14 Sections 77 lectures 8 hours 50 mins in total
-
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
-
2.1.Different Types of Hyphens & Dashes
00:02:00 -
2.2. About Quotation Marks
00:03:00
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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 Reviews
No Reviews found for this course.