Skip to content
Chapter 03 of 05 · 3 lessons · ~27 min

Visual Design Basics

Choose readable typography, build a color palette that works and lay pages out on a grid.

YOUR PROGRESS0%
/ Lessons in this chapter
08
Typography for UI Design How to choose fonts, build a type scale and create clear hierarchy that makes interfaces easy to read. Coming soon
09
How to Choose a Color Palette for a Website How to build a practical website color palette with brand, neutral and feedback colors that pass contrast checks. Coming soon
10
Layout Grids in Figma How to set up column grids in Figma and use them to align layouts consistently across screens. Coming soon

Chapter practice task

Task: Define the typography, color palette and grid for your landing page

  1. Choose a font pairing and create a type scale with text styles.
  2. Build a color palette with a primary color, neutrals and feedback colors, and check contrast.
  3. Set up a 12-column desktop grid and a 4-column mobile grid.
  4. Apply all three to your wireframe to create the first visual design.

By the end of this chapter

  • Your text is readable and has clear hierarchy
  • Your colors look intentional and pass contrast checks
  • Your layouts align to a consistent grid

Quick answers for this chapter

How many fonts should I use?

One or two families. Use weights and sizes for variety.

How many colors?

One primary brand color, one optional accent, a range of neutrals and a few feedback colors (success, warning, error).

Do I need a grid?

Yes. Grids make alignment consistent and speed up layout decisions.