We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

UI Design Bootcamp. Master Typography, Colour & Grids

Rob Sutcliffe

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.

Read more

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 page

  • Typography: History and background of different type classifications

  • Selecting and Pairing: How to choose a typeface and how to select complimentary typefaces that work together

  • Readability: How do we read and how can we make it easier for people to read with our typographic choices

  • Styling & Formatting: What extra style can we add to our typography and how can we use this to improve our visual hierarchy

  • Grid Systems: The types of grids used in design and some of the technical limitations for modern application design

  • Building our Grid: How to ensure we set up the grids in our design software to work when developing applications

  • Colour Interactions: practical exercises to improve our intuitive use of colour when used in different contexts

  • How Colour Works: The physics behind how light works and how it creates colour

  • Colour Attributes: How to make changes to a colour to make it more useful in your design

  • Create our Pallet: practical steps to create a colour pallet that works specifically for UI

  • Visual Language: Choose photos, icons, illustrations and other visuals to support the design

Is 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.

Enroll now

What's inside

Learning objectives

  • 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
  • Show more
  • Show less

Syllabus

Introduction
How To Use This Course
Submitting Your Work
What To Expect From This Course?
Read more
Composition
Expression
Balance
Contrast
Form
Hierarchy
Relations
Alignment
Sequence & Pace
Share You Compositions
Summary
Typographic Classifications
Importance of Typography
Typeface or Fonts
Web Typography
Non Verbal Communication
Anatomy of Type
Printing Press
Serif Typeface
Sans Serif Typeface

Test if you've understood the terminology of typography before you continue.

Describe A Typeface
Selecting Typefaces
Inspiration
Define The Brand
Font Shops
Body Text
Select A Body Typeface
Single Typeface
Display Text
Select A Display Text
Meta Information
Font Pairing
Font Pairing Practice
Create A Font Pair
Readability
How We Read
Aspect Ratio
Viewing Distance
Body Font Size for Readability
Large Text
Line Length
Line Height
Localisation
Readability Quiz
Styling & Formatting Text
Vertical Grid
Visual Hierarchy
Type Scale
Create A Type Scale
Create A Type Scale Challange
Type Hierarchy Challenge
Design Systems
Figma
Sketch
Other Software
Styling
Ligatures
Small Caps
Letter Spacing
Kerning
Paragraph Alignment
Numbers and Date
Typographic Systems
Create A Typographic System
Grid Systems
Geometry
Types of Grid
Importance of Grids
Box Modal
Flex Box
Css Grid
Responsive vs Fluid
Anatomy of a Grid - Part 1
Anatomy of a Grid - Part 2
Grid Quiz
Building Our Grid
Align to Grid
Embedded Grid
Building our Grid - Part 1
Building our Grid - Part 2
Building our Grid - Part 3
Create A Grid
Colour Interactions
One Colour
Two Colours

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Develops understanding of color and typography, which are core skills for UI designers
Covers topics heavily relevant to web design, such as grids, composition, and color interactions
Taught by Rob Sutcliffe, an experienced instructor in UI design
Offers practical exercises and hands-on activities to improve design intuition
Includes guidance on creating a UI design style guide for consistency
Provides a strong foundation for students with some experience in UI design

Save this course

Save UI Design Bootcamp. Master Typography, Colour & Grids to your list so you can find it easily later:
Save

Activities

Coming soon We're preparing activities for UI Design Bootcamp. Master Typography, Colour & Grids. These are activities you can do either before, during, or after a course.

Career center

Learners who complete UI Design Bootcamp. Master Typography, Colour & Grids will develop knowledge and skills that may be useful to these careers:
UI Designer
A UI Designer is responsible for the visual design of a website or application. This role requires an understanding of typography, color, and grids. This course can help build a foundation in these areas, which can be helpful for a UI Designer.
UX Designer
A UX Designer improves the user experience of a website or application. This role requires an understanding of typography, color, and grids. This course can help build a foundation in these areas, which can be helpful for a UX Designer.
Web Designer
A Web Designer creates and maintains websites. This role requires an understanding of typography, color, and grids. This course can help build a foundation in these areas, which can be helpful for a Web Designer.
Graphic designer
A Graphic Designer creates visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This role requires an understanding of typography, color, and grids. This course may be useful for a Graphic Designer.
Technical Writer
A Technical Writer creates and edits technical documentation, such as user guides, white papers, and training materials. This role requires an understanding of typography, color, and grids. This course may be useful for a Technical Writer.
Project Manager
A Project Manager is responsible for the planning, execution, and closure of a project. This role requires an understanding of typography, color, and grids. This course may be useful for a Project Manager.
Business Analyst
A Business Analyst is responsible for analyzing business needs and developing solutions to meet those needs. This role requires an understanding of typography, color, and grids. This course may be useful for a Business Analyst.
Art Director
An Art Director oversees the visual style and concepts of a variety of projects, including magazines, newspapers, websites, and advertising campaigns. This role requires an understanding of typography, color, and grids. This course may be useful for an Art Director.
Data Analyst
A Data Analyst collects, analyzes, and interprets data to help organizations make informed decisions. This role requires an understanding of typography, color, and grids. This course may be useful for a Data Analyst.
Creative Director
A Creative Director is responsible for the overall creative vision of a project, including the development of the concept, the design, and the execution. This role requires an understanding of typography, color, and grids. This course may be useful for a Creative Director.
Software Engineer
A Software Engineer designs, develops, and maintains software systems. This role requires an understanding of typography, color, and grids. This course may be useful for a Software Engineer.
Data Scientist
A Data Scientist uses scientific methods to analyze data and extract insights. This role requires an understanding of typography, color, and grids. This course may be useful for a Data Scientist.
Product Manager
A Product Manager is responsible for the development and launch of a product. This role requires an understanding of typography, color, and grids. This course may be useful for a Product Manager.
Scrum Master
A Scrum Master is responsible for facilitating a Scrum team and ensuring that the team follows the Scrum process. This role requires an understanding of typography, color, and grids. This course may be useful for a Scrum Master.
Agile Coach
An Agile Coach helps teams and organizations to adopt and implement Agile practices. This role requires an understanding of typography, color, and grids. This course may be useful for an Agile Coach.

Reading list

We've selected nine books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in UI Design Bootcamp. Master Typography, Colour & Grids.
Classic work on grid systems in graphic design. It provides a comprehensive overview of the different types of grids and how to use them effectively.
Practical guide to web typography. It covers the different aspects of typography that are important for web designers, including legibility, readability, and visual hierarchy.
Practical guide to typography for user interfaces. It covers the different aspects of typography that are important for UX designers, including legibility, readability, and visual hierarchy.
This easy-to-understand book great primer for those with no background in design. It covers the basics of design, including color theory, typography, and layout.
Practical guide to atomic design. It provides a step-by-step process for creating and using atomic design systems to build more consistent and maintainable UIs.
Classic work on design. It provides a comprehensive overview of the principles of design, with a focus on how to design products that are both usable and enjoyable.
Concise and easy-to-understand guide to color theory. It covers the different aspects of color, including its history, its properties, and its uses in art and design.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to UI Design Bootcamp. Master Typography, Colour & Grids.
PowerPoint Kinetic Typography Microsoft PowerPoint...
Introduction To Graphic Design
Kinetic Typography in After Effects: Motion Graphics...
Material Design 3 for Beginners: Building UI Systems
Adobe Illustrator CC – Advanced Training Course
Interior Design Essentials
Building Digital Media using Graphic Design in Google...
Unreal Engine 5.4 : Motion Design
Graphic Design Masterclass Intermediate: The NEXT Level
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser