Visual Design: Mood Board

Define mood and tone for your design

We humans associate our emotions with things around us and the memories that we make from them. A song or a smell may remind us of a certain memory because back in that moment we felt something, we emotionally responded to something. We rely on WhatsApp over other messaging applications not only because it is simple, but because we feel it is secure and reliable. In design, it is crucial to address users’ emotional responses to design better products.

One of the ways of doing it is through setting up a mood board that acts like a live canvas that has a collection of ideas, imagery, colors, typography, art, and sounds that communicate the voice, tone, and direction of a product.

Free & Discounted Udemy Courses — Explore Now

Step 1: Write briefly about the product’s purpose, idea, and values

Every product/business has some ideas and purposes. For example, Nike is a sports products company but they follow the idea of respecting athletes, Apple makes computers and phones but their idea is to uplift lifestyles and change the world with their innovation. They want to make it simple and intuitive for their customers to do certain things.

Thus the design and look and feel of a product should generate emotional responses from the customers when they use it so they feel connected to it. We’ll need to determine what we want our customers to feel and experience according to the personas and the nature of the product. It is very helpful to write a brief about what a product offers and in what sense it is going to touch and impact the customer's life as well as emotions.

To do this, check whether you have any content/ taglines/ slogans for the product?

If yes, then it’s a great idea to collect any written content you have. This might include brand values, positioning statements, taglines, or any other parts of the brief that will inspire you or keep you on track.

If not, then just stick with the existing core values of the product.

Step 2: Extract and derive concepts

From the brief we have, we now have to derive the concepts that we want to bring in in our visual design. Concepts can be the keywords that depict and align with the nature and feel of the product that we want to communicate through design. To gather such keywords,

1. Think about the personas and what they are going through.
2. Think about the adjectives the personas are expecting out of the business and their motivations with the product
3. Think about the business nature, and the activities it performs

Step 3: Collect and refine photography

Collect a set of photography or illustrative images that depict and communicate the idea and the concepts that you have identified. These can be sourced from anywhere and do not need to relate directly to the product. The intent is to create the mood and feeling.

Step 4: Collect and refine design inspirations

Collect a set of inspirations from available designs for the public which can be UI or any design that communicates and aligns with the concepts in some sort. Try to identify how design decisions in the inspirations are helping in communicating the mood and feel and note them down.

Step 5: Derive visual design foundation

Now that we have the set of images for our concepts, we can derive foundational elements.

Colors
The initial color palette or the direction of the color palette can be chosen or picked from the set of inspirations identified. It can later be organized in a way to makes sense for your product.

Typography
The initial direction for the typography can also be picked from the inspirations or other sets of images can be collected to figure out the typography choices that can potentially communicate the mood and feel.

Other Elements
Styles for other elements such as iconography and illustrations can also be noted down from the collected inspirations that will potentially align with the concepts.

Step 6: Iterate on variations

The above process can be repeated to have multiple iterations of mood boards as in every iteration you may end up getting more ideas of communicating the idea of the product. It is recommended to iterate 2–3 mood boards for a single product brief that will have different key concepts. Make sure you note down differences, pros, and cons for each variation of your mood board.

Step 7: Finalize the best mood board

Conduct sessions with all the stakeholders of the product and communicate differences, pros, and cons for each variation. Ask for their thoughts and record them and make a choice that works best for everyone. That will act as the finalized mood board that will align everyone’s vision of how the end product will look and feel. It will also give you direction to define your foundational elements for your visual design.

Tips / Best Practices

1. Always start with the product brief. Keep it very simple and make sure it communicates what it means for the customers and what they should feel.
2. Make sure to iterate on at least 2–3 variations based on different key concepts to explore a broader range of ideas.
3. The key concepts should be very specific and clear.
4. There is no limit to collecting reference photography/illustrations. Explore as many as 5–8 images to depict the concepts through them.
5. Make sure you note how different images/inspirations communicate the concepts and the mood so that you’ll be able to use the learning later.
6. Always document differences, pros and cons for each variation and communicate that with the team so that they can relate and react to them better.

Checklist

1. Define the product brief that communicates
   a. What product is about
   b. How it impacts/influences the customers
   c. What are the emotional responses that you want to target for the customers
2. Derive key concepts from the brief and write descriptions for each
3. Collect and refine photography/illustration image references
4. Collect and refine UI/design references
5. Note how references communicate the mood and tone
6. Derive initial foundation elements such as color palette, typography, iconography from the collected references
7. Make at least 2–3 variations of mood boards with documented differences, pros, and cons for each
8. Conduct a session with the team to finalize one best mood board

Related Topics

1. Color
2. Typography
3. Iconography

Free & Discounted Udemy Courses — Explore Now