lesson 4.3 - mood boards
Learn how to capture the vibe of a digital project! Discover how to build mood boards to nail visual identity and keep clients happy before real design work begins.
Have you ever tried to decorate a room, but ended up buying a blue rug, green curtains, and neon pink cushions? It probably looked like a disaster! Designing a user interface without a visual plan is exactly the same. Before we start building buttons and menus, we need to decide on the "vibe". Today, we are leaving the spreadsheets behind and getting creative. We are going to learn how to build a Mood Board: a digital collage of colours, fonts, and images that sets the style for our entire project. Let's get visual!
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the definition of a mood board and its purpose in the early stages of a design project.
Describe the typical components found on a mood board, such as colour palettes, typography samples, and imagery.
The Connections and Theories (Conceptual Knowledge)
Analyse how the visual elements chosen for a mood board must reflect the needs of the target audience and the client brief.
Evaluate the benefits of using a mood board to gain client approval compared to jumping straight into creating a high-fidelity prototype.
The Skills and Methods (Procedural Knowledge)
Apply design principles to select appropriate visual assets that communicate a specific theme or emotion.
Create a professional digital mood board for a given user interface scenario.
Digital Skill Focus: This lesson focuses on developing your ability to source, curate, and combine digital media assets to communicate a cohesive visual concept.
What is a Mood Board?
Before a single button or menu is designed for a user interface, designers need to agree on a visual identity. A mood board is a digital or physical collage of visual elements designed to capture the intended "feel" or atmosphere of a project. Think of it as a brainstorming canvas for aesthetics.
Instead of spending hours creating a high-fidelity prototype that the client might reject, designers use mood boards to quickly secure client approval on the overall style.
The Core Ingredients
A professional mood board isn't just a random collection of pretty pictures. It is carefully curated to reflect the target audience and the client brief. It typically includes:
Colour Palette: A selection of 4-6 primary and secondary colours that work harmoniously.
Typography: Examples of fonts for headings and body text that match the project's tone.
Imagery: Photographs, illustrations, or icons that represent the brand's style.
Texture & UI Elements: Examples of button styles, background patterns, or navigation bars.
Task Mastering the Mood
It is time to step into the shoes of a Lead UI Designer! Your client wants a fresh new look, and it is your job to set the visual tone before any coding begins.
1
Get Organised!
Find a partner and choose one of the following client briefs:
GreenDeck (Eco-Skateboarding App)
Client: GreenDeck Co.Target Audience: Environmentally conscious teenagers and young adults (13-24).
Project: A mobile app for users to buy and sell upcycled skateboards, and find local "green" skate parks.
Required Vibe: Energetic, sustainable, and slightly rebellious. It needs to feel fresh and eco-friendly, but still deeply connected to urban street culture. Avoid looking like a boring corporate recycling poster!
Vault (Digital Banking App)
Client: Vault FinancialTarget Audience: Young professionals, freelancers, and tech-savvy adults (22-40).
Project: A high-security, digital-only banking interface for managing investments, crypto, and daily spending.
Required Vibe: Sleek, minimalist, trustworthy, and premium. The client wants to move away from traditional "boring bank" blues and is very interested in a modern "dark mode" aesthetic with high-contrast accent colours.
CozyBites (Bakery Delivery App)
Client: The CozyBites BakeryTarget Audience: Families, parents, and older adults who want convenient comfort food and custom cakes.
Project: A tablet-friendly application for ordering fresh pastries and cakes for local delivery.
Required Vibe: Warm, inviting, rustic, and highly accessible. The text must be very easy to read for older users. The colours should feel homely and make the user feel hungry and happy—think warm dough, rich chocolate, and pastel icings.
Open your preferred design software (like PowerPoint, Google Slides, or Canva).
2
Brainstorm the Vibe
1
Firstly, let's do some research online to get us into the groove. Check out these UI Design Mood Board Examples to see how professional designers lay out their ideas.
2
Now let's fire up AI Mode to get some quick tips for making a banging mood board. Read and click the prompt...
Act as a supportive, expert computer science tutor. Explain how a mood board helps a designer understand the target audience. Explain this so a 14-year-old KS4 student can understand. Keep the tone encouraging, clear, and avoiding overly academic jargon. Limit your response to 2 short paragraphs. Include 1 real-world analogy. NO intro, NO outro, NO deviation from the topic, NO follow-up questions.
3
Perform your own Google competitor search for your chosen client:
If you chose GreenDeck, search for eco friendly skateboard manufacturers.
If you chose Vault, search for successful digital banking apps
If you chose CozyBites, search for youthful fast food bakery outlet
4
Now, with your partner, spend 5 minutes coming up with 5-10 keywords that describe the emotion and target audience of the app. (e.g., "Energetic", "Eco-friendly", "Youthful").
3
Curate Your Collection
Working individually, search for visual elements that match your keywords.
Build your digital collage. You MUST include:
At least 4 distinct colour swatches (use Paletton to help)
2 examples of typography, one for headings, one for reading. (Use Google Fonts to help.)
4 to 6 images or textures that capture the brand's essence. (Use Pixabay to help).
4
Submit your masterpiece
Submit your mood board to your teacher.
Outcome: A completed digital mood board that clearly communicates a specific visual identity and satisfies the client brief.
Application to the Component Sample PSA
Application to Majestic Cinema (Component 1)
For the Majestic Cinema brief, you are tasked with creating a new user interface. Before you start dragging and dropping buttons into a prototype, you need to decide on the "vibe". Will it be a classic, retro Hollywood feel with dark reds and golds, or a modern, sleek streaming-style interface with dark mode and neon accents? Creating a mood board allows you to present these different visual identities to the cinema management and get their approval before you waste time building the wrong thing.Application to Pedal Power Cycles (Component 2)
For the Pedal Power Cycles brief, you will be designing a data dashboard. Even dashboards need a visual identity! A mood board here would help you establish a colour palette that matches their brand—perhaps eco-friendly greens and energetic oranges—and select clear, readable typography that makes the data easy to understand at a glance.Out of Lesson Learning
⭐ The Colour Collector
Look around your home or browse a favourite app on your phone. Find three items or screens that share a similar colour palette. Write down a list of the 4 main colours you see and describe what "mood" or "emotion" those colours create together (e.g., calm, energetic, professional).
Look around your home or browse a favourite app on your phone. Find three items or screens that share a similar colour palette. Write down a list of the 4 main colours you see and describe what "mood" or "emotion" those colours create together (e.g., calm, energetic, professional).
⭐⭐ Majestic Font Finder
Imagine you are presenting font choices to the Majestic Cinema manager. Find or draw two completely different styles of lettering (one retro/classic, one modern/digital). Write a short paragraph for each, justifying why it would or wouldn't work for the cinema's new user interface based on the target audience.
Imagine you are presenting font choices to the Majestic Cinema manager. Find or draw two completely different styles of lettering (one retro/classic, one modern/digital). Write a short paragraph for each, justifying why it would or wouldn't work for the cinema's new user interface based on the target audience.
⭐⭐⭐ The "Anti-Brief" Mood Board
Pick the Pedal Power Cycles scenario. Your task is to plan the WORST possible visual identity for an eco-friendly bike shop. Write down a list of colours, fonts, and types of images that would completely contradict their brand (e.g., gas-guzzling cars, toxic neon colours). Write a short evaluation explaining why these choices would fail the target audience and upset the client.
Pick the Pedal Power Cycles scenario. Your task is to plan the WORST possible visual identity for an eco-friendly bike shop. Write down a list of colours, fonts, and types of images that would completely contradict their brand (e.g., gas-guzzling cars, toxic neon colours). Write a short evaluation explaining why these choices would fail the target audience and upset the client.
Last modified: March 12th, 2026
