Graphic Design · Beginner level

Beginner level · Module 5: UI and Layout Basics · Lesson 2 of 3

Grids and the 8-Point Spacing System

Use consistent structure and spacing on screens.

In this lesson you will

  • Apply a layout grid
  • Use an 8-point spacing scale

Key concepts

columns and guttersmargins8-point scaleconsistency

The lesson

Layout grids divide the screen into columns with gutters, helping elements line up. Mobile screens often use four columns.

An 8-point spacing system uses multiples of 8 (8, 16, 24, 32…) for spacing and sizes, which keeps layouts consistent and easy to build.

Apply the brand's colours and type to turn the wireframe into a mockup.

Step by step

  1. Add a four-column grid.
  2. Align elements to it.
  3. Apply 8-point spacing.
  4. Apply brand styles.

Practice activity

Turn the wireframe into a mockup.

Expected result: A consistent mockup using the grid and spacing scale.

Check your understanding

  1. What values does an 8-point system use?

    Show answer

    Multiples of 8.

  2. Why use a layout grid?

    Show answer

    To align elements consistently.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.