I am currently a student in MICA's UX Design Masters program, here to share with you the method I used to create a mood board for a case study I conducted. Skip to Example Moodboard: Tribe — A mobile app for members of the backpacker community to find their tribe to see the final result of my mood board, why I chose certain elements, and how I applied the resulting theme.

Introduction: What are Mood Boards?

A mood board is a collection of visuals that represent your product's desired aesthetic style and tone. Designers use them for inspiration by incorporating images, colors, textures, typography, and patterns that represent the desired mood or tone. Mood boards can be as simple as one image or as complex as you want them to be; the important part is having an idea in mind before starting on one.

I'm a huge believer in mood boards. I find that they're a great way to see all the different elements you can incorporate into a brand and how they work together. Below, I'll share the benefits of creating a mood board, how to create a mood board, and an example of its usage with my latest UX case study.

What are the Benefits of Using a Mood Board?

Mood boards are a great way to visually explore and brainstorm ideas. They prompt designers to think about how different colors, patterns, textures, and other forms of expression could work together to define a particular mood or attitude. Mood boards are used to showcase the company's current style or to describe the desired future style. In addition, mood boards can be used for advertising purposes or in a creative project.

Benefits:

• Mood boards help provide a focus for designers when trying to come up with new design concepts.
• Mood boards help UX designers and planners think about how people will interact with a product.
• Mood boards are a great way to involve the client early on and encourage collaboration.

How to Create an Effective Mood Board

To create an effective mood board, you'll need to know what elements you want to include in the company's brand. To start, think about which elements best represent the brand. You can then combine these elements into a cohesive image that will be inviting and appealing to your target audience.

Create a coherent group of images to put on your mood board.

Ensure the images are cohesive enough to convey a theme. Group together images that have similar colors, patterns, and textures. What feelings or emotions do you want the brand to represent?

Create a Color Palette

Use a color picker tool to determine the most prominent 1–2 colors from the images you've selected. Then, you can use a tool like Coolers.co to input the hexadecimal values of these key colors and find additional complementary colors to create a palette.

Create Your Design Elements

Determine the design elements of your theme.

• How will you use the colors from your color palette? — Which color(s) will primarily be used for backgrounds vs. text? Which color(s) will represent active or clickable components?
• How should your title and copy text look? — Should you use a serif or sans serif font? Should you use a font that most people are familiar with (i.e., Open Sans) or a unique font? Browse Google Fonts for free fonts and Fonts.com to purchase unique fonts. You can also use Fontjoy.com to find font pairings.
• How should your interactive elements (buttons, links, etc.) look? — Determine the styles of your primary, secondary, and tertiary buttons. How should all of your clickable elements be styled?
• How should your iconography look? — Find an icon library that matches your theme. For example, should your icons look flat, outlined, detailed, or like a doodle?

Keywords and Phrases

You can incorporate keywords and phrases to convey the theme of the board.

Experiment

Creating a mood board involves a lot of experimentation and refinements. Continue to refine and iterate until the client feels it is a representation of their brand.

Example Moodboard: Tribe — A mobile app for members of the backpacker community to find their tribe

Tribe is a mobile application resulting from a UX case study I conducted to figure out a way to enhance the social experience within the backpacker community. Creating a mood board was a small component of the overall extensive research process. Here is the final result of the mood board and how I incorporated the tips above to put it together.

Brand Overview

Traveling as a backpacker can be fun, spontaneous, enlightening, yet also nervewracking. Tribe serves as a companion travel app for connecting you with the world around you, whether it’s finding the best pizza in town, or meeting up with a few friendly people who are willing to show you around.

Get out and explore. Find your tribe. We’ll be here if you need us.

Images

I intended for this app to cater to a variety of different travel styles. As a result, the images chosen were all travel-related, representing emotions from contemplative to joyful and representing both the solo and group travelers.

Colors

Tribe's colors are warm and inviting. The fiery orange is reminiscent of a campfire, commonly used to form bonds by socializing around them. I selected this as the primary color, while the cooler colors, like blue and yellow, are used as secondary colors to give off a vibe of enlightenment and enjoyment.

Fonts

The typography for Tribe is clean, legible, and familiar. Open Sans and Montserrat are easy to read and commonly used sans serifs, which can help establish trust amongst our users when they see our brand.

Mr. Dafoe is the typeface used for the logo, offering a curious and exciting look and feel to match the experience of one traveling.

Interactive Elements

I used rounded buttons and simple, monotone iconography to create a clean and straightforward aesthetic. Potential users aim to use the app to get the most out of their experience in a place they may be unfamiliar. As a result, the user interface should be easily legible to represent a sense of familiarity.

Theme Application

As a result of creating the mood board, you can see how I applied the theme to the high-fidelity wireframes.

• Sign In Screen — The sign-in screen is an introduction to the brand and the app itself. The logo is placed at the top in a prominent position. The main interactive elements use the theme's primary color and contrasting background color based on the generated color palette.
• User Profile Screen — The user profile screen is a much busier screen, with a lot of information and actions to sort through. As a result, the primary color is reserved for the primary action we want the user to take, "Connect With Me." The copy text is intended to be clean, legible, and easy to digest on a page with a lot of information to gather. From here, the user can determine if the profile they are viewing is a suitable candidate for someone with whom they'd like to connect.

Conclusion: How To Create A Successful Visual Identity For Your Brand With A Simple Tool

Mood boards are a great tool to use when identifying the visual identity for your brand. They can help you portray the emotion and tone of your brand and make it appear more cohesive and professional.

To create a successful mood board, use inspiration from various sources like photos, music, colors, fonts, words, and visuals that most closely match what you want to convey with your brand.

Incorporate the client into this process to foster collaboration and exchange ideas. Then, experiment and refine until you are both satisfied with the result.