Home A - Z
Page Index

An Otter Wiki

Blame

6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 
# Mood Boards
2
3
The Hamilton and Alexandra College · Year 12 · 2026
4
5
A **mood board** is one of the four ideation tools in your [C4-1 design pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack). If you've never made one, start here.
6
7
---
8
9
## What is a mood board?
10
ffd23c lisa 2026-05-25 21:42:06
SD C04 Mood Boards: add StudyStreak example board (PNG) + editable .excalidraw starter Real CC0 photos (Openverse) + StudyStreak palette/fonts/keywords/UI panel, composed and rendered. Embedded under 'What is a mood board?'; .excalidraw provided as a Use-Modify-Create starter for Excalidraw in Obsidian. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
11
A mood board is a **visual collage** that captures the *look and feel* of your software — *before* you design any real screens.
12
13
![StudyStreak mood board — a coherent example](Mood%20Boards/studystreak.png?width=720)
14
15
*An example board for "StudyStreak" (a focus & wellbeing tracker). Notice how every colour, font and image points at **one feeling**: calm and focused.*
16
3ef808 lisa 2026-05-25 21:46:01
SD C04 Mood Boards: add live Excalidraw view link alongside the download starter Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
17
🔗 **View it live:** [open the interactive board in your browser](https://link.excalidraw.com/l/5CLtbQDvBQT/9YfBULXeu1u) — click **Join as a guest** for a read-only view (nothing to install).
18
ffd23c lisa 2026-05-25 21:42:06
SD C04 Mood Boards: add StudyStreak example board (PNG) + editable .excalidraw starter Real CC0 photos (Openverse) + StudyStreak palette/fonts/keywords/UI panel, composed and rendered. Embedded under 'What is a mood board?'; .excalidraw provided as a Use-Modify-Create starter for Excalidraw in Obsidian. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
19
📂 **Want to take it apart?** [Download the `.excalidraw` starter](Mood%20Boards/studystreak.excalidraw), open it in Excalidraw (Obsidian), and see how it's built — then adapt it for your own project.
20
21
It gathers the things that set a creative direction:
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
22
23
- **Colours** — a small palette (3–5 colours)
24
- **Typography** — 1–2 fonts you'd use
25
- **Imagery & texture** — photos, icons, UI patterns, screenshots of apps that inspire you
26
- **Keywords** — a few words for the feeling you want (e.g. *calm, playful, trustworthy*)
27
28
It is **not** a layout or a wireframe — it doesn't show where buttons go. It answers a different question: *"What should this app **feel** like?"*
29
30
## Why bother?
31
32
- It **sets the direction early**, so your later sketches and detailed designs are consistent instead of random.
33
- It's a fast way to **explore and compare** visual ideas before committing.
34
- It gives you **reusable assets** — the colours and fonts you choose here carry straight into C5.
35
36
---
37
74f257 lisa 2026-05-25 21:27:44
SD C04 Mood Boards: turn video into guided pause-and-build; use Excalidraw in Obsidian Adds watch-and-build checkpoints anchored to the video's four boards, a Check Your Understanding (with corrected >| folded answers), and a class instruction to build in Excalidraw/Obsidian (see IT to install). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
38
## Watch and build alongside (10 min)
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
39
74f257 lisa 2026-05-25 21:27:44
SD C04 Mood Boards: turn video into guided pause-and-build; use Excalidraw in Obsidian Adds watch-and-build checkpoints anchored to the video's four boards, a Check Your Understanding (with corrected >| folded answers), and a class instruction to build in Excalidraw/Obsidian (see IT to install). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
40
Don't just watch — **build your own board as you go.** Copy the designer's *thinking*, not his tool. Watch for the **four boards** he creates (you'll make the same four), and notice he starts each by naming the *mood* — exactly like the StudyStreak example below.
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
41
0e7b5c lisa 2026-05-25 21:19:35
SD wiki: embed YouTube videos with {{Video}} macro instead of plain links Plain markdown links render as dead links, not players. Convert all 7 (C4 video page x2, C2/C3 page x4, Mood Boards x1) to the wiki's working {{Video|src=...}} convention. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
42
{{Video|src=https://www.youtube.com/watch?v=UsPKDV7ozfI}}
43
44
*How To Create a Mood Board — Design Process for App UI (NAM Design)*
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
45
46
The video builds the board in Miro; you can use **Excalidraw, Canva, Obsidian, or even a Google Slide** instead — the thinking is the same.
47
74f257 lisa 2026-05-25 21:27:44
SD C04 Mood Boards: turn video into guided pause-and-build; use Excalidraw in Obsidian Adds watch-and-build checkpoints anchored to the video's four boards, a Check Your Understanding (with corrected >| folded answers), and a class instruction to build in Excalidraw/Obsidian (see IT to install). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
48
> [!NOTE]
49
> **In this class, build your board with Excalidraw in Obsidian.** If it isn't installed on your machine, see IT to install the app.
50
51
### ⏸ Pause and build
52
53
Pause at each point and do the step for *your own* project before you resume:
54
55
| Pause at | Do this for your project |
56
|---|---|
57
| **0:58** | Answer the two prep questions: *what* app are you making, and on *what device*? Write them at the top of your canvas. |
58
| **1:00–4:00** | *Skip — this part is just a tour of Miro's buttons. Open Excalidraw in Obsidian instead.* |
59
| **5:00** | **Board 1 — Design Style:** collect 6–8 inspiration images and write 3–4 **mood adjectives**. (Gathering more than a couple lets you see the *differences* and choose deliberately.) |
60
| **5:58** | **Board 2 — Type:** pick **two fonts that pair** ([Google Fonts](https://fonts.google.com) is free). |
61
| **7:15** | **Colour palette:** build a primary + secondary + accent palette ([coolors.co](https://coolors.co) helps). |
62
| **8:10** | **Board 3 — Imagery:** add 3–4 images that fit your feeling (try [Unsplash](https://unsplash.com)). |
63
| **9:05** | **Board 4 — Interface patterns:** find 2–3 *real* UI examples of parts you'll need (e.g. a card, a button). |
64
66fef5 lisa 2026-05-25 21:50:50
SD C04 Mood Boards: add per-board StudyStreak example screenshots to Pause and build Four labelled boards (Design Style, UI Style Guide, Imagery, Interface patterns) so each pause-and-build step has a worked visual. Built from CC0 photos + StudyStreak palette/type. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
65
**What each board looks like** — the StudyStreak example, board by board (the video groups *type · colour · icons* together as Board 2):
66
67
![Board 1 — Design Style: inspiration photos, mood adjectives, target device](Mood%20Boards/board1.png?width=560)
68
69
![Board 2 — UI Style Guide: typography, colour palette, icons](Mood%20Boards/board2.png?width=560)
70
71
![Board 3 — Imagery: the photos you'll use inside the app](Mood%20Boards/board3.png?width=560)
72
73
![Board 4 — Interface patterns: real components you'll reuse](Mood%20Boards/board4.png?width=560)
74
74f257 lisa 2026-05-25 21:27:44
SD C04 Mood Boards: turn video into guided pause-and-build; use Excalidraw in Obsidian Adds watch-and-build checkpoints anchored to the video's four boards, a Check Your Understanding (with corrected >| folded answers), and a class instruction to build in Excalidraw/Obsidian (see IT to install). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
75
### Check Your Understanding
76
77
1. The designer builds **four boards** — what are they?
78
>| ### Answer
79
>| Design Style · UI Style Guide (type + colour + icons) · Imagery & Graphics · Interface Patterns.
80
81
2. Why gather 6–8 styles *before* choosing one?
82
>| ### Answer
83
>| So you can see the differences and choose deliberately, instead of locking onto your first idea.
84
85
3. He insists on finding **real examples** of interface patterns. Why?
86
>| ### Answer
87
>| Real examples are proven — they show patterns that already work, which beats inventing one from scratch.
88
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89
---
90
91
## Worked example — "StudyStreak"
92
93
> **The project:** a focus-and-wellbeing tracker that helps VCE students log study sessions and protect their downtime.
94
> **The audience:** stressed senior students.
95
> **The one feeling:** *calm, focused, encouraging* — **not** hyped-up or gamified.
96
97
Everything on the board ladders up to that one feeling:
98
99
| Element | Choice | Why it supports *calm & focused* |
100
|---|---|---|
101
| 🟦 Deep teal | `#1F6F78` | Focus and trust; reads as grown-up, not childish |
102
| 🟩 Soft sage | `#A8C3A0` | Calm and growth — used to show progress |
103
| ⬜ Warm sand | `#F4EDE4` | A light background = breathing space, low stress |
104
| 🟧 Muted coral | `#E8845E` | A *single* warm accent for streak highlights — used sparingly |
105
| **Type — headings** | Nunito (rounded sans) | Friendly and approachable, not corporate |
106
| **Type — body** | Inter (clean sans) | Easy to read for tired eyes |
107
| **Imagery** | tidy desks, morning light, plants, journaling | Quiet, hopeful, real — not stocky or busy |
108
| **UI patterns** | rounded cards, lots of whitespace, a *growing plant* for streaks | Gentle encouragement instead of aggressive scores |
109
| **Keywords** | calm · focus · steady · encouraging · uncluttered | The feeling in words |
110
111
### What we deliberately *avoided* — and why
112
113
This is what lifts a mood board from "nice pictures" to a real design decision:
114
115
- ❌ **Neon, high-saturation "gamer" colours** — senior students read these as childish and over-stimulating.
116
- ❌ **Leaderboards and confetti badges** — competition raises stress; StudyStreak is about *your own* steady progress.
117
- ❌ **Dense, data-heavy dashboards** — clutter is the opposite of calm.
118
119
> [!TIP]
120
> **The coherence test:** pick **one** feeling, then check every colour, font and image against it. If something doesn't support that feeling, it doesn't belong on the board. A mood board that "feels like five different apps" hasn't done its job.
121
122
---
123
124
## Your turn
125
aed7fd lisa 2026-05-25 22:14:41
SD C04/C05 cleanups: fix C4 video page folds, clear reviewed DRAFT banners, trim Mood Boards Your turn - C4 video page: wrap 11 single-line >| folds with a '### Answer' summary so answers hide until clicked (matches the working glossary pattern) - Clear DRAFT banners on 7 reviewed pages (Mood Boards, Brainstorming, Mind Mapping, Design Sketches, C4-1 Checkpoint, Efficiency vs Effectiveness, Choose-then-Detail) - Mood Boards 'Your turn' trimmed to finish-and-check (no longer repeats the pause-and-build) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
126
You've already built a first draft alongside the video. Now **finish and check it**:
127
128
1. Make sure it names your **one feeling** and includes at least **5 images**, **3 colours** (each with its feeling), **2 fonts**, and a few **keywords**.
129
2. **Coherence check:** test every element against that one feeling — cut anything that doesn't fit.
130
3. Be ready to **explain your choices** — *why* this colour, font, image. That's exactly what your C4-1 annotations need.
131
4. **Credit every asset** — add a *Credits* note with the source, creator and licence of each image, font or icon you didn't make yourself.
af2ec3 lisa 2026-05-25 21:57:02
SD C04 Mood Boards: make asset credit compulsory for students + credit example assets Add IMPORTANT rule (credit every image/font/icon, even free ones; uncredited = integrity breach) and a step in Your turn; add a Credits section modelling the format for the StudyStreak example (4 CC0 photos + Nunito/Inter OFL). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
132
133
> [!IMPORTANT]
4b5d1a lisa 2026-05-25 21:57:25
SD C04 Mood Boards: avoid guessed in-page anchor, reference Credits section by name Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
134
> **Crediting your assets is compulsory.** Every image, font or icon you didn't create yourself must be credited — *even free ones*. Record the title/source, the creator, and the licence (e.g. CC0, Unsplash, SIL OFL). Using an asset without credit is an academic-integrity breach, the same as using someone's words without a reference. See the **Credits** section at the bottom of this page for the format.
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
135
136
Commit it to GitHub and add it to your printed design pack.
137
138
---
139
af2ec3 lisa 2026-05-25 21:57:02
SD C04 Mood Boards: make asset credit compulsory for students + credit example assets Add IMPORTANT rule (credit every image/font/icon, even free ones; uncredited = integrity breach) and a step in Your turn; add a Credits section modelling the format for the StudyStreak example (4 CC0 photos + Nunito/Inter OFL). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
140
## Credits — this page's example board
141
142
Crediting assets is compulsory — so here are the credits for the StudyStreak example above. Use this as the format for your own board.
143
144
**Photos** — all CC0 1.0 (public domain), found via [Openverse](https://openverse.org):
145
146
- "Laptop Apple" — JESHOOTS.com (StockSnap) — [source](https://stocksnap.io/photo/laptop-apple-N6NK9J8V0A)
147
- "Writing Hand" — Kristin Hardwick (StockSnap) — [source](https://stocksnap.io/photo/writing-hand-2FRRD2PUVA)
148
- "Tea on the countertop" — freestocks.org (Flickr) — [source](https://www.flickr.com/photos/135396164@N05/34419804081)
149
- "a cup of coffee, a flower and a laptop" — freestocks.org (Flickr) — [source](https://www.flickr.com/photos/135396164@N05/31512220131)
150
151
**Fonts** — [SIL Open Font License](https://openfontlicense.org), via Google Fonts:
152
153
- [Nunito](https://fonts.google.com/specimen/Nunito) (headings) · [Inter](https://fonts.google.com/specimen/Inter) (body)
154
155
---
156
6d150c lisa 2026-05-25 21:14:47
SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
157
## See also
158
159
- [C4-1 Checkpoint — Your Design Pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack) — where the mood board fits among the four ideation tools
160
- [C4 Design Ideas and Evaluation Explained](/sd/C4%20Design%20Ideas%20and%20Evaluation%20Explained) — the C4 walkthrough videos
161
162
---
163
164
← Back to [C04 Home](/sd/C04/C04-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)