UI Mood Boards - Designer's Guide for Project Alignment

If you're a designer, you know the importance of finding methods and best practices for how to communicate your vision for a project and create alignment.

Whether you're working directly with clients, on internal design teams, or ensuring that the brand or business is communicated to the world effectively, communicating your initial vision will set up your project for success.

‍

But how do you accomplish this?

We believe it's through mood boards.

‍

A design mood board is a great starting point for any design project and can serve as a visual reference as well as provide a space for spring-boarding additional ideas throughout the project.

To put it simply, it conveys the look and "feel" you are going for.

‍

In this article, we'll cover:

• What a mood board is
• Why they are important
• Why you shouldn't skip out on making them
• Best practices for mood boards
• Popular apps & tools
• Tips for creating mood boards

‍

Video format available

Want to learn about the benefits UI mood boards while you work? This article is also covered in the video below.

‍

‍

What is a mood board?

A design mood board is a collection of visual ideas that serve as the foundation for your project.

‍

‍

Here are few other defining characteristics:

Provides a holistic visual landscape

By providing the big picture, it gives the opportunity for collaboration among team members and stakeholders.

Visualizes look and feel

Having a mood board adds visual clarity to verbal communication. Sometimes there is more clarity in showing than telling.

Clarifies vision

Speaking of clarity, the mood board sets direction and vision for your project, ensuring everyone is on the same page from the beginning.

‍

‍

“Mood boards serve as a fundamental transition between an initial thought and a first draft.”‍

- Canva

‍

Why mood boards are important

Establishes alignment early

Providing this holistic landscape opens the door for collaboration among team members. When everyone can see the direction visually, and provide input, it lays the groundwork for cohesion going forward. Plus, seeking feedback early and often during the mood board process will ensure that everyone is on the same page with the vision for the project.

This helps both parties to achieve alignment early on, which eliminates the potential for the designer to present solutions that are off-target.

‍

“Mood boards are the first visualisation of a client’s vision.”‍

- Hollie Arnett

‍

Encourages exploration

Use your mood board as an opportunity to explore a variety of directions that could work within the guidelines outlined in your project brief. Experimenting with different combinations of shapes, textures, colors, typography, and interactions can help to differentiate your solution from the competition.

Fleshing out possibilities now will allow you to streamline your workflow and tackle your tasks with a clear direction as you transition from the ideation phase to the design phase of your project.

Documents research

As you create your mood board, keep track of the sources you've used and any passing ideas that come to mind. These tidbits of information may be useful as you collaborate with your client/stakeholder to establish a clear look and feel.

This will also help well later on in the Ideation and Design phases of your project when you're creating features.

‍

‍

Consequences of skipping out

Do you need to go through all this trouble? We say yes - here are the risks if you don't:

Lack of clear direction

Clarity on direction is key. When it's lacking, it can create frustrations for both the designer and the client resulting in a negative project experience.

Misalignment

When the visions are not aligned, opportunities for confusion arise between the designer and the client, which may result in discrepancies - and extra work.

Inefficiencies

When time and energy are wasted rehashing vision and trying to get realigned, it presents a lot of unnecessary challenges - which could result in increased time and budget.

‍

“The mood board is able to maintain plurality and autonomy while also directing and aligning. It thus balances the seemingly contradictory challenges of organizing creative people.”‍

-Endrissat, Islam, Noppeney

‍

‍

Best practices for mood boards

Make the process interactive

Many popular tools for mood boards integrate features like comments and sharing. Be sure to utilize these in your process often as a way to gauge how your client or stakeholder feels about the elements as the vision comes together.

Additionally, encourage participation from your clients or stakeholders - ask them to provide visual examples of likes and dislikes.

If you want to take things to the next level, choose a collaborative tool with a low barrier entry to create your mood board. This will allow even the least tech-savvy to participate in this process.

Gather ideas from multiple sources

While we all love Dribbble and Behance, there's plenty of places both online and in real life to diversify your inspiration sources. Follow creatives on social media and save their work for later.

Be aware of your surroundings - design is everywhere.

Use your mobile device to capture inspiring packaging or end-cap displays while out shopping. These can spark ideas for texture, hierarchy, color, and typography. Incorporating these moments can be a way to add some personal flair to that curated collection of Dribbble shots.

‍

Popular mood board apps and tools

Below is a list of some of our favorite tools for creating mood boards -

‍

Canva

Key Features

• From presentations to Instagram posts, you can create a team with Canva and collaborate anywhere in the world
• Wide variety of textured backgrounds for a homey, lived-in design
• From simple three-frame designs to complex arrangements, their design grids keep your photos crisp and give you room to envision and play

‍

Go Moodboard

Key Features

• No account creation needed
• Lightweight interface and user experience that focuses on drag and drop uploading
• Organizes your images in rows on a white background with the ability to view individual images in detail within a light-box

‍

Mural

Key Features

• Collaborative multi-player workspace
• Built-in icon library
• Easy to use sharing and commenting functionality
• Wide selection of tools to visualize your ideas - freehand drawing, sticky notes, connectors, and shapes

‍

Milanote

Key Features

• Integration with Unsplash provides 500K+ images
• Chrome Extension allows you to save images from around the web
• Support for both video and font files
• Built-in commenting and sharing
• Ability to arrange and organize items on the canvas

‍

Figma

Key Features

• Ability to leverage key Figma features like multi-player, prototyping, and auto-layout
• If you're already in the Figma ecosystem, allows you to minimize the number of tools you're using and organize your end to end design process in one place
• Their robust plug-in library can add efficiencies to your mood boarding process
• Figma Community offers templates that are customizable to your project's unique needs

‍

Moodboard Builder

Key Features

• Plugin specifically for integration with Sketch
• Search functionality that utilizes Behance to find images within your criteria
• Adds images in a streamlined fashion and creates a mood board in one click

‍

Invision

Key Features

• "Boards" tool allows you to generate mood boards and galleries with ease
• Commenters can draw on images to help provide more specific, in-depth feedback
• Viewers can preview content within a source file without downloading it
• Integration to share your ideas on social media - great for personal projects!

‍

Adobe Spark

Key Features

• Wide variety of templates to use as a foundation for your next mood board
• Use on-the-go with apps for both iOS and Android
• Integration with Unsplash and Pixabay allows you to access thousands of free images directly on the platform

‍

Creating mood boards for better projects

So we've established what a mood board is, why it's important, why we shouldn't skip out, and the best tools to get started.

But how do we ensure a successful outcome?

Here are a few tips:

• Understand and define the tone
• Be selective with your decisions
• Use size to establish the level of importance in the composition
• Do the research and organize findings
• Include materials from a variety of visual sources
• Think macro first, then micro

‍

Will these tips help get you on your way? Certainly.

But quite frankly, the best way to succeed is to tell an engaging story. Communicate the narrative in a way that connects with people - because people always remember a good story.

‍

Key takeaways

If you leave with anything, let it be this- mood boards are a crucial step in the creative process.

• They establish a unified vision between client and designer
• They provide key opportunities for collaboration
• They create a guideline for the look and feel that can be referenced throughout the project timeline

We'd love to hear from you and see your mood boards - connect with us on social @headwayio!

‍