Mood boards

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1Colour palette: #1E3A8A, #FFFFFF, #F59E0B		AThe fonts picked for a mood board, showing the type styles to use for headings and body text
2Typography: Roboto Bold (headings), Open Sans (body)		BA mood board shows the look and feel (colours, fonts, images, style), not functional requirements or data types.
3Imagery on a mood board shows the kind of photos, icons and illustrations that suit the design's look and feel		CImagery: flat line icons, bright beach photos
4A design style on a mood board describes the overall look, so the team agrees on a visual direction before building		DDesign style: minimal, modern, lots of white space
5Mood board: a working prototype with buttons that students click to test the login		EA 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.
6Mood board: a list of the program's functional requirements and data types		FThe set of colours chosen for a mood board, such as a main colour, a background and an accent colour

Definitions

mood board

Fill in the Blanks

Complete each line of code by filling in the missing parts.

body { ________________: #F4E9D8; }

h1 { ___________: Georgia, serif; }

div { background-image: ___("sea.jpg"); }

button { _____________: 12px; }

h1 { color: ___(--accent); }

Spot the Error

Shade in the letter of the line that contains an 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

Question 2

A Mood board: Law firm website

B Palette: yellow, orange, sky

C Fonts: rounded, friendly

D Images: cartoon animals

Question 3

A Board: Fitness tracker

B Palette: pastel pink, beige

C Fonts: bold sans-serif

D Style: energetic, modern

Question 4

A Board: Bank app

B Palette: navy, grey, white

C Headings: serif, bold

D Body: tiny decorative script

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

Answer Key

Mood boards

Section A: Quick Questions

B — A collage of colours, images and fonts showing the look and feel wanted

A — Before building the interface, to agree on a visual direction

A — Swatches of the main, accent and background colours

A — Soft blues and greys with a clean, simple sans-serif font

B — Sample headings and body text in the fonts being considered

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

body { background-color: #F4E9D8; }

h1 { font-family: Georgia, serif; }

div { background-image: url("sea.jpg"); }

button { border-radius: 12px; }

h1 { color: var(--accent); }

Section E: Spot the Error

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'.

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'.

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.

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'.

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.