Sketching a screen layout

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

2. What do you draw first when sketching a screen?

A The screen outline

B The tiny details inside the buttons

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

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

Definitions

screen sketch

Fill in the Blanks

Complete each line of code by filling in the missing parts.

SKETCH: Home screen OUTLINE: _________ BOX: Play button at the bottom

SKETCH: Home screen OUTLINE: rectangle ___: Play button at the bottom

SKETCH: Name screen BOX: ________ in the middle BOX: Next button at the bottom

Screens: Home, Game, Score Sketches needed: _

SKETCH: Score screen BOX: _____ for the title, at the top BOX: Home button at the bottom

Spot the Error

Shade in the letter of the line that contains an 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

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

Question 3

A Sketch: Score screen

B Outline: wide rectangle

C Box: label 'Score'

D Box: button 'Again' at bottom

Question 4

A Sketch: Menu screen

B Outline: tall rectangle

C Box: label 'Menu' at top

D Write code: when Play clicked

Question 5

A Sketch: Settings screen

B Outline: not needed

C Box: slider at the middle

D Box: button 'Back' at bottom

Answer Key

Sketching a screen layout

Section A: Quick Questions

B — A simple drawing of a screen with a box for each element

A — The screen outline

B — Draw a box where the button will go and write its name inside

A — Two, one for each screen

A — Where you want it to appear on the screen

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

SKETCH: Home screen
OUTLINE: rectangle
BOX: Play button at the bottom

SKETCH: Home screen
OUTLINE: rectangle
BOX: Play button at the bottom

SKETCH: Name screen
BOX: text box in the middle
BOX: Next button at the bottom

Screens: Home, Game, Score
Sketches needed: 3

SKETCH: Score screen
BOX: label for the title, at the top
BOX: Home button at the bottom

Section E: Spot the Error

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.

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.

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'.

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'.

B — Every screen sketch starts with an outline showing the shape of the screen. Line 2 should be something like 'Outline: tall rectangle'.