Home A - Z
Page Index

An Otter Wiki

Blame

164a60 lisa 2026-06-08 12:52:26
C05: add Design Principles and UX Characteristics deep-dive pages - Design Principles: the 7 VCAA principles, demo video (Art Heroes) + map-to-VCAA activity - UX Characteristics: the 4 characteristics (affordance/interoperability/security/usability) with 8 videos, Security 'in short' summary + telehealth, old-TV-Netflix interoperability example, passkeys/CAPTCHA/biometrics UX comparison, ketchup usability example - Linked both into home index (C5-2) and cross-linked the existing 'vs' page Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 
> **DRAFT** — under teacher review.
2
3
# Design Principles
4
5
The Hamilton and Alexandra College · Year 12 · 2026
6
7
The VCAA study design lists **seven design principles** that influence both the appearance and functionality of a software solution. You need to know all seven by name, understand what each one does, and be able to show where you applied them in your mock-ups and design log.
8
9
> [!TIP]
10
> Design principles are not decoration. Each one must connect to a concrete visual or structural decision in your interface — that's what the annotation rubric is testing.
11
12
---
13
14
## The seven principles at a glance
15
16
| Principle | What it is | What it improves |
17
|---|---|---|
18
| Alignment | How elements are positioned relative to each other and the page | Clarity and readability |
19
| Balance | The distribution of visual weight across the interface — symmetrical or asymmetrical | Attractiveness and usability |
20
| Contrast | The difference between elements that makes them stand out from each other | Accessibility and readability |
21
| Space (white space) | The empty areas between and around elements | Clarity, readability, and cognitive load |
22
| Text formatting | How text appears and is structured — fonts, hierarchy, weight, line spacing | Readability and accessibility |
23
| Usability | Interface choices that make software easy to operate: consistency, feedback, error prevention, recognition over recall, universal design | Ease of use and error reduction |
24
| Navigation | How users move through the software — menu structure, breadcrumbs, search, consistent placement | Efficiency and usability |
25
26
---
27
28
## How to apply each principle
29
30
**Alignment**
31
32
- Line up elements to a shared grid or edge — left-aligned text feels structured and is easier to scan than centred paragraphs.
33
- Group related elements so the eye reads them together.
34
35
**Balance**
36
37
- Symmetrical layouts feel formal and stable; asymmetrical layouts can feel dynamic but need careful visual weight management.
38
- Avoid clustering all your heavy content (large images, bold text) on one side of the screen.
39
40
**Contrast**
41
42
- Use dark text on a light background (or vice versa) — this is the single most important accessibility move.
43
- Use a bright, high-contrast colour for call-to-action buttons so users instantly know what to click.
44
45
**Space (white space)**
46
47
- Add generous margins and padding around every content block — cramped interfaces feel harder to use than they are.
48
- Increase line spacing (line height) in body text to about 1.5× the font size.
49
50
**Text formatting**
51
52
- Use a sans-serif typeface (e.g. Roboto, Open Sans, Inter) for on-screen body text.
53
- Establish a clear heading hierarchy — H1 for the page title, H2 for sections, H3 for sub-sections — and never skip levels.
54
55
**Usability**
56
57
- Keep interactive elements consistent: if the primary button is blue on page one, it must be blue everywhere.
58
- Provide visible feedback for every user action (loading spinner, success message, error highlight).
59
60
**Navigation**
61
62
- Place your main navigation menu in the same position on every screen.
63
- For multi-screen software, include a breadcrumb trail or a clearly labelled back button so users always know where they are.
64
65
---
66
67
## 🎬 Watch — the principles in action
68
69
**🎯 Watch for:** balance, contrast, alignment, and space are all shown visually in this video — these four are in the VCAA list. The video does NOT show text formatting, usability, or navigation because it is a graphic/art design montage rather than a software interface walkthrough.
70
71
{{Video|src=https://www.youtube.com/watch?v=ZK86XQ1iFVs}}
72
73
> [!NOTE]
74
> This is a general graphic and art design video — it uses the broader "principles of design" canon taught in visual arts and graphic design. Some principles it shows are **not** on the VCAA Software Development list, and three VCAA principles are **not** covered because they are software-specific. Your job in the activity below is to map what you see onto the VCAA seven.
75
76
---
77
78
## Check Your Understanding
79
80
**Question 1 — Video mapping activity**
81
82
Watch the video above, then answer: which principles shown are included in the VCAA study design, and which are not?
83
84
>| ### Answer
85
>| **Overlap — shown in the video AND on the VCAA list:**
86
>| - Balance, Contrast, Alignment, Space (white space)
87
>|
88
>| **In the video but NOT on the VCAA list** (art/graphic-design canon):
89
>| - Emphasis, Movement, Repetition/Pattern, Proportion/Scale, Unity/Harmony, Rhythm
90
>|
91
>| **On the VCAA list but NOT covered by this video** (software-specific):
92
>| - Text formatting, Usability, Navigation
93
>|
94
>| So: four principles overlap; the art video adds several extras; VCAA adds three software-specific ones the video skips entirely.
95
96
---
97
98
**Question 2 — Recall**
99
100
Name all seven VCAA design principles from memory (close this page first, then check).
101
102
>| ### Answer
103
>| 1. Alignment
104
>| 2. Balance
105
>| 3. Contrast
106
>| 4. Space (white space)
107
>| 5. Text formatting
108
>| 6. Usability
109
>| 7. Navigation
110
111
---
112
113
**Question 3 — Accessibility focus**
114
115
Which VCAA design principle most directly supports accessibility for a user with low vision, and how would you apply it?
116
117
>| ### Answer
118
>| **Contrast** — a user with low vision relies on a strong difference between text colour and background colour to read content. The practical move is dark text on a light background (or light text on a very dark background). High-contrast call-to-action buttons also help users with colour perception difficulties identify interactive elements at a glance.
119
120
---
121
122
## See also
123
124
- [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) — design principles vs the 4 UX characteristics
125
- [UX Characteristics](/sd/C05/UX%20Characteristics)
126
- [The Annotation Verb Ladder](/sd/C05/The%20Annotation%20Verb%20Ladder) — how to annotate where you applied these
127
- [C05 Resources](/sd/Resources/C05-Resources)
128
129
---
130
131
← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)