← VCE Software Development U3O2

Mood boards

A collage of colours, images, fonts and styles that shows the look and feel wanted for a design, helping a team agree on a visual direction before building the interface.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 86, VCE Data Analytics - U3O2 - Analysis and Design — Module 122, QCE Digital Solutions Unit 3 — Innovative Digital Solutions — Module 11

Understanding Mood boards in VCE Software Development U3O2

What it does: Describing the type of icons and photos is the imagery part of a mood board. It sets the visual feel that the team will aim for. Design style is the overall look and feel, such as minimal, playful or professional. Agreeing on it early keeps the whole team consistent. A colour palette shows the colours the design will use. Swatches let the team see how they work together. Typography and colour set the mood. Calm, simple choices suggest trust and professionalism, which suits banking. Typography covers the fonts, sizes and text styles. Sample text shows how they might look in the interface.

Common mistakes: The imagery must match the calm, focused look and feel set for the board. Loud party photos clash with it. It should be something like 'Images: quiet study photos'. The project named on the board does not match the colours, fonts and images, which are all aimed at children. The title should be 'Mood board: Kids reading app'.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Mood boards to a class →

This module's key terms are also in a printable crossword (Modules 86–109) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which best describes a mood board?
A diagram showing how data flows between processes and storesA collage of colours, images and fonts showing the look and feel wanted
Matches
Mood board: a working prototype with buttons that students click to test the login
↓
A mood board is not a working prototype. It is a collage of colours, images, fonts and styles that shows the look and feel, not how the interface works.
Applying
Meanings
Term
mood board
Meaning
A collage of colours, images, fonts and styles that shows the look and feel wanted for a design, helping a team agree on a visual direction before building the interface.
Practice
<style>
Testing
Gaps
body { : #F4E9D8; }
Check Answer
Spots
3Fonts: Roboto, Open Sans
4Images: loud party photos

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Warthog' badge — Definition Digger, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which best describes a mood board?
A. A diagram showing how data flows between processes and stores
B. A collage of colours, images and fonts showing the look and feel wanted ✓
A mood board gathers visual ideas in one place so a team can agree on the look and feel before building the interface.
2. When is a mood board most useful in a software project?
A. Before building the interface, to agree on a visual direction ✓
B. After release, to test whether the code runs without errors
Mood boards support ideation and design early on. They help the team agree on a direction before time is spent building the interface.
3. Which item belongs on a mood board for a colour palette?
A. Swatches of the main, accent and background colours ✓
B. A list of the variables and data types in the program
A colour palette shows the colours the design will use. Swatches let the team see how they work together.
4. A team wants a calm, professional look for a banking app. Which mood board choice fits?
A. Soft blues and greys with a clean, simple sans-serif font ✓
B. Neon colours with a mix of bold decorative fonts
Typography and colour set the mood. Calm, simple choices suggest trust and professionalism, which suits banking.
5. Which is an example of typography on a mood board?
A. A Gantt chart showing the order of tasks
B. Sample headings and body text in the fonts being considered ✓
Typography covers the fonts, sizes and text styles. Sample text shows how they might look in the interface.

Match the Pairs

Colour palette: #1E3A8A, #FFFFFF, #F59E0B → The set of colours chosen for a mood board, such as a main colour, a background and an accent colour
Typography: Roboto Bold (headings), Open Sans (body) → The fonts picked for a mood board, showing the type styles to use for headings and body text
Imagery on a mood board shows the kind of photos, icons and illustrations that suit the design's look and feel → Imagery: flat line icons, bright beach photos
A design style on a mood board describes the overall look, so the team agrees on a visual direction before building → Design style: minimal, modern, lots of white space
Mood board: a working prototype with buttons that students click to test the login → A mood board is not a working prototype. It is a collage of colours, images, fonts and styles that shows the look and feel, not how the interface works.
Mood board: a list of the program's functional requirements and data types → A mood board shows the look and feel (colours, fonts, images, style), not functional requirements or data types.

Key Term

mood board
A collage of colours, images, fonts and styles that shows the look and feel wanted for a design, helping a team agree on a visual direction before building the interface.

Fill in the Blanks

1. body { background-color: #F4E9D8; }
Hint: Type the CSS property that fills an area with a palette colour chosen on the mood board.
2. h1 { font-family: Georgia, serif; }
Hint: Type the CSS property that sets the typeface picked for the mood board's typography.
3. div { background-image: url("sea.jpg"); }
Hint: Type the CSS function that loads a picture, like the imagery collected on the mood board.
4. button { border-radius: 12px; }
Hint: Type the CSS property that rounds corners to match a soft, friendly design style.
5. h1 { color: var(--accent); }
Hint: Type the CSS function that reuses a saved palette colour so the design stays consistent.

Spot the Error

Question 1
A Mood: calm and focused
B Palette: navy, teal, white
C Fonts: Roboto, Open Sans
D Images: loud party photos
E Style: clean and minimal
Line D — The imagery must match the calm, focused look and feel set for the board. Loud party photos clash with it. It should be something like 'Images: quiet study photos'.
Question 2
A Mood board: Law firm website
B Palette: yellow, orange, sky
C Fonts: rounded, friendly
D Images: cartoon animals
Line A — The project named on the board does not match the colours, fonts and images, which are all aimed at children. The title should be 'Mood board: Kids reading app'.
Question 3
A Board: Fitness tracker
B Palette: pastel pink, beige
C Fonts: bold sans-serif
D Style: energetic, modern
Line B — Soft pastel colours do not suit the energetic, modern style of a fitness tracker. The palette should use high-energy colours such as black and neon green.
Question 4
A Board: Bank app
B Palette: navy, grey, white
C Headings: serif, bold
D Body: tiny decorative script
Line D — Typography on a mood board should be readable and suit the purpose. Tiny decorative script is hard to read for body text. It should be 'Body: readable sans-serif'.
Question 5
A 1 Collect colours and images
B 2 Write the final code first
C 3 Team discusses the look
D 4 Agree on a visual direction
Line B — A mood board is made before building the interface. Step 2 is to arrange the collected items on one board, not to write the final code.

Student with a class code? Join your class →