Home A - Z
Page Index

An Otter Wiki

Blame

25ac53 lisa 2026-05-25 22:07:24
SD C04: add Brainstorming, Mind Mapping, Design Sketches how-to pages; link from checkpoint Completes the four C4-1 ideation-tool guides. StudyStreak through-line throughout; Brainstorming/Mind Mapping right-sized (familiar), Design Sketches fuller with an annotated low-fi wireframe modelling the identify/explain/justify ladder. Mind map uses a verified mermaid flowchart. All four now linked from the checkpoint design-pack table. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 
# Design Sketches
2
3
The Hamilton and Alexandra College · Year 12 · 2026
4
5
Design sketches are the fourth ideation tool in your [C4-1 design pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack). Your mood board set the *feel* and your mind map sorted the *features* — now you decide **where things go on the screen**.
6
7
> [!TIP]
8
> **You don't need to be able to draw.** A sketch is rough boxes and labels. Clarity beats art — quick lines are enough.
9
10
---
11
12
## What is a design sketch?
13
14
A quick, rough drawing of a screen — often called a **wireframe**. It shows:
15
16
- the **layout** — where the title, buttons, menus, lists and text sit
17
- the **navigation** — how a user moves from one screen to the next
18
19
A sketch is **not** the final design and **not** finished art. It answers one question: *"What goes where, and how does the user get around?"*
20
21
## Keep it low-fi
22
23
Rough is the point. Grey boxes and labels are fast to draw and fast to change, so you can try several layouts before committing. Sketch **2–3 different screens** (e.g. the home screen, the main action screen, a list/settings screen) and show how they connect.
24
25
---
26
27
## Annotations are what earn the marks
28
29
A bare sketch sits at the bottom of the rubric. **Annotations** lift it — and the same identify → explain → justify ladder from your other design work applies here:
30
31
![Annotated low-fi wireframe of a StudyStreak screen, with callouts at identify, explain and justify depth](Design%20Sketches/annotated-wireframe.png?width=720)
32
33
- **Identify** (band 5) — name what each element *is*.
34
- **Explain** (band 7) — its appearance *and* what it does / why it's placed there.
35
- **Justify** (band 9) — *why this choice over an alternative*, linked to your users and SRS.
36
37
The justify-level callout above ("a growing plant over a leaderboard, because competition raises stress") is the kind of reasoning that separates 7–8 from 9–10.
38
39
---
40
41
## Tools
42
43
- **Excalidraw in Obsidian** (see IT to install) — has **wireframing libraries** (a UX/wireframe kit and a Lo-Fi kit) so you can drag in ready-made screen parts.
44
- **Paper and pencil** is completely fine — take a photo and commit it.
45
46
> [!IMPORTANT]
47
> If you paste a **real app's screenshot** into a sketch as reference, you must **credit it** — crediting assets is compulsory (see the format on the [Mood Boards](/sd/C04/Mood%20Boards) page). Your own drawn wireframes need no credit.
48
49
---
50
51
## Your turn
52
53
1. Choose **2–3 key screens** of your software.
54
2. Sketch simple layouts — boxes and labels, low-fi.
55
3. **Label** important elements (search bar, save button, list…).
56
4. Show the **navigation** between screens.
57
5. **Annotate** — and push at least one annotation to the *justify* level (name the alternative you rejected and why).
58
59
Commit your sketches to GitHub and add them to your printed design pack.
60
61
---
62
63
## Check Your Understanding
64
65
1. What two things does a design sketch show?
66
>| ### Answer
67
>| The **layout** (where elements go) and the **navigation** (how the user moves between screens).
68
69
2. Why sketch low-fi (rough) rather than detailed?
70
>| ### Answer
71
>| Rough sketches are fast to draw and fast to change, so you can try several layouts before committing — and you focus on layout/flow, not pixels.
72
73
3. Which annotation depth separates a 7–8 sketch from a 9–10 one?
74
>| ### Answer
75
>| **Justify** — explaining *why* a choice was made over an alternative, linked to your users/SRS (not just identifying or describing the element).
76
77
---
78
79
## See also
80
81
- [Mind Mapping](/sd/C04/Mind%20Mapping) — the step before this one
82
- [Mood Boards](/sd/C04/Mood%20Boards) · [Brainstorming](/sd/C04/Brainstorming) · [C4-1 Checkpoint — Your Design Pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack)
83
84
---
85
86
← Back to [C04 Home](/sd/C04/C04-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)