dcf.cymru stimulus sheet · Design Technology · Year 7

App icon design brief

Four icons to judge, six rules, one brief and one palette. The apps and the school are invented for this lesson.

Four icons to judge

Each icon is shown big, the way its designer saw it on screen, and small, the way a user sees it on a phone's home screen. Hold this sheet at arm's length before you judge them.

TYWYDD TYWYDD Shrunk, as on a phone:Icon 1Tywydd Heddiw (weather) Shrunk, as on a phone:Icon 2Diwrnod Bin (bin day) Shrunk, as on a phone:Icon 3Bws Nawr (bus times) Shrunk, as on a phone:Icon 4Gwaith Cartref (homework)

Six rules for a good app icon

  1. One idea. One simple object or symbol that says what the app does. Not a scene.
  2. Bold shapes. On a phone an icon is only about a centimetre across, and in lists and settings it is smaller still. Thin lines and small details disappear.
  3. Strong contrast. The shape must stand out clearly from the background: dark on light or light on dark.
  4. Two or three colours. More colours make an icon look busy and harder to recognise.
  5. No words. Text is unreadable at small sizes, and the app's name is already written underneath the icon.
  6. Your own design. It must not copy another app's logo. Other people's logos belong to them.

The brief

Client: the Year 7 team at Ysgol Llanbedr-ar-Fryn.

The app: Ble? (Welsh for "Where?"). It helps new Year 7 pupils find their way around a big new school: type in a room like "D14" or "Neuadd" and it shows the way.

Users: 11-year-olds in their first weeks at secondary school, some Welsh-speaking and some not. Often in a hurry, between lessons.

The icon must: fit a 16 × 16 pixel grid; use no more than 3 colours from the palette below, including the background; contain no words or letters; still be recognisable when shrunk to 8 × 8; and look different from the four icons above.

The palette

Designers usually make an icon as a large square image — 1024 × 1024 pixels is a common size — and the phone shrinks it. Every pixel is one colour. Colour your grid with pencils, or write the letter code in each square if you have no colours.

NNavy#1d3557 TTeal#215b57 GGreen#2a9d8f YYellow#f2c230 OOrange#e76f51 RRed#c73333 KBlack#1f1f1f WWhite#ffffff

The six-character codes such as #215b57 are hex codes: how a computer stores each colour as amounts of red, green and blue light.