A mood board is a visual guide for a design project. It is a distribution of colours, pictures, icons, fonts, and other visual elements that inspire and define a UX project. Think of it like a huge, endless board where you can add everything and anything that matches the idea you have for your design. When I was younger, I used to see on TV how someone would cut out styles from a fashion magazine and glue them all over a scrapbook. That’s a mood board too. Here’s another example, but for ladies… When you want to make a new hairstyle, do you ever search for styles on the internet and take screenshots to give your hairstylist an idea of what you want? Both of you look at it together and sometimes even end up picking a combination of different styles. Those screenshots were your mood board, in a sense!?
What is the general process for creating a mood board?
- User Research. For any UX Design, research is key before starting. This is because UX design is grounded in user satisfaction and preference that it is almost impossible to get it right if you do not hear directly from them. So, start with research. Reflect on the problem you are solving and ask users what they think about it
- Understand the product. Knowing the product means understanding its value, how it is customized to meet certain needs
- Get a hang of the market and popular ‘standards’. You can know this through what competitors are doing. The user research phase can also guide you on this if you get what users generally go for in the market
- Brainstorm with all stakeholders. It goes without saying that both client and designer should be actively involved in the mood board creation process. Since the client is the one providing the job, they have an idea of what they want the design to look like. Their input on the mood board will give you, as a designer, a better understanding of what they want. Also, brainstorming together will be an avenue for both parties to agree on the feel, mood, tone, elements, and general outlook of the design. Stakeholders could include the developers, product team, etc. Basically, it is a win-win situation for everyone involved.
So, is there a “good” or “bad” mood board?
Sincerely, I don’t think a mood board can be explained so plainly. This is because it contains all sorts of things that come from all sorts of different places, and it really isn’t all that technical. So, how can it be done wrongly, right? The items in a mood board are there to help a client give the designer an idea of how they wish their design to look like. Since the designer is also involved in the creation of a mood board, it would act as a way to validate that both designer and client are on the same page. It would also act as a guide for the design. Can it be done wrongly, them? I don’t know. But, I do know that for your mood board to be useful. It should have certain properties to it.
What should a mood board look like?
Like this ?
Like this ?
Like this ?
The three pictures above are all great examples of mood boards, and you would notice that they all have similar properties such as images, text, colors, patterns, etc. The items that make up a mood board are its properties. For clarity, I’ll like to explain them in two categories; mental and physical.
Mental Components of a Moodboard
- Theme/Mood/Tone. As the name suggests, a mood board is meant to evoke feelings, emotions, and meaning.
- Clarity. You are making a statement with your mood board, so aim for clarity. Nevertheless, you don’t have to get the details of everything. Also, try to keep things organized so even you don’t get confused. Sort pictures, colors, texts in an orderly manner. This is what works for me anyway, or else I get crossed in confusion.
- Definition. Think of this as defining not only your mood board but your entire design. Check this out from the POV of you creating your style guide. Let’s say you want to create an app to help people to achieve great mental health (the definition). You can match the colors in your style guide to this clear definition. So, you have a well-rounded design. It is cool how all the stages of a design are so interconnected. Another way to define your design is by aiming for similarity on all the items on your mood board.
- Direction. The items on a mood board are there to help guide a UX design. You can harness this by answering a few questions. Why did you pick an item? How do you plan to match and extract resources from your mood board? How do you want users to feel when interacting with the design? What is the aim of your design?
- Inspiration. Your mood board is a great source to draw inspiration. It would also help to stimulate thoughts and creativity for design elements and style.
- Open mind. Your mood board is allowed to be here and there. You are testing waters, after all. It might not be the best idea to decide on a design during the mood board phase. With such a mindset, you might unknowingly close your mind to other possibilities for your design and get stuck in the long run. So, while your mood board should have a general theme, you are allowed to play with ideas, jot down what comes to mind, compare this and that, and let all of that guide your next step, creating a style guide. Your mood board can be like a mind-map. Remember that the design process is not linear and is very flexible, and you would find yourself going back and forth all stages of design.
Physical Components of a Moodboard
- Photographs. Use images that evoke the emotions you are trying to get. For example, if you want to create an app about ocean life, your board might be incomplete without pictures related to that, right?
- Texts. Maybe you see a CTA, an excerpt, or even an entire article that matches the intentions you have for your design. Add it to your board. Although, I would suggest that you only add the links to entire articles because of copyright issues and to save space.
- Colors and Fonts. These are two design elements that a whole lot of people notice at a first glance. Taking your time to read about color psychology and font-weight and sizes would put you one step closer to making a good impression for many. In the meantime, use play with font ideas and color swatches on your board and see what works.
- Videos. Videos are great for your mood boards because they give room for more detail.
- Visual elements. Icons, patterns, shapes, graphics, buttons, states of those buttons, states of states of those buttons, state of states of states of those buttons… and the list goes on.
- Features. It is perfectly acceptable to list out the features you think your design should have based on the idea sources you see.
- Scribbles. This basically refers to jottings you pen down to remember things. You can attach it to pictures, videos, etc.
- Interactions. You can include visual clues to show how interaction on your design will be from screen to screen.
Note that your mood board does not have to contain ALL of these. Like I have said, it is like a mindmap, so go with what works for you.
How and where can you create a mood board and style guide?
If you are tactile, a physical mood board is great for you. You can add real material to your board which could be a whiteboard, paper, or a scrapbook. However, going digital is also great, and is easier to incorporate into your design. In that light, you can use any of this awesome software to create a good looking and meaningful mood board:
- Figma. As a UX designer, you should know Figma… I think… hope… guess. Anyway, Figma is great for creating a mood board and style guide. With different plugins available, you can also add cool components to your mood board like color swatches. You can even extract colors from pictures. One downside about Figma is that it does not support videos or GIFs. Looking forward to when this will happen. But, seeing as it is web-based, this is unlikely to happen soon.
- Sketch. So, this is popular amongst Mac users because it is only available for them. Sigh. Sketch is pretty much like Figma, and is a great tool for creating mood boards and style guides.
- Adobe XD. I look forward to the day I master this tool and become an Adobabe. Anyway, like the tools above, this is wonderful for creating a mood board and style guide since it is essentially an interface design tool, to say the least.
- Pinterest. I’ve known Pinterest for many years and can vouch for its authenticity. If anything, this web-based platform can be called THE mood board tool. I recommend.
- Invision. So, this tool is known for its prototyping features, but it does way more. With Invision, you can create a mood board and style guide using the “Boards” tool.
- Some other great tools are: Milanotes, MURAL, TheMartboard, Sampleboard, Oilioboard