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 …
GET THIS COURSE AND 3000+ OTHERS FOR ONLY £49 PER YEAR. FIND OUT MORE
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.
After successfully completing the course, you will be able to get the and internationally accepted certificate to share your achievement with potential employers or include it in your CV.
SAVE Upto 94% - Ends Soon!
or
All courses now £49
Related Courses
5 hours, 47 minutes
15
