Graphic Design · Beginner level

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

Wireframes, Mockups and Prototypes

Plan structure before style.

In this lesson you will

  • Distinguish wireframes, mockups and prototypes
  • Create a wireframe

Key concepts

wireframemockupprototypeuser goals

The lesson

A wireframe is a simple grey sketch of structure and content; a mockup adds the real visual design; a prototype links screens so people can click through.

Start from what users need to do — find opening hours, see products, call or message — and design the layout around those tasks.

Wireframes are quick to change, so test ideas there before spending time on visuals.

Step by step

  1. List user goals for the page.
  2. Sketch a paper wireframe.
  3. Recreate it in Figma.
  4. Ask a classmate to find key information.

Practice activity

Wireframe the business's mobile page.

Expected result: A wireframe that supports the main user tasks.

Check your understanding

  1. What does a wireframe show?

    Show answer

    Structure and content without visual styling.

  2. What does a prototype add?

    Show answer

    Clickable links between screens.

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.