← QCE Digital Solutions Unit 2

Visual communication principle: proximity

A design principle: place related items close together and unrelated items further apart, so users see the groups clearly. Eg group name fields, then leave space before the next group.

Part of: QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 133

Understanding Visual communication principle: proximity in QCE Digital Solutions Unit 2

What it does: A small gap inside the group places related fields close together, which is what proximity asks for. A big margin between groups separates unrelated content, so the user sees where one group ends and the next begins. Proximity is about distance. Items that belong together (chart and legend) should be closer to each other than to unrelated items. Distance alone can show groups. Close items look related and distant items look separate, so no extra borders are needed. A label should be nearest to the field it describes, so users know which input it belongs to. Proximity relies on different distances. Equal spacing hides the groups and makes the form harder to scan.

Common mistakes: Fields in the same group (first name, last name) should sit close together. A 40px gap pushes them apart so they look unrelated. It should be a small gap such as 4px. The input tag is missing its closing >. The fields are wrapped in one div to group them, so the tag must be written correctly: <input id="first">.

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 Visual communication principle: proximity to a class →

This module's key terms are also in a printable crossword (Modules 122–139) and word search (Modules 2–139).

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which layout applies proximity to a sign-up form?
Spread every field evenly down the page so each one is the same distance from the nextPlace First name and Last name fields next to each other, with a gap before the Password fields
Matches
A form where every field has the same 20px gap, including between Street and Suburb and between Address and Payment
↓
The spacing is identical everywhere, so related and unrelated items look the same and no groups can be seen. Use small gaps inside a group and larger gaps between groups.
Applying
Meanings
Term
proximity
Meaning
A design principle: place related items close together and unrelated items further apart, so users see the groups clearly. Eg group name fields, then leave space before the next group.
Practice
<style>
Testing
Gaps
label { : 4px; }
Check Answer
Spots
1.name-fields {
2 gap: 40px;

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

The 'Spider' badge — Web Weaver, 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 layout applies proximity to a sign-up form?
A. Spread every field evenly down the page so each one is the same distance from the next
B. Place First name and Last name fields next to each other, with a gap before the Password fields ✓
Proximity groups related fields (name fields together) and separates them from unrelated groups, so users see the groups at a glance.
2. What does the proximity principle say about items that are related?
A. Place them close together ✓
B. Place them at opposite corners of the screen
Related items sit close together so the eye reads them as one group.
3. A dashboard has a chart and its legend far apart, with an unrelated button right beside the legend. What is the proximity problem?
A. There is no problem, because proximity only applies to the colours used
B. The legend is nearer to an unrelated item than to its chart, so the grouping is misleading ✓
Proximity is about distance. Items that belong together (chart and legend) should be closer to each other than to unrelated items.
4. Which use of spacing best shows two separate groups on a form?
A. A larger gap between the Contact details group and the Payment details group ✓
B. The same small gap between every field, with no space between groups
Extra space between groups tells the user that one group has ended and another has started.
5. True or false: Proximity can make groups clear without using lines, boxes or colour.
A. True ✓
B. False
Distance alone can show groups. Close items look related and distant items look separate, so no extra borders are needed.

Match the Pairs

margin-bottom: 32px; → Adds extra space under a group so it is clearly separated from the next group
<fieldset><legend>Address</legend> ... </fieldset> → Keeps related form fields together in one labelled group
Proximity keeps related fields close together, such as first name and last name in the same block → .name-group { gap: 4px; }
Proximity leaves a larger space between unrelated groups so each group stands out → .form-group { margin-bottom: 40px; }
A form where every field has the same 20px gap, including between Street and Suburb and between Address and Payment → The spacing is identical everywhere, so related and unrelated items look the same and no groups can be seen. Use small gaps inside a group and larger gaps between groups.
A label placed 60px above its text box, right next to the field of the next question → The label is closer to the wrong field, so users link it with the wrong input. Move each label close to its own field and away from others.

Key Term

proximity
A design principle: place related items close together and unrelated items further apart, so users see the groups clearly. Eg group name fields, then leave space before the next group.

Fill in the Blanks

1. label { margin-bottom: 4px; }
Hint: Type the CSS property that sets a small space below an element, keeping a label close to the field it belongs to.
2. <fieldset> <input name="first"> </fieldset>
Hint: Type the HTML element that wraps related form controls together as one group.
3. .name-row { display: flex; gap: 8px; }
Hint: Type the CSS property that sets the space between items inside a flex container, keeping related fields close.
4. .group + .group { margin-top: 32px; }
Hint: Type the CSS property that adds extra space above the next group to separate it from the previous group.
5. <fieldset> <legend>Contact details</legend> </fieldset>
Hint: Type the name of the closing tag for the element that gives a title to a fieldset group.

Spot the Error

Question 1
A .name-fields {
B gap: 40px;
C }
D .address-fields {
E margin-top: 32px;
F }
Line B — Fields in the same group (first name, last name) should sit close together. A 40px gap pushes them apart so they look unrelated. It should be a small gap such as 4px.
Question 2
A <div class="name">
B <input id="first"
C <input id="last">
D </div>
Line B — The input tag is missing its closing >. The fields are wrapped in one div to group them, so the tag must be written correctly: <input id="first">.
Question 3
A .name-group {
B display: flex;
C gap: 4px;
D margin-bottom: 0px;
E }
Line D — Proximity needs extra space between different groups. With margin-bottom: 0px the next group sits right against this one, so the groups blur together. It should be a larger value such as 32px.
Question 4
A label {
B margin-bottom: 40px;
C display: block;
D }
Line B — A label belongs with its input, so it should sit close to it. A 40px margin separates them and breaks the link. It should be a small margin such as 4px.
Question 5
A <form>
B <input name="first">
C <br><br><br><br>
D <br>
E <input name="street">
F </form>
Line C — Putting big breaks between the first and last name fields splits a related group. The name fields should stay together, with the space placed after them, before the street field. Line 3 should be the last name input.

Student with a class code? Join your class →