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 
> **DRAFT** — under teacher review.
2
3
# Design Sketches
4
5
The Hamilton and Alexandra College · Year 12 · 2026
6
7
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**.
8
9
> [!TIP]
10
> **You don't need to be able to draw.** A sketch is rough boxes and labels. Clarity beats art — quick lines are enough.
11
12
---
13
14
## What is a design sketch?
15
16
A quick, rough drawing of a screen — often called a **wireframe**. It shows:
17
18
- the **layout** — where the title, buttons, menus, lists and text sit
19
- the **navigation** — how a user moves from one screen to the next
20
21
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?"*
22
23
## Keep it low-fi
24
25
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.
26
27
---
28
29
## Annotations are what earn the marks
30
31
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:
32
33
![Annotated low-fi wireframe of a StudyStreak screen, with callouts at identify, explain and justify depth](Design%20Sketches/annotated-wireframe.png?width=720)
34
35
- **Identify** (band 5) — name what each element *is*.
36
- **Explain** (band 7) — its appearance *and* what it does / why it's placed there.
37
- **Justify** (band 9) — *why this choice over an alternative*, linked to your users and SRS.
38
39
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.
40
41
---
42
43
## Tools
44
45
- **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.
46
- **Paper and pencil** is completely fine — take a photo and commit it.
47
48
> [!IMPORTANT]
49
> 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.
50
51
---
52
53
## Your turn
54
55
1. Choose **2–3 key screens** of your software.
56
2. Sketch simple layouts — boxes and labels, low-fi.
57
3. **Label** important elements (search bar, save button, list…).
58
4. Show the **navigation** between screens.
59
5. **Annotate** — and push at least one annotation to the *justify* level (name the alternative you rejected and why).
60
61
Commit your sketches to GitHub and add them to your printed design pack.
62
63
---
64
65
## Check Your Understanding
66
67
1. What two things does a design sketch show?
68
>| ### Answer
69
>| The **layout** (where elements go) and the **navigation** (how the user moves between screens).
70
71
2. Why sketch low-fi (rough) rather than detailed?
72
>| ### Answer
73
>| 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.
74
75
3. Which annotation depth separates a 7–8 sketch from a 9–10 one?
76
>| ### Answer
77
>| **Justify** — explaining *why* a choice was made over an alternative, linked to your users/SRS (not just identifying or describing the element).
78
79
---
80
81
## See also
82
83
- [Mind Mapping](/sd/C04/Mind%20Mapping) — the step before this one
84
- [Mood Boards](/sd/C04/Mood%20Boards) · [Brainstorming](/sd/C04/Brainstorming) · [C4-1 Checkpoint — Your Design Pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack)
85
86
---
87
88
← Back to [C04 Home](/sd/C04/C04-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)