How to Create UI Design Mood Boards? A Complete Guide
A mood board is an excellent way of communicating the design concept accurately. It puts the
feelings and thoughts behind a particular project into a visual presentation. It is a powerful
communication tool that helps diminish uncertainty about what the final product would look like.
A visual board can communicate the look and feel of the design better than words. This article
will explain the concept of UI design mood boards and how you can create one.
A mood board is a digital or physical collage. It contains different digital assets such as text,
fonts, images, icons, logos, and other digital elements. Mood boards help create:
● Website designs
● App designs
● Product designs
● Service designs
● Brand designs
What is a UI Design Mood Board?
You might be wondering why creating a mood board is essential. A particular website, app, or
service can be designed in millions of ways. If you start working without a detail-oriented mood
board, you will keep straying from the design concept you have in mind. Mood boards allow the
designers to stay focused and confident.
Importance of UI Mood Boards
Benefits of Mood Boards
Here are some of the benefits of mood boards.
1. Mood Board Creates a Design Reference
Your mood board is the reference you can look back at whenever you feel stuck. If you are
trying to decide whether or not you should use a particular font style or color, you can refer to
the mood board to get a clear answer.
2. Mood Board Saves Precious Time
You might think that the process of designing a mood board delays the actual work. In fact, a
project outlined by a mood board will likely only need a few revisions or changes in the later
stages. Mood board saves a lot of time and energy for the designers.
3. They Help Create Coherent Designs
Mood boards are a great way to communicate with your subconscious mind. Making a mood
board can transfer a design from your mind to the real world.
Sometimes the design in your head feels perfect until you present it as a mood board. You can
easily modify and refine your design on a mood board until everything goes well with each
other.
4. They Help Communicate Better
When it comes to design, misunderstandings are common. Your view of a minimalistic design
might not be as minimal as someone else's. Translating your client’s words into a practical
mood board can help ensure everyone is on the same page.
Types of Mood Boards
Before learning how to make a mood board, it is important to explore different types of mood
boards. We can classify the types of UI mood boards based on the following:
● Type of content
● Method of Creation
Based on the Content Type:
1. Practical UI Mood Board
A practical UI mood board depicts the final product quite clearly. It showcases the color palette,
font size, and style and includes actual images to be used.
This type of mood board allows the designer to complete the design process quickly.
2. Provisionary UI Mood Board
This type of mood board conveys a general idea about the project's mood. There are a lot of
design possibilities that align with an exploratory UI mood board.
It is essential to present a provisionary mood board to the client to avoid conflict at later stages
of the design process.
Based on the Method of Creation
1. Physical Mood Board
You can make a physical mood board by pinning visual resources on a physical foam board.
This type of mood board is more realistic. It allows you to use actual products like pieces of
string or rope.
In addition, you can use images from magazines or scraps of newspapers to accurately convey
the final product's vibe.
By taking a picture, you can share your physical mood board as conveniently as a digital board.
2. Digital Mood Board
This type of mood board is made by looking for inspiring visuals online. You can start by looking
for photos on google or Pinterest.
Many valuable tools on the internet allow users to create mood boards in a few simple steps.
More Articles to Read
What Is Included in a UI Design Mood Board?
The answer to this question largely depends on the type of project. The number and type of
elements vary according to the type of project. For example, a mood board for a particular
product would have fewer elements than an entire brand.
This list of common mood board elements will give you an idea of what should be included in a
mood board.
Images
Add images that convey the mood you wish to create. Search online to find photos with the
same colors as your chosen color palette. You can include images of the product you are selling
or anything that sets the vibe.
For example, if you want to represent human interaction, you can add photos of your eyes.
Similarly, you can add images of trees to describe nature. Images can also include a logo of the
company.
Fonts
Each font style conveys a different message. For example, Calibri is considered as clean. Some
styles represent a modern style, while others give a traditional vibe. Designers need to
understand the meaning behind the font styles to choose the right fonts.
Colors
Color is a valuable communication tool. Using the right colors, you can influence the audience's
mood and drive action. We all know that blue color has a calming effect.
As a designer, it is essential to understand color psychology to use colors effectively.
Icons
A mood board is an excellent place to showcase the design and style of the icons you would be
using. You can create your icons by taking design inspiration from platforms like The Noun
Project.
Text
Mention important things like style keywords or anything that emphasizes the coherence of
different mood board elements.
Videos
People usually create static mood boards. But adding a video or an animated gif to your mood
board makes it more expressive and interactive.
How to Create a UI UX Design Mood Board?
1. Perform User Research and Analysis
Conduct thorough research to gather information and insights about the potential audience. It is
essential to define the personas before actually making the mood board.
A user persona refers to a profile of the product's target audience. It is made by using real aggregated data about the age, gender, occupation, education, and preferences of the end user. Understanding the user or target audience helps create a user-oriented UI mood board.
2. Arrange Interviews for Stakeholders
Talk to the product manager, UX and UI designers, and developers to identify brand guidelines.
Get a clear picture of what they are looking for and set up a clear strategy.
At this stage, you should pay close attention to their keywords. Soft, feminine, clean, and human
are some examples of keywords. You will be using these keywords to search for images in later
steps.
3. Conduct Competitive Analysis
Analyze your market competitors. You will find a lot of good examples and many bad ones.
Take screenshots of the ones that inspire you. Also, take notes from the bad ones to understand what not to do.
Market research is also vital to creating a unique mood board. When you have screenshots from
competitors’ sites, you can make a mood board that looks nothing like their design.
4. Create Mood Statements
Mood statements depict the mood and feelings of your potential customers when they interact with your product or service design. These are short sentences that convey an emotion
The noun represents the user persona.
An adjective is the user’s feeling and emotion.
Verb depicts the user action that triggers the emotion.
The product/service part tells about the design interaction.
5. Define the Mood
Define the user’s moods after creating the mood statements. These moods are the emotions triggered as a result of interaction with the mood board. You can define multiple moods based on the number of personas. Your mood statements must align with users’ emotions while interacting with your mood board.
6. Identify the Mood Board Style
List the adjectives on sticky notes defining different visual styles. These adjectives serve style keywords and guide the design process. Shortlist 4 keywords that best describe the look and feel of your mood board. Finalize the style for your mood board.
7. Discover the Voice and Tone of the Mood Board
The voice and tone determine how you want to address your customers, friendly, professional, optimistic, loyal, joyful, etc. it should align with the mood your mood board showcases. For example, the voice and tone can be deep and serious for a monotone mood board.
Choosing an appropriate voice is crucial for creating an effective mood board.
8. Set a Clear Direction
Figure out how to process your mood board forward. Setting a clear direction toward a successful mood board design is essential. Ask three critical questions to yourself.
Why:
Why do you need to create the mood board? Why is this important?
How:
How will you carry out the design process?
How can you make it better than your competitors?
How can your mood board design be successful?
What:
What are the user problems?
What are your goals and objectives?
Combine all the answers to these questions and craft your mood board direction.
9. Set Mood Board Language
Language defines how you communicate with the audience. It can be illustration, photography, or interaction. Your chosen language will determine what should be included in a mood board.
In this step, you will figure out which elements should be used in your mood board. Depending on the language, you can include captivating images, engaging videos, or simple text.
10. Build Your Mood Board
Finally, the crucial stage comes. You will need to build your mood board. You can use mood board software such as Photoshop, Sketch, InDesign, and Adobe XD. Some critical components of a mood board are
Fonts: Use fonts compatible with your brand identity.
Colors: Use an impressive color scheme according to your brand identity. Choose colors that trigger the desired emotions.
Interactions: Use an interaction library to add several interactive tools and icons to your mood board.
Photography: Select high-quality photography for your mood board. iStock, Adobe Stock, and Unsplash have quality photography.
Illustration: Behance and Dribble have quality inspirations for mood board illustrations. You can take inspiration from there
11. Build your mood board
Define the user’s moods after creating the mood statements. These moods are the emotions triggered as a result of interaction with the mood board. You can define multiple moods based on the number of personas. Your mood statements must align with users’ emotions while interacting with your mood board.
12. Identify the Mood Board Style
List the adjectives on sticky notes defining different visual styles. These adjectives serve style keywords and guide the design process. Shortlist 4 keywords that best describe the look and feel of your mood board. Finalize the style for your mood board.
Mood Board Inspirations
To create a unique mood board, it is crucial to take inspiration from existing mood boards. These mood board examples will help you create one that represents your style.
Making an appealing user-oriented mood board ensures that the whole project will run
smoothly. Mood boards serve as a guideline to look back at whenever you get confused.
Perfecting the mood board before moving to the next step is crucial. You can easily modify your
mood board after getting feedback from the client. Once the entire team has decided on a mood
board, it will bring harmony and help complete the project promptly.
