UI Design Bootcamp Master Typography Colour Grids

Level up your design eye and improve your intuition to craft aesthetically satisfying UI designs
UI Design Bootcamp Master Typography Colour Grids
File Size :
3.36 GB
Total length :
9h 30m



Rob Sutcliffe


Last update




UI Design Bootcamp Master Typography Colour Grids

What you’ll learn

Intuitively create more satisfying compositions
Create a colour pallet that works specifically for UI
Have a trained eye to spot how the values of colours
Create a grid that works for modern web applications
The history of typography
The physics of light
Select appropriate typefaces
Create a typographic system
Select or create a visual language
Identify how colour adapts in different contexts
Compose visually stimulating UI design

UI Design Bootcamp Master Typography Colour Grids


You should ideally know how to use some design software. Figma is preferred. Adobe XD or Sketch would also be okay.
Some experience designing user interfaces would be an advantage.
You’ll need lots of extra time to work and share your projects


The most crucial aspect to form a great user experience is having a beautifully crafted user interface. Some small changes to your aesthetics can have a huge impact on the experience of your users.If you’re designing using a web application, you’re making decisions about typography, colour and composition that will affect the branding, style, usability and user experience of your application. You’re already making these decisions but are you aware of their impact. Very subtle use of typography and colour can have enough personality that we don’t need any other visuals. We can give life to a dull block of text and it can make it easier or harder for our users to read. Getting a few simple choices right can make or break the application. Typography is 95% of what we see on a web application, it dictates every other design decision. yet few people really stop to learn how to use typography to their advantage. Colour is what makes us differentiate everything in a design. If there was no colour we’d not be able to identify anything on a design. But it also has the most emotional connection of anything in a design and it can’t be easily categorised, as colours appear very different depending on their use and context. We have to use colour, so let’s learn to use colour to our advantage. A grid makes our designs feel uniform. If we know how to use one, it’s the single thing that can make a design instantly feel more professional. But we need to understand the limitations and advantages of recent web development to create a grid that looks good on paper and still looks good on the web. What do I get in this course?To improve your skill in each of these areas: you’ll do a combination of learning some underlining theory, complete challenges to improve your intuition and some practical exercises to create some great-looking designs. A short description of each module is below.Composition: practical exercises to improve your intuition when placing elements on a pageTypography: History and background of different type classifications Selecting and Pairing: How to choose a typeface and how to select complimentary typefaces that work togetherReadability: How do we read and how can we make it easier for people to read with our typographic choicesStyling & Formatting: What extra style can we add to our typography and how can we use this to improve our visual hierarchyGrid Systems: The types of grids used in design and some of the technical limitations for modern application designBuilding our Grid: How to ensure we set up the grids in our design software to work when developing applicationsColour Interactions: practical exercises to improve our intuitive use of colour when used in different contextsHow Colour Works: The physics behind how light works and how it creates colourColour Attributes: How to make changes to a colour to make it more useful in your designCreate our Pallet: practical steps to create a colour pallet that works specifically for UIVisual Language: Choose photos, icons, illustrations and other visuals to support the designIs this course for me?Ideally, you’ll already have spent some time designing websites and/or applications. Every aspect of the course is created with beginners in mind but you may find you get more out of the course if you’ve already created some designs. You’ll also ideally need to know how to use some design software. I recommend Figma, but Adobe XD, Invission Studio, Sketch or some similar software will also be okay.The course is created with designers in mind but it may also be of interest to front-end developers or product owners. There is a money-back guarantee with no questions asked and you can message me with any specific questions.


Section 1: Introduction

Lecture 1 How To Use This Course

Lecture 2 Submitting Your Work

Lecture 3 What To Expect From This Course?

Section 2: Composition

Lecture 4 Introduction

Lecture 5 Expression

Lecture 6 Balance

Lecture 7 Contrast

Lecture 8 Form

Lecture 9 Hierarchy

Lecture 10 Relations

Lecture 11 Alignment

Lecture 12 Sequence & Pace

Lecture 13 Summary

Section 3: Typographic Classifications

Lecture 14 Importance of Typography

