DRAFT — under teacher review.

Mood Boards

The Hamilton and Alexandra College · Year 12 · 2026

A mood board is one of the four ideation tools in your C4-1 design pack. If you've never made one, start here.

What is a mood board?

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

Why bother?

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: building one (10 min)

🎯 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 (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.

Worked example — "StudyStreak"

The project: a focus-and-wellbeing tracker that helps VCE students log study sessions and protect their downtime. The audience: stressed senior students. The one feeling: calm, focused, encouraging — not hyped-up or gamified.

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

What we deliberately avoided — and why

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.

Tip

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.

Your turn

Open Excalidraw, Canva, or Obsidian.
Write your project's one feeling at the top (the hardest and most important step).
Add at least 5 images, 3 colours (with their feeling), and 2 fonts.
Add a few keywords.
Check every element against your one feeling — cut anything that doesn't fit.
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.