Moodboards in UX: What They Are and How to Create Them
A moodboard is a visual representation formed by a collection of graphic elements that aim to convey a set of emotions and concepts. The idea is that with a single glance, you can understand a concept and the emotions surrounding it.
The difficulty of working in a visual profession like UX/UI Design is that everyone imagines something different when it comes to explaining the Look & Feel.
When you say that the button will be shaped like an apple, each person on the team will imagine their own version of an apple. Some will think of an apple with a bite in the corner, others of a red apple, others of a yellow apple, some will imagine it with a green leaf and others without it.
And if there can be so many versions of something as simple as an apple, imagine how complex it becomes to reach agreements on concepts like "cheerful," "modern," and "digital," to name a few examples.
In this scenario, moodboards emerge as a tool that allows you to easily communicate how a design will feel and be perceived, ensuring everyone is in agreement.
If you ask different people to draw a cup of coffee, each person will create a version with different shapes and colors according to their own preferences. This is why moodboards are a great alternative to reach a consensus among everyone to represent a concept in a unique way.
What is a Moodboard?
A moodboard is a visual representation formed by a collection of graphic elements that aim to convey a set of emotions and concepts. The idea is that with a single glance, you can understand a concept and the emotions surrounding it.
With a moodboard, you can represent and collaborate with the rest of the team on how an application or website will be perceived and seen.
Moodboards are widely used in various visual arts applications, including branding, graphics, fashion, film, industrial design, and interior design. Sometimes, they are even used in non-visual fields such as music or perfume design, to capture moods and feelings.
In UX design, moodboards are used to visually demonstrate the feelings or values that the digital product should evoke. They are accessible and easy-to-understand collages, even for individuals with little design experience.
For example, imagine that your team is creating a professional application for urban construction workers. You can list a few words that describe the visual atmosphere you're aiming for:
Motivational
Energetic
Bright
These words alone may not work well as a visual design or branding guide. Instead, you can use a moodboard with images of hardworking young construction workers and vibrant urban landscapes in a blue and yellow color palette. A moodboard will give the team visual cues about the type of application they should design.
Usually, inspiration boards are used to define the main colors of the product's user interface and visual design identity, but they can include other aspects of design as well. For example, your moodboard could also have:
Tone of voice words
Marketing or persuasive ideas
Interaction design patterns
Inspiring screenshots from other products
This collection could even be used later to help inspire a visual style guide.
Main Benefits of Moodboards
Collect design inspiration in one place
Quickly convey the tone of the product
Align interpretations and future design directions
Collaborative work: multiple people can contribute their ideas, either synchronously or asynchronously
Why create a Moodboard
For one simple reason: Words make each person imagine something different, but a moodboard will help ensure that all team members have the same thing in mind.
This way, you can make sure you are on the right track and that you won't be working on a proposal that doesn't align with what your client or manager had in mind.
When to create a Moodboard?
Inspiration boards are used in the early stages of the design process for a new product or when substantially reviewing an existing product.
For example, they can be created during the Define or Ideate phases in the design thinking cycle. They help achieve consensus on the visual style before designers begin working on prototypes.
Who participates in a Moodboard?
Generally, creative professionals such as UI designers, visual designers, platform designers, or motion designers (interaction) lead the process, but they may involve other stakeholders such as product owners, design leaders, or content managers.
Where to create a Moodboard?
The channels for building a Moodboard are endless.
You can print it out, use magazine cutouts, and place it on a physical wall or board.
You can use programs like Sketch, InDesign, Photoshop, or any design software that exists.
You can even create it online using applications like Pinterest and Milanote. However, we recommend building your Moodboard with Invision Boards (similar to Pinterest but with some tools to customize your boards).
This simplifies the process and saves you valuable time. If you're creating a mockup in Photoshop, you have to worry about design, carefully placing the images, and you won't have motion images or GIFs.
Invision is much easier than Photoshop because you don't have to install any software, and it's also better than Pinterest because it allows you to add color samples, real fonts, and it's easy to collaborate with a team or share with stakeholders.
Where to find inspiration for a Moodboard?
Google and Pinterest are the old reliable, but there is a problem with them: You will only find popular images dating back to 5 years ago. You run the risk of coming across outdated designs.
We suggest searching on websites curated by designers to find inspiration. We recommend not only looking at the most popular designs but also the most recent ones. Here are some websites to find design inspiration:
How to create a Moodboard?
1. Review the Brand Identity of the Company
If your company or team already has an established brand identity or style guides, review these documents before creating a moodboard. Use them as a starting point to ensure that your moodboard aligns with the existing standards.
2. Choose the Type of Moodboard (Physical or Digital)
Decide on the tool you will use to create your moodboard. You can create a physical or digital board.
Physical Moodboard
If you and your team appreciate hands-on activities, creating a whiteboard or foam board can be a good option. Adding and moving elements manually can stimulate inspiration and ideas.
The downside is that it's not suitable for remote teams and can be more difficult to store and share throughout the organization. Additionally, preparing and printing physical images and using tools like glue, pins, magnets, and tape can be time-consuming and wasteful.
Digital Moodboard
Essentially, all you need is a tool capable of gathering and arranging images. Many visual design, UI design, and prototyping tools support these activities.
If you plan to create your moodboard collaboratively with your team, choose a tool that everyone can work with. Digital whiteboard tools like InVision, Miro, Mural, or FigJam work well for remote moodboarding workshops.
3. Choose the Moods
Moods are essentially the emotions that people should feel when looking at your moodboard.
To choose the right moods, think about your product and users. What ambiance or mood do you want your product to deliver? How do you want your users to feel when using the product?
Consider the subtle differences between each word and choose 4 or 5 words that best represent the mood you want to convey (e.g., Tranquility, Inspiration, Excitement, Freedom, Nostalgia). This process is similar to establishing the tone of voice for a product, where you brainstorm various tone words and group them together.
Examples of Moods for an Oral Health Website:
Tranquility: Older adults feel at ease knowing about dental prosthetics as an alternative to tooth loss.
Inspiration: Children feel inspired knowing that braces can help improve their smile.
Excitement: Women feel excited knowing that teeth whitening can clean their teeth and give them a dazzling smile like a soap opera star.
4. Direction: Define the Purpose and Objectives of the Project
Think of your design as a child who wants to grow up and become an astronaut. You need to guide this child at every step of the way, nurturing their skills and abilities.
You need to give them a clear direction so that no matter who or what challenges they encounter, they can stay focused and achieve their goal. The direction is what you want your design, product, or service to be once it is launched and grows.
Start by defining the "Why":
In his book "Start With Why," Simon Sinek states that very few people can clearly articulate why they do what they do. This couldn't be more true for designers. I believe this is a lack of direction.
On a whiteboard or in your notebook, draw a circle
Why: Purpose of the Design
Why are you doing this design? Why is it relevant? Think more along the lines of why you are passionate about this design.
How: The Process
How will you make the "why" happen? Will you use a framework like Bootstrap or Material Design? How will your design be better? How will your design be innovative?
What: Business Objectives
What problem is your design trying to solve? What are the business and user objectives?
After answering, combine the why, how, and what into a single sentence, and you will have a direction.
5. Gather Images and Content
Find and collect any type of visual resources (images, illustrations, video frames, patterns, or text) that are relevant to the mood. Consider searching for visual resources in the following places:
Google image search
Pinterest, Behance, or other image curation services
Physical objects such as magazines, books, or personal artifacts
As you gather these items, look for cohesion. While a moodboard is a mix of diverse formats, they should all belong to a specific theme and convey the moods you have chosen. Avoid creating a cluttered board with contradictory images.
For example, serene and serious features should not be combined with funny and cute ones. If you have multiple distinct visual concepts in mind, create separate moodboards instead of compressing them into one.
If you have chosen a digital moodboard format, don't limit yourself to including only static images. A moodboard can contain video snippets, audio clips, magazine cutouts, gifs, colors, typography and even photographs you have taken yourself.
6. Organize the Gathered Images and Content
A good moodboard has a clear visual hierarchy. Decide the importance of each mood and make key elements larger or place them in the center.
You can also group resources of the same type to help others navigate your moodboard easily. Use white space to create neat separation between each element.
Remember, the moodboard serves to represent how the project at hand will be perceived and seen. You don't have to make it perfectly aligned or excessively messy like a collage; it depends on your preferences.
7. Share the Board with Your Team
If you created a moodboard on your own, it's a good idea to allow your team members to provide feedback and suggestions.
If you collaborated with some of your team members to create a moodboard, share the finished board with the rest of your team or department. Clearly communicate your justification for choosing the moods and images.
If each team member created a different moodboard, gather the boards created by your colleagues in one place and compare them. You'll see some common and different ideas as everyone has unique visual perspectives.
Provide feedback to your colleagues by leaving sticky notes directly on the board. Use color coding if necessary, such as green for what you want to remove and red for what you want to avoid.
TARGETED INSPIRATION IN THE RIGHT DIRECTION
Sometimes, as creatives, we simply fall in love with a design or element, but just because we like it doesn't mean that particular font or color fits the project we are working on.
A moodboard will be useful in aligning everyone and ensuring that you are designing the interface in the right direction.
Furthermore, it can also be helpful when you're designing and lacking inspiration: referring back to it will help you perceive again what was intended to be represented.
