Graphic Design · Beginner level

Beginner level · Module 5 of 5 · 10 guided hours

UI and Layout Basics

Plan screens and pages with wireframes, grids, spacing and accessible touch targets, and complete the level project.

Learning objectives

  • Distinguish wireframes, mockups and prototypes
  • Use grids and an 8-point spacing system
  • Design accessible, touch-friendly interfaces

Topics

  • wireframes and mockups
  • Figma basics
  • layout grids
  • 8-point spacing
  • touch targets
  • project completion

Lessons

  1. Lesson 1 Wireframes, Mockups and Prototypes

    Plan structure before style.

    wireframemockupprototypeuser goals

  2. Lesson 2 Grids and the 8-Point Spacing System

    Use consistent structure and spacing on screens.

    columns and guttersmargins8-point scaleconsistency

  3. Lesson 3 Accessible Interfaces and Project Completion

    Make interfaces usable for everyone and complete the level project.

    touch target sizereadable textcontrastpresentation

Practical activity

Wireframe and mock up a simple mobile page for the business in Figma, then complete the Starter Brand Kit.

Expected outcomes

  • Structured interface layouts
  • A complete brand kit

Assessment

Level project assessed against its criteria.

Free taster lesson UI/UX Design Basics Read a free self-study lesson on this topic in the Free Course Library.

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.