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 - No Longer Available
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 - No Longer Available
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
More ways to align your design and product teams
App Mapping: Creating User Flows from Customer Journey Maps
Elevating Your Design Team's Performance: The Power of Regular 1:1s
Design to Code: The Role of Atomic Design in Front-End Development
