Sketch before you build
An architect (a person who designs buildings) draws a house before the builders start. A mistake on paper costs nothing. A mistake in a built wall costs much more.
Software designers do the same. They draw screens first. Then they test the drawing with real people.
Key words
| Word | What it means |
|---|---|
| User interface (UI) | The screens, buttons and words a user sees and touches. |
| Wireframe | A simple black-and-white drawing of a screen. It shows layout, not style. |
| Style guide | A document that sets the colours, fonts, spacing and button styles for a product. |
| Clickable prototype | A model of the product that you can click through. The buttons only move between screens. Nothing really works behind them. |
| Layout | Where things are placed on a screen. |
| Component | A reusable part of a screen, such as a button or a menu. |
| Feedback | What the users say about the design after they try it. |
The cells students fill in are left blank in this preview.
Try it: a wireframe
<div class="screen">
<div class="box">Logo</div>
<div class="box tall">Map: where is my bus?</div>
<div class="box">Button: Buy a ticket</div>
<div class="box">Menu: Home | Tickets | Help</div>
</div>
What is a wireframe?
A wireframe is a very simple drawing of one screen. It uses grey boxes and plain words.
It has no colour and no real pictures. That is the plan. People look at the layout, not at the colour. Changing a box takes one minute.
Three UI design tools
| Tool | What it is | When you make it | Who looks at it |
|---|---|---|---|
| Wireframe | A grey drawing of each screen | First | The team and the client |
| Style guide | The colours, fonts, spacing and button styles | After the layout is agreed | Designers and developers |
| Clickable prototype | Screens you can click through | Before coding | Real users, for testing |
The cells students fill in are left blank in this preview.
Quick check
Have a go
Quick check
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
A mini style guide
| Part | Rule | Example |
|---|---|---|
| Main colour | Used for main buttons | Green, #0a7d32 |
| Text colour | Dark text on a light background, so it is easy to read | Almost black, #222 |
| Heading font | One font for all headings | Sans-serif, bold, 24 px |
| Spacing | The same gap between items | 16 px (a px is a pixel, one tiny dot of the screen) |
| Buttons | The same shape and size everywhere | Rounded, 40 px high |
The cells students fill in are left blank in this preview.
The clickable prototype
A clickable prototype looks like the real product. You can click a button and move to the next screen.
But nothing really works behind it. A Pay button only shows the next screen. It takes no money. It is only for testing. Watch a user try it. If they cannot find their way, change the design before you write the real code.
Try it: click between screens
<div id="home" class="screen">
<h1>Home</h1>
<button id="go-list">See tickets</button>
</div>
<div id="list" class="screen" hidden>
<h1>Tickets</h1>
<!-- Add two tickets and a Back button. -->
</div>