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
Course Curriculum
| 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 | ||
FAQs
This course is for anyone who's interested in this topic and wants to learn more about it. This course will also help you gain potential professional skills.
No prior qualifications are needed to take this course.
You can study this course from wherever and whenever you want. You can study at your own pace and from any device. Just log in to your account from any device and start learning!
Yes, there is a test at the end of the course. Once you’ve completed all the modules of the course, you will have to give a multiple-choice test. The questions will be based on the topics of the modules you studied. And of course, you can take the test at any time, from any device and from anywhere you want.
Don’t worry if you fail the test, you can retake it as many times as you want.
You don’t have to wait a minute after your payment has been received, you can begin immediately. You will create your login details during the checkout process and we will also send you an email confirming your login details.
We make the payment process easy for you. You can either use your Visa, MasterCard, American Express, Solo cards or PayPal account to pay for the online course. We use the latest SSL encryption for all transactions, so your order is safe and secure.
After you complete the course, you’ll immediately receive a free printable PDF certificate. Hard Copy certificate is also available, and you can get one for just £9! You may have to wait for 3 to 9 days to get the hard copy certificate.
