The Hamilton and Alexandra College · Year 12 · 2026

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.

---

A mood board is a **visual collage that captures the *look and feel*** of your software — *before* you design any real screens. It gathers the things that set a creative direction:

- **Colours** — a small palette (3–5 colours)

- **Typography** — 1–2 fonts you'd use

- **Imagery & texture** — photos, icons, UI patterns, screenshots of apps that inspire you

- **Keywords** — a few words for the feeling you want (e.g. *calm, playful, trustworthy*)

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?"*

- It **sets the direction early**, so your later sketches and detailed designs are consistent instead of random.

- It's a fast way to **explore and compare** visual ideas before committing.

- It gives you **reusable assets** — the colours and fonts you choose here carry straight into C5.

---

**🎯 Watch for:** how the designer picks a *feeling* first, then chooses colours, type and images to match it — not the other way around.

▶ [How To Create a Mood Board — Design Process for App UI](https://youtu.be/UsPKDV7ozfI) (NAM Design)

The video builds the board in Miro; you can use **Excalidraw, Canva, Obsidian, or even a Google Slide** instead — the thinking is the same.

---

Everything on the board ladders up to that one feeling:

| Element | Choice | Why it supports *calm & focused* |

|---|---|---|

| 🟦 Deep teal | `#1F6F78` | Focus and trust; reads as grown-up, not childish |

| 🟩 Soft sage | `#A8C3A0` | Calm and growth — used to show progress |

| ⬜ Warm sand | `#F4EDE4` | A light background = breathing space, low stress |

| 🟧 Muted coral | `#E8845E` | A *single* warm accent for streak highlights — used sparingly |

| **Type — headings** | Nunito (rounded sans) | Friendly and approachable, not corporate |

| **Type — body** | Inter (clean sans) | Easy to read for tired eyes |

| **Imagery** | tidy desks, morning light, plants, journaling | Quiet, hopeful, real — not stocky or busy |

| **UI patterns** | rounded cards, lots of whitespace, a *growing plant* for streaks | Gentle encouragement instead of aggressive scores |

| **Keywords** | calm · focus · steady · encouraging · uncluttered | The feeling in words |

This is what lifts a mood board from "nice pictures" to a real design decision:

- ❌ **Neon, high-saturation "gamer" colours** — senior students read these as childish and over-stimulating.

- ❌ **Leaderboards and confetti badges** — competition raises stress; StudyStreak is about *your own* steady progress.

- ❌ **Dense, data-heavy dashboards** — clutter is the opposite of calm.

---

1. Open **Excalidraw, Canva, or Obsidian**.

2. Write your project's **one feeling** at the top (the hardest and most important step).

3. Add at least **5 images**, **3 colours** (with their feeling), and **2 fonts**.

4. Add a few **keywords**.

5. Check every element against your one feeling — cut anything that doesn't fit.

6. Be ready to **explain your choices** — *why* this colour, this font, this image. That explanation is exactly what your C4-1 annotations need.

Commit it to GitHub and add it to your printed design pack.

---

- [C4-1 Checkpoint — Your Design Pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack) — where the mood board fits among the four ideation tools

- [C4 Design Ideas and Evaluation Explained](/sd/C4%20Design%20Ideas%20and%20Evaluation%20Explained) — the C4 walkthrough videos

---

← Back to [C04 Home](/sd/C04/C04-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)