Illustration by Tracy Dai
When starting a user-centered project, it is easy to think of brainstorms, UI design, wireframes, and sophisticated prototypes. An initial step, often underestimated by UX designers, is to set the tone that will guide and inspire the team during the entire creative process. That’s where mood boards come in.
Professionals from all creative fields use mood boards as a powerful tool for visualizing ideas and concepts given their great ability to synthesize abstract concepts such as emotions, desires, and thoughts.
What is a mood board?
Mood boards are visual panels that bring together different sensory references that create an emotional environment that works as a guiding thread for creative decisions.
The mood board is able to maintain plurality and autonomy while also directing and aligning. It thus balances the seemingly contradictory challenges of organizing creative people.
—Endrissat, Islam, Noppeney
Photos, illustrations, colors, animations, fonts, textures, and even smells can compose a mood board that will serve to illustrate the emotions we want to evoke in the users and also to align the creative vision.
Why use a mood board?
These panels are used to connect ideas in an abstract way, unifying the vision from stakeholders, users, and the design team. They work as a centralized asset repository and can be accessed at any time by the team. Mood boards are useful for:
- Research documentation. Several research steps can be taken in the form of mood boards such as benchmarking research, definition of personas, and ideation of user interfaces.
- Exploration and guidance for designers. At the beginning of the project, a mood board is a space where designers can explore their ideas freely, without judgment. When a board is concluded, it becomes a reference for the team throughout the project.
- Unifying visions. An idea is, by definition abstract, and outlining thoughts is one of the most important roles of a digital or physical board. Different stakeholders can contribute with their visions and reach a common ground, making everyone more confident about the direction of the project.
Types of mood boards
A mood board can be physical or digital, and both have their values: Digital boards are quicker to assemble, format, and accept natively digital references such as animations and GIFs. Physical boards require greater effort to be formatted and can be exposed in physical environments such as on the wall of a working space.
In the physical version, it is possible to explore objects such as paints, fabrics, papers, metals, and perfumes more completely in addition to organic materials such as plants. Some of these elements, when reproduced digitally, lose parts of their meaning, such as those associated with touch or smell.
Digital boards, on the other hand, can take advantage of their native environment and aggregate an immense amount of information that becomes accessible in a much more practical way. This type of board favors remote teams and the media catalog, such as videos and animations.
What does in a mood board include?
It can include any reference, but the most important thing is the correlation and balance between all the elements that compose the mood board. Some common elements are:
Colors – Register the colors of the brand or competitors, try new palettes related to the emotions you want to explore within new concepts.
Trending color palettes give UX designers inspiration.Image credit Coolors.Images – There are many image options. It is possible to explore photographs that translate the desired concepts or even build a gallery of logos, icons, and illustrations for future reference.
Colorful mango photos can help designers explore a design concept. Image credit Unsplash.Animations – Easily recorded on digital mood boards, animations contain emotional elements that make up a complete experience, such as easy curve references, progress bars, animated loading icons, interactions on scroll, or micro-interactions.
Neon loading animations contain design elements that make up the complete experience. Image credit Kowsar Ahammad Mamun.Fonts – Look for type families that can help you to compose your visual paths, reinforcing, or contrasting ideas present on the board.
Designers can explore new fonts at Typewolf. Image credit Typewolf.Textures and Patterns – These are great ways to evoke affectional memories and can indirectly indicate established concepts.
Behance is a great option to find reference materials like patterns. Image credit Zebra Finch.Text – Organize your notes, insights, keywords, or quotes, along with other elements of the board, to emphasize your ideas.
Thyra uses words to highlight areas on the mood board. Image credit Thyra de Graaf.Good references can be found all over the Internet. Here are some shortcuts to get started: Coolors, Adobe Color, Pinterest, Behance, Dribbble, Instagram, Typewolf, Unsplash, Adobe Fonts, Ouch!, Icon Store, and Font Squirrel.
How to make a mood board
There are many techniques for creating mood boards; it’s important to understand which one best suits your project and creative team. In web or app design projects, a digital board is recommended to collect references from animations, micro-interactions, and typography; however, having a physical board in the office can be a constant reminder to everyone who sees it.
Follow these key steps for creating effective and user-centered mood boards:
Understand your purpose
Before you start collecting the pieces of the puzzle, choose the main path. Create a clear statement that spells out what emotion should be activated in a persona when they contact your solution:
“When Edith installs our app, she must be motivated to start exercising.”
Find your tone
Setting the tone of the brand helps to prepare an effective mood board. A simple exercise is to choose some keywords that represent the team vision. The tone words can be registered on the board itself so that they are always accessible to everyone.
Gather data on the topic
Do a little more research on the topic before you start looking for visual references. Gather notes taken during meetings, survey data from users, and interviews with customers to try to extract insights for the project.
Define your values
When starting with a mood board, set clear values from the beginning, such as modern, fun, childish, colorful, or sporty. To facilitate the reference selection process, define three or four adjectives for your board.
Think big, then small
Start by defining large groups within the main theme and go deeper into each one, which will organize the discovery process.
Be selective
Don’t simply put something on your mood board. Choose only what will make a difference in the direction of the project. If in doubt about very similar pieces, choose only one to represent that idea.
Visually organize your references
Use the size of each element to enhance its importance in the composition. Larger photos and larger phrases naturally function as prominent points during this organized chaos.
Where can you create your mood board?
There is no shortage of tool options to help designers gather references. These are some great options to start:
- Niice – This is one of the most complete solutions for creating mood boards. It allows several levels of customization, including support for video embeds and 3D models, as well as a convenient extension for browsers that facilitates the inclusion of any item on your boards.
- Savee – This gets straight to the point so you can create and share mood boards without complications. It also has options for synchronizing with Dropbox, with optimized printing and importing images from Instagram and Pinterest.
- Behance – You can save any project published on Behance on private or public mood boards within your profile. This is very useful when you need to collect many references without having to browse the web.
- Adobe XD – This is good option if you need to create a personalized experience without predefined templates. If you want to take it a step further, you can create interactive boards and custom flows in addition to plugins like Mimic that help you capture styles from any website.
- Moodboard – This is a good choice if you need to create express mood boards.
- Photoshop – If you want to have total creative control, this is the most powerful and versatile tool to build a board.
9 Inspiring mood boards
Here are some physical and digital mood board examples that capture the spirit of your projects, inspire, and direct creative teams around the world:
From left to right: Black is the New Black. Image credit Laís Sena. Organic pleating. Image credit chrometry. Fashion communication plan for Melissa brand. Image credit Júlia Colin. Mood board Inspired by Geisha, a Life. Image credit Ipshita Chatterjee.Evoke emotions and guide your creative process
The process of creating mood boards—besides being fun and collaborative—serves to unite professionals and stakeholders, leaving individualities aside and giving way to a collective vision of success. Enjoy this moment of relaxation and team unity. It is an opportunity to inspire everyone in a playful way, creating a final product aligned from the beginning to the final design of the interface.