← Years 5–6 Creating Digital Solutions

Sketching a screen layout

A simple drawing of a screen. It has an outline, then a box or shape for each button, text box or label, drawn where it will go. You draw one sketch for each screen.

Part of: 5-6 Digital Technologies Vic Curric - Creating Digital Solutions — Module 39, VCE Software Development - U3O2 - Analysis and Design — Module 87, VCE Data Analytics - U3O2 - Analysis and Design — Module 123, 7-8 Digital Technologies: Designing user interfaces and experiences — Module 14, 9-10 Digital Technologies: Designing user interfaces and experiences — Module 13, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 31, QCE Digital Solutions Unit 3 — Innovative Digital Solutions — Module 12

Understanding Sketching a screen layout in Years 5–6 Creating Digital Solutions

What it does: The big rectangle is the screen outline. The boxes for buttons and text are drawn inside it. You draw a separate sketch for every screen, so two screens means two sketches. A screen sketch is a quick drawing. It shows where each button, text box and label will go. Every element gets a box or shape in its position, and a short name inside shows what it is. Sketches show boxes for elements like labels and text boxes. They do not show code. A sketch is simple and quick. Boxes and shapes in the right positions are what matter.

Common mistakes: A screen sketch is simple. After naming the sketch, line 2 should draw the screen outline, for example 'Outline: tall rectangle'. It should not draw every pixel. You draw one sketch for each screen. Line 1 should name only one screen, such as 'Sketch 1: Login screen'. The Game screen needs its own sketch.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Sketching a screen layout to a class →

This module's key terms are also in a printable crossword (Modules 31–40) and word search (Modules 21–40).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which describes a screen sketch?
A simple drawing of a screen with a box for each elementA finished app that is ready to use
Matches
A sketch with a Play button, a score label and a name box all drawn in a pile in the top corner
↓
The boxes are not drawn where each element will go. Each box should be placed in its real position on the screen.
Applying
Meanings
Term
screen sketch
Meaning
A simple drawing of a screen. It has an outline, then a box or shape for each button, text box or label, drawn where it will go. You draw one sketch for each screen.
Practice
Screen 1: Home
Testing
Gaps
OUTLINE:
Check Answer
Spots
1Sketch: Home screen
2Draw every pixel in detail

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Jellyfish' badge — Flow Controller, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which describes a screen sketch?
A. A finished app that is ready to use
B. A simple drawing of a screen with a box for each element ✓
A screen sketch is a quick drawing. It shows where each button, text box and label will go.
2. What do you draw first when sketching a screen?
A. The screen outline ✓
B. The tiny details inside the buttons
Start with the outline of the screen. Then you have a space to place your boxes in.
3. How do you show a button in a screen sketch?
A. Leave it out and tell people about it later
B. Draw a box where the button will go and write its name inside ✓
Every element gets a box or shape in its position, and a short name inside shows what it is.
4. A game has a start screen and a score screen. How many sketches do you need?
A. Two, one for each screen ✓
B. One sketch for both screens
You draw one sketch for each screen, so the start screen and the score screen each get their own.
5. Where should the box for a text box go in your sketch?
A. Where you want it to appear on the screen ✓
B. Anywhere, because position does not matter
Each box is drawn where the element will go, so the sketch shows the layout.

Match the Pairs

screen sketch → A simple drawing of a screen with a box or shape for each button, text box or label, drawn where it will go
[ Play ] → A box drawn on the sketch to show where a button will go and what it says
Start by drawing the outline of the screen, like a big rectangle, before adding anything inside → +------------------+ | | +------------------+
A game with a start screen and a game over screen needs one sketch for each screen → Sketch 1: Start screen Sketch 2: Game over screen
A sketch with a Play button, a score label and a name box all drawn in a pile in the top corner → The boxes are not drawn where each element will go. Each box should be placed in its real position on the screen.
One sketch used for the title screen, the quiz screen and the results screen → Each screen needs its own sketch. One sketch cannot show three different screens.

Key Term

screen sketch
A simple drawing of a screen. It has an outline, then a box or shape for each button, text box or label, drawn where it will go. You draw one sketch for each screen.

Fill in the Blanks

1. SKETCH: Home screen OUTLINE: rectangle BOX: Play button at the bottom
Hint: Type the shape you draw first to show the edge of the screen.
2. SKETCH: Home screen OUTLINE: rectangle BOX: Play button at the bottom
Hint: Type the keyword for the shape drawn for each interface element.
3. SKETCH: Name screen BOX: text box in the middle BOX: Next button at the bottom
Hint: Type the interface element where a user types in their name.
4. Screens: Home, Game, Score Sketches needed: 3
Hint: Type how many sketches you need, one for each screen.
5. SKETCH: Score screen BOX: label for the title, at the top BOX: Home button at the bottom
Hint: Type the element that shows words the user only reads.

Spot the Error

Question 1
A Sketch: Home screen
B Draw every pixel in detail
C Box: label 'Quiz' at top
D Box: button 'Start' at bottom
Line B — A screen sketch is simple. After naming the sketch, line 2 should draw the screen outline, for example 'Outline: tall rectangle'. It should not draw every pixel.
Question 2
A Sketch 1: Login and Game screens
B Outline: tall rectangle
C Box: text box for name
D Box: button 'Log in' at bottom
Line A — You draw one sketch for each screen. Line 1 should name only one screen, such as 'Sketch 1: Login screen'. The Game screen needs its own sketch.
Question 3
A Sketch: Score screen
B Outline: wide rectangle
C Box: label 'Score'
D Box: button 'Again' at bottom
Line C — Each box must be drawn where the element will go on the screen. This label has no position. It should say where it goes, for example 'Box: label 'Score' at top'.
Question 4
A Sketch: Menu screen
B Outline: tall rectangle
C Box: label 'Menu' at top
D Write code: when Play clicked
Line D — A screen sketch only shows a box for each element in its position. It does not contain code. Line 4 should be the box for the Play button, such as 'Box: button 'Play' in middle'.
Question 5
A Sketch: Settings screen
B Outline: not needed
C Box: slider at the middle
D Box: button 'Back' at bottom
Line B — Every screen sketch starts with an outline showing the shape of the screen. Line 2 should be something like 'Outline: tall rectangle'.

Student with a class code? Join your class →