Lecture 15 Typeface or Fonts

Lecture 16 Web Typography

Lecture 17 Non Verbal Communication

Lecture 18 Anatomy of Type

Lecture 19 Printing Press

Lecture 20 Serif Typeface

Lecture 21 Sans Serif Typeface

Lecture 22 Summary

Section 4: Selecting Typefaces

Lecture 23 Inspiration

Lecture 24 Define The Brand

Lecture 25 Font Shops

Lecture 26 Body Text

Lecture 27 Single Typeface

Lecture 28 Display Text

Lecture 29 Meta Information

Lecture 30 Font Pairing

Lecture 31 Font Pairing Practice

Lecture 32 Summary

Section 5: Readability

Lecture 33 How We Read

Lecture 34 Readability

Lecture 35 Aspect Ratio

Lecture 36 Viewing Distance

Lecture 37 Large Text

Lecture 38 Line Length

Lecture 39 Line Height

Lecture 40 Localisation

Lecture 41 Summary

Section 6: Styling & Formatting Text

Lecture 42 Vertical Grid

Lecture 43 Visual Hierarchy

Lecture 44 Type Scale

Lecture 45 Create A Type Scale

Lecture 46 Create A Type Scale Challange

Lecture 47 Design Systems

Lecture 48 Figma

Lecture 49 Sketch

Lecture 50 Other Software

Lecture 51 Styling

Lecture 52 Ligatures

Lecture 53 Small Caps

Lecture 54 Letter Spacing

Lecture 55 Kerning

Lecture 56 Paragraph Alignment

Lecture 57 Numbers and Date

Lecture 58 Typographic Systems

Lecture 59 Summary

Section 7: Grid Systems

Lecture 60 Geometry

Lecture 61 Types of Grid

Lecture 62 Importance of Grids

Lecture 63 Box Modal

Lecture 64 Flex Box

Lecture 65 Css Grid

Lecture 66 Responsive vs Fluid

Lecture 67 Anatomy of a Grid – Part 1

Lecture 68 Anatomy of a Grid – Part 2

Lecture 69 Summary

Section 8: Building Our Grid

Lecture 70 Align to Grid

Lecture 71 Embedded Grid

Lecture 72 Building our Grid – Part 1

Lecture 73 Building our Grid – Part 2

Lecture 74 Building our Grid – Part 3

Lecture 75 Summary

Section 9: Colour Interactions

Lecture 76 Introduction

Lecture 77 One Colour

Lecture 78 Two Colours

Lecture 79 Transpose Colours

Lecture 80 Transparency

Lecture 81 Transparency Range

Lecture 82 Colour Composition

Lecture 83 Summary

Section 10: How Colour Works

Lecture 84 Additive and Subtractive

Lecture 85 Waves

Lecture 86 Trichromatic Process

Lecture 87 Chromaticity

Lecture 88 Summary

Section 11: Colour Attributes

Lecture 89 Values

Lecture 90 Values Exercises

Lecture 91 Brightness

Lecture 92 Brightness Examples

Lecture 93 Colour Matching

Lecture 94 Saturation

Lecture 95 Saturation Example

Lecture 96 Contrast

Lecture 97 Contrast Example

Lecture 98 Summary

Section 12: Create Our Palette

Lecture 99 Colour Spaces

Lecture 100 Colour Harmonies

Lecture 101 Emotions

Lecture 102 Emotions Exercise

Lecture 103 Colour Purpose

Lecture 104 Summary

Section 13: Visual Language

Lecture 105 Photography

Lecture 106 Shapes

Lecture 107 Illustrations

Lecture 108 Textures

Lecture 109 Patterns

Lecture 110 Gradients

Lecture 111 Icons

Lecture 112 Summary

Lecture 113 Thank You & Goodbye

Junior user interface designer,Front-end developer interested in learning about design,Product owner,Curious people

Course Information:

Udemy | English | 9h 30m | 3.36 GB
Created by: Rob Sutcliffe

You Can See More Courses in the Design >> Greetings from CourseDown.com

New Courses

Scroll to Top