← Years 5–6 Creating Digital Solutions

Layout and grouping on a screen

Where items are placed on a screen. Good layout groups related items together, lines them up and leaves space between them, so the screen is easy to scan.

Part of: 5-6 Digital Technologies Vic Curric - Creating Digital Solutions — Module 34, 7-8 Digital Technologies: Designing user interfaces and experiences — Module 6, 9-10 Digital Technologies: Designing user interfaces and experiences — Module 5, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 45, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 148

Understanding Layout and grouping on a screen in Years 5–6 Creating Digital Solutions

What it does: Items that belong together, such as name and age, are placed in one group so users see they are related. Space between items stops them looking crowded and helps users pick the right one. Aligned items, such as labels all starting on the left, look tidy and are easier to read. A neat column gives the eye a clear path to follow from top to bottom. Equal gaps and a straight line make the buttons look like one group. Layout is the placement of items. Good layout groups, aligns and spaces them. Related information belongs together, so the player can check it at a glance.

Common mistakes: The artist name is information, not a control. Related items should be grouped together, so the controls group should be play and pause, and the artist belongs in the info group. Items inside a group should have small gaps so they look related. If the space inside a group is as large as the space between groups, the groups do not stand out. It should say small.

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 Layout and grouping on a screen 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 is a good way to lay out a quiz app screen?
Put the question and its answer buttons close togetherSpread the question and answer buttons to opposite corners
Matches
[Name: ____ ] [Age: ____ ] [Email: ____ ]
↓
The text boxes are not lined up. Each starts in a different place, so the screen looks messy and is hard to scan.
Applying
Meanings
Term
layout
Meaning
Where items are placed on a screen. Good layout groups related items together, lines them up and leaves space between them, so the screen is easy to scan.
Practice
SCREEN Sign Up
Testing
Gaps
Player: name, score, lives
Check Answer
Spots
1SCREEN Music Player
2GROUP controls: play, artist

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

The 'Woolly Mammoth' badge — Tundra Master, 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 is a good way to lay out a quiz app screen?
A. Put the question and its answer buttons close together ✓
B. Spread the question and answer buttons to opposite corners
Grouping related items together shows they belong with each other, so users can scan the screen quickly.
2. What does alignment mean in a layout?
A. Lining items up along the same edge or line ✓
B. Making every item a different size
Aligned items, such as labels all starting on the left, look tidy and are easier to read.
3. Which screen is easier to scan?
A. Labels and text boxes scattered in random places
B. Labels and text boxes lined up in a neat column ✓
A neat column gives the eye a clear path to follow from top to bottom.
4. Why do designers leave space between groups of items?
A. So the groups are easy to tell apart ✓
B. So the screen looks empty and unfinished
Spacing separates groups. It stops the screen feeling crowded and helps users see what goes together.
5. A game menu has Play, Settings and Quit buttons. Which layout is best?
A. Put them at random angles with different gaps
B. Stack them in a line with the same gap between each ✓
Equal gaps and a straight line make the buttons look like one group.

Match the Pairs

layout → Where items are placed on a screen so it is easy to scan
align → Line items up along the same edge so the screen looks neat
Grouping related items: put a name box and an age box close together in one area → [Name: ____ ] [Age: ____ ] (group box: About you)
Spacing: leave a gap between the Play button and the Quit button so they are not mixed up → [ Play ] [ Quit ]
[Name: ____ ] [Age: ____ ] [Email: ____ ] → The text boxes are not lined up. Each starts in a different place, so the screen looks messy and is hard to scan.
[Play][Options][Quit][Help][Score] → There is no spacing between the buttons, so they are squashed together and easy to click by mistake.

Key Term

layout
Where items are placed on a screen. Good layout groups related items together, lines them up and leaves space between them, so the screen is easy to scan.

Fill in the Blanks

1. GROUP Player: name, score, lives GROUP Controls: play, pause, stop
Hint: Type the keyword that puts related items together on the screen.
2. ALIGN Buttons: left SPACE Buttons: 10px
Hint: Type the keyword that lines items up along the same edge.
3. GROUP Scores: points, level, time SPACE Scores: 20px
Hint: Type the keyword that leaves empty room between items.
4. # Menu items line up on the left edge GROUP Menu: Home, Play, Help ALIGN Menu: left
Hint: Type the side of the screen the comment says the items line up on.
5. GROUP Scores: points, level, time ALIGN Scores: left
Hint: Type the name of the group that is being lined up.

Spot the Error

Question 1
A SCREEN Music Player
B GROUP controls: play, artist
C GROUP info: song, artist
D ALIGN all groups: centre
Line B — The artist name is information, not a control. Related items should be grouped together, so the controls group should be play and pause, and the artist belongs in the info group.
Question 2
A SCREEN Settings
B SPACE inside group: large
C SPACE between groups: large
Line B — Items inside a group should have small gaps so they look related. If the space inside a group is as large as the space between groups, the groups do not stand out. It should say small.
Question 3
A SCREEN Quiz
B GROUP answers: A, B, C, D
C SPACE between answers: 300px
D SPACE around screen: 24px
Line C — 300px is far too much space. The answers would be spread across the screen and no longer look like one group. A small, even gap such as 16px keeps them together and easy to scan.
Question 4
A SCREEN Shop Item
B GROUP photo: image, caption
C GROUP price: cost, image
D GROUP buy: quantity, button
Line C — The image does not belong in the price group, and it is already in the photo group. The price group should only hold items about price, such as the cost and the discount.
Question 5
A SCREEN Menu
B ALIGN title: centre
C ALIGN buttons: staggered
D ALIGN sizes: same width
Line C — Staggered buttons do not line up, which makes the screen messy and harder to scan. The buttons should be aligned, so their left edges should match.

Student with a class code? Join your class →