Presentation: Designing an App Icon

Slide 1 of 7 · Settling starter · Design Technology · Year 7

4 minutes

Designing an app icon, one pixel at a time

Every app on a phone is recognised by its icon, and an icon has to work when it is only about a centimetre across. Today you judge 4 icons, then design your own for Ble?, an app that helps new Year 7 pupils find their way around school.

While the register is called: write your name, class and date on your worksheet, then read the 6 rules and the brief on the stimulus sheet.

Starter question: Which rule says an icon must have no words, and why does it say that?

DCF: Producing → Creating digital content No computers needed · pencil and coloured pencils

Slide 2 of 7 · Today’s brief and key words · Design Technology · Year 7

2 minutes

Your brief: an icon for Ble? that still works when it is shrunk

You will judge 4 icons, sketch 3 ideas, build 1 of them on a 16 × 16 grid in no more than 3 colours, shrink it to 8 × 8 and test it on a partner, then check your pixel counts add up to 256.

Pixel

One square of the grid. Each pixel is 1 colour only, no half squares.

Contrast

How clearly the shape stands out from the background: dark on light or light on dark.

Hex code

A 6-character code such as #215b57: how a computer stores a colour as amounts of red, green and blue light.

DCF: Producing → Creating digital content The 6 rules are on the stimulus sheet: keep it open

Slide 3 of 7 · Step 1: judge 4 icons · Design Technology · Year 7

8 minutes

Step 1: judge the 4 icons at arm’s length

Hold the stimulus sheet at arm’s length. For each icon, write 1 thing that works, what goes wrong when it is small, and the number of any rule it breaks. Then say which icon is best, and why.

Icon	One thing that works	What goes wrong when it is small	Rule(s) broken
1 Weather	The yellow sun stands out well against the navy.	It turns into a blur. The rain lines vanish, the 2 mountains merge, and “TYWYDD” is too small to read. It is a whole picture, not an icon.	1, 2, 4, 5

Step 1 on your worksheet · 8 minutes Judge the small version: that is how users see it

Slide 4 of 7 · Steps 2 and 3: ideas and colours · Design Technology · Year 7

12 minutes

Step 2: 3 quick, different ideas · Step 3: choose your colours

Step 2 (10 min): read the brief for Ble? (Welsh for “Where?”). Sketch 3 different ideas, fast, in pencil, and write the 1 idea each shows underneath. Choose 1 to develop and give 1 reason linked to the rules.

Step 3 (2 min): choose no more than 3 colours from the palette. The shape and the background must have strong contrast.

Model choice: Idea 3, a map pin with a “you are here” centre. A map pin means “where” in every map app, so it works for Welsh speakers and English speakers without any words (rule 5).

Model colours: Background T Teal #215b57 · Main shape W White #ffffff · Detail Y Yellow #f2c230

Steps 2 and 3 on your worksheet · 12 minutes 3 different objects, not 3 versions of the same one

Supply teacher script (no subject knowledge needed)

Say aloud: “Ble? helps new Year 7 pupils find a room like D14 or the Neuadd. Sketch 3 different ideas in the 3 rounded squares, quickly, and write the idea under each. Pick 1 and give a reason from the rules. Then choose up to 3 colours from the palette and write the letter code, name and hex code in the Step 3 table.”

Walk the room: ideas must be 3 different objects or symbols. The model pupil sketched a pin with a question mark, the school building, and a pin with a yellow centre, and rejected the first because the question mark would be too thin at 8 × 8 (rule 2) and the second because windows, a door and a roof are too many details for 16 squares. Pupils must not copy another app’s logo (rule 6). Colours must be from the palette: N navy, T teal, G green, Y yellow, O orange, R red, K black, W white. Reject pale shape on pale background, like Icon 3.

Slide 5 of 7 · Step 4: the 16 × 16 design · Design Technology · Year 7

14 minutes

Step 4: build your icon on the 16 × 16 grid

Every square is 1 pixel and must be 1 colour only, no half squares. Colour it in, or write the letter code (T, W, Y and so on) in each square.

Draw the main shape’s outline lightly in pencil first, then decide square by square.
Use no more than 3 colours, including the background.
Make the shape bold. Thin lines and small details disappear when it is shrunk.
No words or letters anywhere in the icon.

Model tip: the model pin is symmetrical: columns 1 to 8 are a mirror image of columns 9 to 16. Its yellow centre is only a 4 × 4 square, 16 pixels, so it adds interest without making the icon busy. The point was made 4 rows long on purpose, because a short point looked like a fried egg.

Step 4 on your worksheet · 14 minutes, working alone Fill the background squares too: every pixel has a colour

Slide 6 of 7 · Step 5: the shrink test with a partner · Design Technology · Year 7

7 minutes

Step 5: shrink it to 8 × 8, then the 3-second 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 and 2 with columns 1 and 2 become 1 pixel. Give it the colour that fills most of the block; if it is a tie, choose whichever keeps the shape clearest. (b) Show only the 8 × 8 grid to a partner for 3 seconds and ask “What do you think this app does?” Write down exactly what they said. (c) What was lost, and what would you change?

I can judge an icon against design rules and explain what goes wrong when it is shown small.
I can sketch 3 different ideas and choose 1 for a reason.
I can build an image out of pixels, 1 colour per pixel, using no more than 3 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.

7 minutes · partner test Finished early? Design a dark-mode version for a black background

Supply teacher script (no subject knowledge needed)

Say aloud: “Shrink your icon onto the small grid using the 2 by 2 rule. Then show only the small grid to your partner for 3 seconds, say nothing, and ask what the app does. Write their exact words, not a summary. Then write what was lost and 1 thing you would change so it survives. Tick the success criteria you have met.”

Walk the room: in the model, the partner said “Is it a map? Like where something is?”, the yellow centre shrank from 16 pixels to 4, and tied blocks at the top of the pin were given teal to keep the head rounded. Any honest answer is fine, even if the partner guessed wrong; the point is to record it and name a fix.

Extension answers: dark mode: swap the background so the shape still contrasts with black, for example a yellow pin on navy. A 1024 × 1024 icon has 1,048,576 pixels, which is 4,096 times as many as a 16 × 16 grid. A redesigned Icon 1 should keep 1 idea (for example just the sun), bold shapes, strong contrast, 2 or 3 colours and no word.

Slide 7 of 7 · Plenary review: Step 6, count and check · Design Technology · Year 7

5 minutes

Step 6: count your pixels, check the rules, hand in

Count how many pixels of each colour your 16 × 16 icon uses, row by row. Add them up. Tick the rules your icon keeps and write 1 improvement for next time. Then check these answers.

Question	Correct answer
How many pixels are on a 16 × 16 grid, so what must your counts add up to?	16 × 16 = 256. The model icon is 154 teal + 86 white + 16 yellow = 256.
Which of the 4 icons was the best, and which rules did it break?	Icon 2, Bin day: 1 idea, 2 colours, bold shape, strong contrast. It broke no rules.
Why did the bus icon fail when it was small?	Pale yellow on yellow: no contrast (rule 3), so it looked like a plain yellow square.

Check your name and class are on your worksheet Leave stimulus sheets neat on the desk