How to Use Moodboards for Design Collaboration

In a world that thrives on creative collaborations, clear communication remains paramount. It's especially significant when it involves a lively tango between a non-designer and a designer, such as you as a founder or a marketer working with a creative maestro.

The smooth dance often gets stumbled upon by the hardest step—transferring your desired aesthetics to the designer. The rhythm of collaboration may be disrupted, turning harmonious design dialogue into a battlefield of nitpicks, incessant comments in Figma, and never-ending requests for revisions.

This hindrance isn't about a lack of commitment or creativity from either party. Rather, it results from a missed opportunity to harness a powerful tool that bridges the gap between abstract ideas and tangible visuals: the moodboard. This article will explore how to effectively utilize moodboards for design collaboration.

Why Moodboarding Should Be Part of Your Design Collaboration

“Moodboarding” might seem squishy and ambiguous. But that's precisely its power. Moodboards are an effective tool to convey the intangible—your vision's overall feel, ambiance, aura.

Moodboarding goes beyond the rigidity of hex codes, border thicknesses, and font sizes. It dives into the realm of emotional resonance and atmospheric perception, which truly connect a design with its audience.

Many people underestimate the importance of this alignment. But, without it, you’ll need to seek out a mind-reading designer, but you'll quickly find they don't exist.

Alternatively, you could try finding a designer whose aesthetic aligns perfectly with yours, but that's often difficult and time-consuming. Even if you're fortunate enough to find such a designer, there'll still be plenty of back-and-forth during the design process without a clear, shared vision.

Moodboarding mitigates these challenges. It provides a tangible representation of your vision, reducing the guesswork and countless iterations often needed to achieve alignment.

The Benefits of Good Moodboarding

Here are some benefits of good moodboarding, especially for your brand design process:

Efficient Communication and Feedback

Good moodboarding minimizes back-and-forth with your designer. You can save your feedback energy for more specific points than the general "vibe is off."

For example, when you present a moodboard to your designer at the outset of a project, you give them a clear snapshot of the visual language and mood you want to capture. 

This immediately aligns the designer's understanding with your vision, preventing them from heading down a creative path that doesn’t align with what you have in mind. 

When the designer comes back with a draft, you’re likely to find that the big-picture elements are in place. And even with a design’s many small details, you’ll see that more of them are aligned them with your intuitions the first time when there’s a moodboard to go off of.

Expands Your Designer Pool

An unexpected benefit of moodboarding is that it widens your pool of potential designers. Since you can communicate your vision clearly, you don't need to be as selective about whether a designer's personal aesthetic aligns with yours. Good moodboarding allows you to focus more on raw design talent when you’re hiring designers, rather than being fixated on aesthetic alignment.

This opens up opportunities to collaborate with diverse talents who can bring fresh perspectives to your project.

Enables Alignment, Not Just an Aesthetic Brain Transplant

The goal of moodboarding isn't just to transfer your aesthetic vision to the designer but to create a shared alignment on what the principles of your design will be. This is a two way street. On one hand, you help the designer understand your aesthetic goals.

On the other hand, the designer assists in refining those goals, identifying patterns in your moodboard, and contributing their own inspiration. 

This symbiotic relationship can lead to a clearer understanding of your own aesthetic preferences and a more refined final design.

Serves as a Living Document

A well-crafted moodboard can become a valuable asset, acting as a living document for your brand or project. This means that when onboarding new designers or team members, you have a ready-made tool to introduce them to the project's aesthetic and conceptual goals, ensuring consistency across the design process.

Five Step Process for Moodboarding

Navigating the creative journey of moodboarding may seem daunting at first. However, breaking it down into manageable steps can transform this artistic endeavor into a clear, structured, and engaging process. Here are the key steps to follow:

Step 1: Create a Notion or Google Document That Will Be Your Source of Truth

Your moodboarding journey begins by establishing a central location where all your ideas, inspirations, and elements of the moodboard will reside. This could be a Notion or Google document, depending on your preference.

Having a centralized document helps to maintain organization and accessibility. As you find potential moodboard components, be it colors, textures, images, typography, or other forms of visual inspiration, you can immediately upload and store them in this document. This ensures all your ideas are not scattered across different platforms or mediums.

This document also acts as a living repository that you can continually update and refine as your vision evolves. It's a flexible and interactive base that encourages exploration and iteration, which are essential aspects of the moodboarding process.

Step 2: Start Broad—Word Associations

After creating your centralized document, it's time to begin the brainstorming process. Starting broad is essential, and one effective way to do this is through word associations, focusing on adjectives. Since you’re leaning into the power of words, think about the particular adjectives that encapsulate the feeling or tone you want your design to communicate.

At first, it might seem tempting to jump directly into visual elements, but establishing these word associations lays a crucial foundation for your moodboard. Here's why:

• Direction and boundaries: This process sets up the boundaries and direction for the visual exploration in the subsequent moodboarding steps. The chosen words will guide what kind of imagery, colors, fonts, and textures you’ll be looking for.
• Emotional resonance: Considering the word association prompts you to think about the emotional connection you want to create with your potential customers. How should they feel when they encounter your product or website? Excited? Comforted? Intrigued?
• Action Influence: It makes you consider the actions you want customers to take and how the mood of the design influences these actions. Do you want them to explore more or to trust and invest in your services?
• Team perception: Importantly, this stage encourages you to think about how the mood communicates your team's qualities to the customer. Is your word choice showcasing your team’s reliability, skill, and trustworthiness?
• Product positioning: Thinking about the adjectives helps you define what aspects of your product you want to emphasize. Is it the fun and delight of ProductHunt, the power and customizability like Salesforce, the simple and actionable design of Notion, or the dependability and scalability of AWS?

