Mood boards: Small But Mighty

3 steps to creating mood boards that encapsulate and communicate your design direction effectively.

These horses are moody, just like your mood board should be! Photo by G Meyer on Unsplash

Here you are in the design process having conducted tons of user research, scoped down your problem, worked to develop a detailed wireframe that has tested well, and you are ready for the next step. This is where you need to take your designs to the next level so that you can really visualize the concepts you worked so hard to develop.

While for visual designers this may be the fun part, it also requires a ton of creative inspiration because you are responsible for narrowing down what kind of mood and style you want your product to portray. This is where mood boards can come in to save time, create inspiration, and communicate your design direction to teammates and stakeholders. However, it is easy to get carried away with this process, so it’s important to focus on the goal.

1. Determine keywords

This is a necessary part of the mood boarding process if you want to stay focused and on track. I usually make a short list of 5–7 keywords that cover specific elements of the product.

Branding- The creative team has likely established a list of brand values or attributes that will be incredibly helpful in creating your mood board. Choose a few of the most important to cross-reference as you move forward. Maybe words like honest, lively, adventurous, or bold.

Emotions- Go back to your user research and think about what emotions your users want to feel when using your product. Do they want to feel confident? Adventurous? Playful? Safe?

Personas- Think about who your users are and what objects they use, or what places they frequent. Write these things down on your list so they can help you while you look for images.

2. Collect imagery

Once you have a list of words that represent your product and your user, you’re ready to start your image search. When looking for imagery, I like to make sure to cover multiple visual elements that will not only help communicate the design direction to my team and stakeholders but will also reflect how the mood board with translate into a cohesive UI.

Colors- You don’t have to lock in your color palette yet, but mood boarding is the perfect time to play with different directions and get inspired by the keywords you created during the first step. Do your research to find out the colors that emulate your brand attributes. Do you see trends when searching for specific images? For example, when creating a mood board for a fintech product, I focused on ‘growth’ so naturally, my palette quickly steered me towards rich shades of green. To make sure your board is cohesive, really hone in a palette that reflects your keywords, this is what takes it to the next level.

Shapes + Typography- I’ve heard from some people that bringing in typography to a UI mood board can be risky. Your stakeholders might get too hung up on a certain style and either reject it based solely on that, or want exactly what they see. What I say to that is, I kindly disagree. Your mood board is a point of conversation, so talk about it. You are designing for a digital interface, so it’s important to have elements that reflect that. Not everyone is a designer and will know what you mean by that black and white photo of a horse’s mane blowing in the wind. We get it. It’s moody. Abstract imagery is nice for abstract ideas, but it’s best to have some concrete UI elements that communicate your direction.

Illustrations vs. Photographs- It might not be versus, it might be and, but either way try to focus on the type of imagery you will see in the product. I also think it’s a good idea to include UI elements. Buttons, illustrations, and icons all help build a cohesive vision of your product. Again, including these elements may seem controversial, but if you’re planning on having a conversation around these boards (as you should) you can get some great insights on what stakeholders like and don’t like. Great places to start: Dribbble, Unsplash, Pinterest, Behance. If you want to search specifically for your color palette, you can do so on most of these, just search the hex code.

This mood board was created for an education product with elementary school users. The product had a big focus on student growth both personal and academic, so that guided the process.

3. Use a template!

But we’re designers, we don’t need templates! Ok, but please remember one of our main goals is to save time, not impress people with your template skills. There are a ton of great resources you can use to get started, and you can always tweak as you go along. My favorite is this Figma kit. But remember, hierarchy still matters, so think about what features you want to highlight. Cohesiveness still matters, so make sure your images tell a story and that your colors evoke emotions that align. Size and placement of your images and color palette will make a difference when you’re communicating your design direction, so be thoughtful.

Thanks for reading! Please share your tricks for creating effective and efficient mood boards!