> **DRAFT** — under teacher review. # Design Principles The Hamilton and Alexandra College · Year 12 · 2026 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. > [!TIP] > 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. --- ## The seven principles at a glance | Principle | What it is | What it improves | |---|---|---| | Alignment | How elements are positioned relative to each other and the page | Clarity and readability | | Balance | The distribution of visual weight across the interface — symmetrical or asymmetrical | Attractiveness and usability | | Contrast | The difference between elements that makes them stand out from each other | Accessibility and readability | | Space (white space) | The empty areas between and around elements | Clarity, readability, and cognitive load | | Text formatting | How text appears and is structured — fonts, hierarchy, weight, line spacing | Readability and accessibility | | Usability | Interface choices that make software easy to operate: consistency, feedback, error prevention, recognition over recall, universal design | Ease of use and error reduction | | Navigation | How users move through the software — menu structure, breadcrumbs, search, consistent placement | Efficiency and usability | --- ## How to apply each principle **Alignment** - Line up elements to a shared grid or edge — left-aligned text feels structured and is easier to scan than centred paragraphs. - Group related elements so the eye reads them together. **Balance** - Symmetrical layouts feel formal and stable; asymmetrical layouts can feel dynamic but need careful visual weight management. - Avoid clustering all your heavy content (large images, bold text) on one side of the screen. **Contrast** - Use dark text on a light background (or vice versa) — this is the single most important accessibility move. - Use a bright, high-contrast colour for call-to-action buttons so users instantly know what to click. **Space (white space)** - Add generous margins and padding around every content block — cramped interfaces feel harder to use than they are. - Increase line spacing (line height) in body text to about 1.5× the font size. **Text formatting** - Use a sans-serif typeface (e.g. Roboto, Open Sans, Inter) for on-screen body text. - Establish a clear heading hierarchy — H1 for the page title, H2 for sections, H3 for sub-sections — and never skip levels. **Usability** - Keep interactive elements consistent: if the primary button is blue on page one, it must be blue everywhere. - Provide visible feedback for every user action (loading spinner, success message, error highlight). **Navigation** - Place your main navigation menu in the same position on every screen. - For multi-screen software, include a breadcrumb trail or a clearly labelled back button so users always know where they are. --- ## 🎬 Watch — the principles in action **🎯 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. {{Video|src=https://www.youtube.com/watch?v=ZK86XQ1iFVs}} > [!NOTE] > 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. --- ## Check Your Understanding **Question 1 — Video mapping activity** Watch the video above, then answer: which principles shown are included in the VCAA study design, and which are not? >| ### Answer >| **Overlap — shown in the video AND on the VCAA list:** >| - Balance, Contrast, Alignment, Space (white space) >| >| **In the video but NOT on the VCAA list** (art/graphic-design canon): >| - Emphasis, Movement, Repetition/Pattern, Proportion/Scale, Unity/Harmony, Rhythm >| >| **On the VCAA list but NOT covered by this video** (software-specific): >| - Text formatting, Usability, Navigation >| >| So: four principles overlap; the art video adds several extras; VCAA adds three software-specific ones the video skips entirely. --- **Question 2 — Recall** Name all seven VCAA design principles from memory (close this page first, then check). >| ### Answer >| 1. Alignment >| 2. Balance >| 3. Contrast >| 4. Space (white space) >| 5. Text formatting >| 6. Usability >| 7. Navigation --- **Question 3 — Accessibility focus** Which VCAA design principle most directly supports accessibility for a user with low vision, and how would you apply it? >| ### Answer >| **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. --- ## See also - [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) — design principles vs the 4 UX characteristics - [UX Characteristics](/sd/C05/UX%20Characteristics) - [The Annotation Verb Ladder](/sd/C05/The%20Annotation%20Verb%20Ladder) — how to annotate where you applied these - [C05 Resources](/sd/Resources/C05-Resources) --- ← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)