← VCE Software Development U3O2

Applying UI design principles to an interface mock-up

Checking a mock-up against each UI principle in turn (alignment, balance, contrast, space, text), annotating the improvements needed, then revising the design.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 119, VCE Data Analytics - U3O2 - Analysis and Design — Module 138, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 57, QCE Digital Solutions Unit 1 — Programmed Solutions — Module 111, QCE Digital Solutions Unit 2 — Prototype Data Solutions — Module 95, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 152

Understanding Applying UI design principles to an interface mock-up in VCE Software Development U3O2

What it does: Revising the design means producing a new version that carries out the annotated improvements, such as fixing contrast and space. The note links a single principle (contrast) to a specific problem and a clear improvement, showing the annotating step of the review. Edges that do not line up break the alignment principle. The annotation should name the principle and the fix needed. Visual weight is unevenly spread across the screen, so the annotation should suggest redistributing elements to improve balance. Cramped elements are a problem of space (white space). Adding gaps makes the form easier to read and use. The review finds the issues first and records them as annotations. The designer then uses those annotations to revise the mock-up.

Common mistakes: The loop should go through the checklist of UI principles, checking the mock-up against each one in turn. It should read FOR EACH rule IN checklist. After annotating the improvement, the designer must revise the mock-up and recheck it. Submitting without a recheck skips the revision step.

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 Applying UI design principles to an interface mock-up to a class →

This module's key terms are also in a printable crossword (Modules 110–119) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

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

Learning
Duo
When reviewing a mock-up against UI principles, which approach is best?
Glance at the screen once and decide if it looks niceCheck the mock-up against each principle in turn using a checklist
Matches
Review note: "Make it look nicer"
↓
The note names no UI principle and gives no specific improvement, so it cannot guide a revision of the mock-up.
Applying
Meanings
Term
Annotated design review
Meaning
Checking a mock-up against each UI principle in turn (alignment, balance, contrast, space, text), annotating the improvements needed, then revising the design.
Practice
REVIEW login screen mock-up
Testing
Gaps
FOR principle IN checklist
Check Answer
Spots
1FOR EACH rule IN mock-up
2 CHECK mock-up against rule

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

The 'Giant Isopod' badge — Patient Builder, 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. When reviewing a mock-up against UI principles, which approach is best?
A. Check the mock-up against each principle in turn using a checklist ✓
B. Glance at the screen once and decide if it looks nice
A checklist (alignment, balance, contrast, space, text formatting) makes the review systematic, so no principle is missed.
2. A mock-up has a heading and a button with left edges that do not line up. What is the best annotation?
A. Contrast: change the heading colour to red
B. Alignment: align the heading and button to the same left edge ✓
Edges that do not line up break the alignment principle. The annotation should name the principle and the fix needed.
3. Which annotation on a mock-up is most useful for the developer?
A. Contrast: change grey text on a light grey background to dark text on white ✓
B. This part looks bad, fix it
A good annotation names the principle, points to the problem and states the improvement. Vague comments do not help the revision.
4. All the buttons and images in a mock-up are crowded into the left half of the screen. Which principle needs improving?
A. Text formatting
B. Balance ✓
Visual weight is unevenly spread across the screen, so the annotation should suggest redistributing elements to improve balance.
5. A form has fields packed tightly with no gaps between them. Which annotation fits?
A. Space: add margins and padding between the form fields ✓
B. Alignment: move all the fields to the right edge
Cramped elements are a problem of space (white space). Adding gaps makes the form easier to read and use.

Match the Pairs

Annotation: "Title and button not aligned - move both to left margin" → A review note that applies the alignment principle to a mock-up and states the improvement to make
Checklist: alignment, balance, contrast, space, text formatting → The list of UI principles a mock-up is checked against, one at a time, during a design review
After annotating faults found against each principle, the designer revises the mock-up so the improvements are applied → Version 2: grey text changed to black, 24px gap added between form fields
A design review checks one principle at a time and records an annotation for each problem found → Contrast: white text on yellow button is hard to read - use dark blue text
Review note: "Make it look nicer" → The note names no UI principle and gives no specific improvement, so it cannot guide a revision of the mock-up.
Review: only checked contrast, then submitted the design as final → The mock-up was not checked against every principle in the checklist (alignment, balance, space and text formatting were skipped) and was not revised.

Key Term

Annotated design review
Checking a mock-up against each UI principle in turn (alignment, balance, contrast, space, text), annotating the improvements needed, then revising the design.

Fill in the Blanks

1. FOR EACH principle IN checklist CHECK mockup AGAINST principle
Hint: Type the keyword that repeats the check for every principle in the list.
2. ANNOTATE heading "Align left with the form"
Hint: Type the command that adds an improvement note to a mock-up element.
3. IF contrastRatio < minimumRatio THEN ANNOTATE bodyText "Darken the text colour" END IF
Hint: Type the comparison operator that detects when contrast is too low.
4. annotations ← [] ADD "More space around buttons" TO annotations
Hint: Type the list variable that stores the improvement notes for the design.
5. WHILE issuesFound > 0 design ← REVISE(design, annotations) issuesFound ← CHECK(design, checklist)
Hint: Type the loop keyword that keeps revising the design until no issues remain.

Spot the Error

Question 1
A FOR EACH rule IN mock-up
B CHECK mock-up against rule
C ANNOTATE improvement
D END FOR
Line A — The loop should go through the checklist of UI principles, checking the mock-up against each one in turn. It should read FOR EACH rule IN checklist.
Question 2
A principle ← alignment
B issue ← labels not in line
C ANNOTATE: left-align labels
D SUBMIT mock-up, no recheck
Line D — After annotating the improvement, the designer must revise the mock-up and recheck it. Submitting without a recheck skips the revision step.
Question 3
A principle ← contrast
B issue ← black text on white
C ANNOTATE: darken text colour
D REVISE then check contrast
Line B — Black text on white has strong contrast, so it is not a problem. The issue should be low contrast, such as pale text on white, to match the annotation.
Question 4
A principle ← balance
B issue ← all items on left side
C ANNOTATE: spread items evenly
D REVISE: add more to left side
Line D — The annotation says to spread items evenly. Adding more to the left makes the imbalance worse. The revision should move an item to the right.
Question 5
A principle ← space
B issue ← margins are generous
C ANNOTATE: add padding
D REVISE and recheck
Line B — Generous margins are not a space problem and would not need padding. The issue should describe crowding, such as buttons too crowded.

Student with a class code? Join your class →