By contemplating these questions, you can guide the creation of your moodboard and, ultimately, the design of your product or brand.

Step 3: Hone In: Compile Images and Videos on Figma

In the third step of the moodboarding process, it's time to dive deeper and curate a collection of images and videos that align with your design vision. Here's how this step should unfold:

Create a Section for Visual Inspiration

Within your centralized document, carve out a dedicated space for visual inspiration and provide a link to your Figma board. The link ensures that all team members can easily access the evolving moodboard and contribute their insights and suggestions.

Using Figma for Moodboarding

While Pinterest is a popular choice for moodboarding for lay people, Figma offers distinct advantages, especially for collaborative moodboarding. Figma allows everyone to give their comments on specific visuals. This is particularly helpful as the moodboard grows and feedback thoughts are directed toward specific parts. Additionally, Figma allows you to cluster different design inspirations spatially around themes. This can be used to organize your visual inspirations along a spectrum, or just in clouds that are devoted to specific subcomponents of your theme.

Sourcing from Pinterest

Pinterest is great for discovering new inspiration. Once you have a curated set of images, you can then migrate them to Figma where you and your team can organize them based on the layout of the moodboard. This two-step process ensures that you harness the vast resources of Pinterest while capitalizing on Figma's collaborative environment for focused refinement.

Embrace a Broad Spectrum of Disciplines

As you curate the moodboard, cast a wide net and explore various disciplines beyond your immediate field. Look for inspiration not only on websites, but also in architecture, posters, photography, videos, books, advertising campaigns, and even iconic brands. Drawing from diverse sources allows you to tap into a rich tapestry of visual concepts and broaden your design horizons.

Uncover General Principles through Thoughtful Questions

As your moodboard takes shape, it's time to delve deeper and ask thoughtful questions that uncover common principles and patterns. Some of the key questions to ask include:

• What are examples of this mood done exceptionally well?
• In how many different form factors can we find this mood? Explore how the mood manifests across different form factors, such as websites, physical spaces, or print media.
• Are there common themes or patterns that these moods share?
• What are examples across disciplines that embody this mood or ambiance?

For instance, if your desired mood is classical architecture, you might discover recurring themes like symmetry, accentuated rectangles, columns, pillars, or the use of luxurious materials like marble. These observations provide valuable insights and can guide your design decisions accordingly.

Step 4: Zero In On Full Artifacts in the Same Form Factor as You Want

Focus on finding specific examples that closely align with the form factor you desire for your design. This step involves delving into full artifacts like websites, mobile app onboarding flows, or other relevant mediums. Here are the key things to do in this step:

Find Examples that Resonate

If you're designing a website, seek out another website that captures your desired aesthetic successfully. If you're building a mobile app onboarding flow, search for another app's onboarding flow that effectively achieves the same goal as yours.

Get Into Specifics

Take note of specific design elements that stand out to you in these examples. It could be the gradient animation on Stripe's website or the screen perspective on Linear's marketing website. Zoom in on the details that captivate you and contribute to the overall mood and user experience.

Record and Explain Your Observations

As a stakeholder, it's valuable to record yourself walking through the designed product, website, app, or video you find inspiring. Explain each part of the design you particularly like and why it resonates with your vision. This exercise helps you articulate your preferences and provides clarity to the design team.

Spending five minutes doing this through a Loom recording will pay massive dividends. Your team will be able to refer back to this recording even after the moodboarding process is complete. It will help them with specific details-level guidance as they design the final product.

Consider Audience Alignment

Ideally, the inspiration should come from someone who caters to a similar audience as your product. 

While you don't need to copy them verbatim, drawing inspiration from designs that connect with your target audience can help guide your design decisions in a direction that resonates with your users.

Ask Specific Questions about Implementation

Now that you have identified resonating examples, dive deeper into understanding their implementation. Ask questions such as:

• How do they handle the little details that contribute to the overall user experience?
• How can you adapt their designs to suit your specific product, pitch, or concept?
•  Why did they choose to design it in a particular way? What insights or principles informed their decisions?

This understanding empowers you to adapt and apply those insights to your own design while maintaining a unique and tailored approach that aligns with your project's goals and audience.

Step 5: Know How NOT to Moodboard

Understanding what to avoid will help you focus on creating a moodboard that effectively communicates your vision and aligns with your design objectives. Here are some key points to keep in mind:

Avoid Generic Requests

Phrases like "Just make it look like X" can be vague and unhelpful. Instead, take the time to analyze what specifically aligns with your desired mood in X's design. By understanding what attracts you to X's design, you can explore how to adapt and apply those elements to your own situation.

Don’t Entirely Delegate the Moodboarding Process

It's natural (and good!) to trust in your designer's judgment as you work together. But this doesn't mean you should abdicate your role in the moodboarding process. Your active involvement in moodboarding ensures that you effectively communicate your vision and that the designers understand it.

Avoid Getting Caught Up in Specifics Too Early

It can be tempting to dive into detailed specifics right from the start, but it's important to resist this urge. Begin by casting a wide net and exploring a broad range of inspiration. By starting wide, you allow for more creativity and exploration, enabling you to discover unexpected sources of inspiration.

Work With a Skilled Designer

In branding and visual design, moodboarding is the bridge between your visionary ideas and the creative minds that bring them to life. But you should work with a skilled designer to transform your vision into a captivating reality.

At NUMI, we're here to match you with the world's most driven designers. Once we understand what you’re looking for in a designer, we’ll pair you with one who matches your expectations in terms of skills, availability, and more. Hire a pro today and embark on a journey of designing magic together.