Cover lesson · Design Technology · Year 7 · Beginner

Designing an app icon, one pixel at a time

DCF: Producing → Creating digital content

Name: Class: Date:

Cover teacher — you need no subject knowledge and no computers

Print: this sheet, one per pupil, and the stimulus sheet "App icon design brief", one between two. Print the stimulus in colour if you can, because Icon 3 is about colour. Pupils need a pencil and ideally coloured pencils; if there are none, they write a letter code in each square instead, which works just as well.

Run: 5 min read the brief and the six rules · 8 min Step 1, judge four icons · 10 min Step 2, three quick ideas · 2 min Step 3, choose colours · 15 min Step 4, the 16 × 16 design · 7 min Step 5, the shrink test with a partner · 5 min Step 6, count and check.

Collect: this sheet. There is no single right icon; the worked example sheet shows a secure one and the answers to Step 1. The one thing worth checking is Step 6: the pixel counts must add up to 256.

What you are doing

Every app on a phone is recognised by its icon, and an icon has to work when it is only about a centimetre across. You are going to judge four real-looking icons, then design your own icon for Ble?, an app that helps new Year 7 pupils find their way around school. You will build it the way a screen does — out of pixels, each one a single colour — and then test whether it still works when it is shrunk.

Step 1 — judge four icons

Look at the four icons on the stimulus sheet, big and small. For each one, write one thing that works, what goes wrong when it is small, and the number of any rule it breaks.

Icon	One thing that works	What goes wrong when it is small	Rule(s) broken
1 Weather
2 Bin day
3 Bus times
4 Homework

Which icon is the best, and why?

Step 2 — three quick ideas

Read the brief for Ble? on the stimulus sheet. Sketch three different ideas, fast, in pencil. Under each, write the one idea it shows. Aim for three different objects or symbols, not three versions of the same one.

Which idea will you develop? Give one reason linked to the rules.

Step 3 — choose your colours

Choose no more than 3 colours from the palette on the stimulus sheet. Make sure the shape and the background have strong contrast.

Job	Letter code	Colour name and hex code
Background
Main shape
Detail (optional)

Step 4 — your icon on a 16 × 16 grid

Every square is one pixel and must be one colour only — no half squares. Colour it in, or write the letter code. Tip: draw the main shape's outline lightly first, then decide square by square.

Step 5 — the shrink test

(a) Redraw your icon on the 8 × 8 grid. Each new pixel stands for a 2 × 2 block of your big grid: rows 1–2 and columns 1–2 become one pixel, and so on. Give it the colour that fills most of the block. If it is a tie, two and two, choose whichever keeps the shape clearest.

(b) Show only your 8 × 8 grid to a partner for 3 seconds. Do not tell them anything. Ask: "What do you think this app does?" Write down exactly what they said.

(c) What was lost when you shrank it? What would you change so it survives?

Step 6 — count and check

Count how many pixels of each colour your 16 × 16 icon uses. A 16 × 16 grid has 16 × 16 = 256 pixels, so your counts must add up to 256.

Colour	Pixels	Check
		Add them up: ______ + ______ + ______ = ______

Tick the rules your icon keeps: 1 ☐ 2 ☐ 3 ☐ 4 ☐ 5 ☐ 6 ☐ Then write one improvement you would make next time.

Step by step

5 min — Read the six rules and the brief on the stimulus sheet.
8 min — Step 1: judge the four icons at arm's length.
10 min — Step 2: three quick, different ideas; choose one.
2 min — Step 3: pick up to three colours.
15 min — Step 4: build the icon on the 16 × 16 grid. On a computer, open Piskel, set the canvas to 16 × 16 and type your hex codes into the colour picker.
7 min — Step 5: shrink it to 8 × 8 and do the 3-second test.
5 min — Step 6: count the pixels and check the rules.

Success criteria

I can judge an icon against design rules and explain what goes wrong when it is shown small.
I can sketch three different ideas and choose one for a reason.
I can build an image out of pixels, one colour per pixel, using no more than three colours with strong contrast.
I can test my design by shrinking it and asking someone else what it shows, and I can say what I would change.
I can check my work with numbers: my pixel counts add up to 256.

If you finish early

Design a second version of your icon for dark mode, when the phone's background is black. Which of your colours would you swap, and why?
A 1024 × 1024 icon has 1024 × 1024 pixels. Work out how many that is, and how many times more pixels than your 16 × 16 grid.
Redesign Icon 1, the weather app, so it keeps rules 1 to 5. Sketch it in a corner of this sheet.