Cover lesson · Computer Science · Year 8 · Beginner

Wireframing a mobile app

DCF: Producing → Sourcing, searching and planning digital content

Name: Class: Date:

Cover teacher — you need no subject knowledge and no computers

Print: this sheet, one per pupil, single-sided if you can so the drawing frames are not on the back of the brief. Pencils and rulers help; coloured pens are not needed. This is a planning lesson — nobody builds anything.

Run: 5 min read the client brief · 10 min fill in the audience and purpose table · 10 min list the content each screen needs and where it comes from · 15 min draw the three wireframes · 5 min number the elements and write the notes · 5 min swap with a partner and answer their two questions.

Collect: this sheet. Marking point: a wireframe is a plan, so grey boxes and placeholder lines are correct. Pupils who have coloured in a beautiful logo and written no notes have missed the task.

What you are doing

You are the designer. The school council wants an app called Clybiau that helps pupils find and join lunchtime and after-school clubs. Before anybody writes a line of code, you must plan it: work out who it is for, list what information each screen has to hold and where that information comes from, then draw three wireframes — grey-box plans of the screens, with notes.

The client brief, from the school council

"Nobody knows what clubs exist. The list is on a noticeboard by the canteen and it is out of date. We want an app where you can see what is on this week, search by the sort of thing you like, find out where and when a club meets and how many places are left, and join it without having to find the teacher. It has to work in Welsh and English. Years 7 to 11 will use it, and some of them will be using an old phone with a cracked screen on the bus."

Step by step

5 min — Read the brief twice. Underline every thing the app must do.
10 min — Complete the audience and purpose table. Be specific: "pupils" is not an audience.
10 min — Complete the content plan. For every screen, say what is on it and where that information comes from.
15 min — Draw your three wireframes in the frames. Boxes and placeholder lines only — no colouring in, no logos.
5 min — Number at least six elements across your three screens and explain each in the notes table.
5 min — Swap with a partner. Write down the two questions they could not answer from your wireframe alone.

Audience and purpose

Question	Your answer
Who exactly will use this app?
What is the one job they most need it to do?
Where and when will they be using it? What does that mean for the size of the buttons and the amount of text?
Two things the brief asks for that are easy to forget
One thing you will deliberately leave out of version 1, and why

Content plan

You cannot design a screen until you know what has to fit on it. "Where from" means: who types it in, or which school system already holds it.

Screen	What has to be on it	Where the information comes from
1. Home
2. Search results
3. Club details

Draw your wireframes

Rules of a wireframe: grey or empty boxes for pictures, short ruled lines for text you have not written yet, real words only for buttons and headings. Show the navigation on every screen.

Element notes

Number six or more elements on your drawings and explain each one here. "Why it is there" must refer back to the brief.

No.	What it is	Why it is there
1
2
3
4
5
6

Navigation map

Draw arrows between the three screen numbers to show how a user gets from one to another, and how they get back.

Partner review

The two questions my partner could not answer from my wireframe alone:

Success criteria

I named a specific audience and the one job the app must do for them, taken from the client brief.
I listed the content each screen needs before drawing it, and said where each piece of information would come from.
My wireframes use placeholders for content instead of finished artwork, so they can be changed cheaply.
Every screen shows how to get to the next screen and how to get back.
My notes justify design decisions by pointing at something in the brief, not at what looks nice.

If you finish early

Design the "club is full" version of screen 3. What does the Join button say instead, and what does the user do next?
The brief says the app must work in Welsh and English. Welsh text is often longer than the English. Redraw one button and one heading so they still fit when the Welsh is 30% longer.
Sketch a fourth screen: "My clubs". Decide what a pupil with no clubs yet should see, because an empty screen with nothing on it is a design failure.