Published in · 7 min read · Apr 10, 2019
--
Setting the mood is a very important step for any design project. It helps designers and stakeholders get on the same page for the visual aspects of the project. In UX Design and product design, a mood board is a collage of images, fonts, interactions, features, icons, and UI elements to communicate the artistic direction of a project. As everything in user experience design your mood board should be focused on meeting user needs and problem-solving. Here are a few tips before getting started on your mood board:
Conduct user research. Before starting on a mood board make sure you have enough insight on your audience it’s best to define personas first.
Conduct stakeholder interviews. Ask for brand guidelines, if there is none don’t be afraid to ask for visual design references. What should the product look like? How should it feel? These are questions you should be asking stakeholders. Pay close attention and look for keywords most clients use terms like clean which tends to mean lots of negative space and organized layout they just don’t know our design lingo.
Know your market and competitors. Look for market standards in color psychology, typography, and overall design. See what competitors are doing wrong and what they are doing right: conduct a competitive audit.
The first step of your mood board is to define user-centered mood statements. Before we get into the statements it's important to know what a mood is, according to Oxford dictionary
“A mood is a temporary state of mind or feeling.”
Mood statements are short sentences that define how your user should feel when interacting with your product service or feature. The simple sentence format includes:
Noun: The noun is a user persona make a mood statement per persona
Adjective: The adjective is an emotion, a feeling. How should this persona feel?
Verb: What action is the persona taking that triggers this emotion?
Product/Service: What feature is the persona interacting with when creating an emotional response.
Now that you have all your mood statements you can set the mood by defining an emotional response. Highlight the emotion in each of your mood statements or write them down separately depending on how many user personas you have you will end up with 2–5 emotions. These emotions are what people should feel when looking at your mood board. The emotion the mood board triggers should align with your mood statements.
The visual style is how the design should look, the fonts you’ll use, the colors and photography. On sticky notes, on a whiteboard or in your notebook jot down as many adjectives that define the style you want to achieve. You don’t want to have too many so after you’ve jotted down some adjectives remove as many as necessary until you have only 4 keywords that complement each other. Here are some popular keywords to get you started:
The voice is the personality of your mood. Similar to step three brainstorm 8 adjectives that define how you want people to perceive your mood. Then choose 4 that best align with your emotions and style.
If your style is bright, bold, and youthful. Your voice and tone can be loud, outgoing, and optimistic
Think of your design as a child that wants to grow up and become an astronaut. You need to guide this child every step of the way fomenting his skills and abilities. You need to give him strong direction so no matter who or what adversities he meets he can stay focused and achieve his goal. The direction is what you want your design, product or service to be once its launched and as it grows.
Start with Why
To define a strong foundation for art direction I like to apply Simon Sinek’s Golden Circle with a small variation I’ve made for product design. In his book Start With Why Sinek states very few people can clearly articulate why they do what they do. This couldn’t be more true about designers. I find this to be lack of direction I always like to teach this quick exercise to find the direction of any design.
On a whiteboard or in your notebook draw a circle
Why — Design Purpose
Why are you doing this design? Why is it relevant? Think more around the lines of why you’re passionate about this design.
How — The Process
How are you going to make the why happen? Will you be using a framework: bootstrap, material design? How is your design better? How is your design innovative?
What — The Business Goals
What is the problem your design is trying to solve? What are the business and user goals?
After you answer combine the why, the how and the what into one sentence, and viola you have a direction.
The language is how you communicate with your audience. This is when to define if you will be using videos, illustrations or captivating photography to convey your message. Some examples of language for mood boards are
Photographic — Captivating images that speak for themselves
Illustrative — Artistic illustrations that create emotion
Interactive — Motion graphics that engage
Where to build it
The channels to build a mood board are endless. You can print it, use cut outs from magazines, and put it on a wall or actual board. You can use Sketch, Indesign, Photoshop, and any design software out there. You can even build it on the web with apps like Pinterest and milatone. However, I recommend building your mood board with invision boards. This simplifies the process and saves you precious time. If you are building in sketch or photoshop you have to worry about the layout, carefully place images and you won’t have motion or interaction images (gifs). I find invision to be better than Pinterest for mood boards it lets you add color swatches, actual fonts and it’s easy to collaborate with a team or share with stakeholders.
What to include in it
This is a recurring question in design what should the mood board include? I like to see mood boards as inspirational and directional. So, I include anything that inspires me and that gives a clear artistic direction for the project.
Fonts
Choose fonts that align with your style and emotion. Catch up on font psychology reading crazzyegg article A Pro Designer Shares the Psychology of Font Choices [Infographic]
Colors
Know your color psychology what color triggers what emotion and make sure this aligns with your mood.
Interactions
I like to look my interactions up on dribbble as much as the next guy but I recommend asking developers and interaction designers for any libraries or to collaborate on the interaction section.
Key States
The states of elements in your design button styles, link style, pressed, inactive, active, etc.
Icons
If you are illustrating your own icons look for inspiration on Dribbble or The Noun Project with over 1 million icons they have an icon for just about anything.
Photography
For inspiration I recommended unsplash. For high-quality stock photography, I recommend iStock and Adobe Stock they’re easy to search and filter images.
Illustration
Behance is the artist's playground the best place to find illustrative inspiration from top artists. Dribbble is always a good place to search for anything visual design or user interface design.
Notes
Add notes, your style keywords, voice, and tone, direction and language keep it visible within your board.
Where to find inspiration
Stop looking for design inspiration on google images and Pinterest. The problem is you’ll find popular images dated back to 5 years ago. Remember you want to stay current with design trends by searching google and Pinterest you are at risk of dated designs. Search on designer curated websites for inspiration, when searching don’t only look at the most popular designs look for most recent ones also. Here are my top sites to find design inspiration.
When looking for design inspiration keep your visual keywords on sight every time you save an image to a bucket, collection or on your device make sure it aligns with your visual keywords. As creatives sometimes, we just fall in love with a design or element but, because we like it doesn’t mean that font or that color goes with the project we are working on. Back up your decisions with facts that’s what makes a design strong.
