Since we can’t Vulcan mind-meld our way into seamless web design collaboration, our next best option is to use tools that help us express our ideas in a way that’s easier to imagine — visually.

Words are an imperfect way of communicating visual ideas sometimes. What you picture in your head might look entirely different than what someone else pictures in their head. Your associations with a certain word or idea might have very little in common with your client or coworker. 

If someone says they want a “modern” website, for example, you might picture “clean and minimalist” while your coworker imagines something “slick and technological.” If you were both to go execute your imagined versions, the final result would be very different.

Visual cues help us share concepts that might be hard to verbalize and unite our ideas with those of our collaborators. When it comes to creative teamwork — with our clients and within our teams — clear communication and building a shared vision are key. 

Enter the moodboard. They’re a staple in not only design — but fashion, art, and anything that requires a bit of visual inspiration. 

Now, let’s take a closer look. 

What is a moodboard?

A moodboard is a group of images that communicate an idea or design concept. While typically associated with things like wedding planning and interior design, moodboards are becoming more popular in web design because they are so effective at helping designers and customers plan a website together.

When you create your next website, your moodboard should be a visualization of what the website you’re designing will look and feel like. It should bring your ideas out of your head and put them concretely on a page so that you and your clients can picture the overall effect better and can get on the same page about the design.

What should go on your moodboard

A moodboard should include whatever concrete pieces of your site design you already have, such as the brand’s logo or existing images. You can also create multiple versions of your moodboard to test out ideas. If you were debating what color palette to use, making a few moodboards to see how they pair with your logo and images will help you see the overall effect better. Bring together your design elements in a moodboard to see how well they create a cohesive whole.

Here’s a general list of everything you should include:

• Logo(s) and other brand elements
• Color palettes
• Fonts and font pairings
• Illustrations and photographs
• Icons
• Menus and buttons
• Backgrounds

You can also include more abstract images that convey emotion, set a mood, or demonstrate an idea. Maybe the customer wants a website that feels like a futuristic spaceship or loves the colors and textures of a specific film. Add those images to help communicate that vision. 

Remember, your moodboard is communicating a vision; you’re not building the actual website yet. 

Here’s some mood setting elements you should consider adding:

• Target audience images
• Images to set mood or tone
• Visual cues for what you want your site to “feel like”
• Music and sound effects
• Examples of design that inspires you
• Notes, thoughts, and ideas

5 reasons to create a moodboard for your next website

Creating a moodboard can be helpful in so many ways and for so many steps in the planning and design process of website building. Designers can create a moodboard to show their clients what they are planning and clients can create one to help show what they’re looking for.

1. Solidify your own vision for the site

A moodboard is a useful tool for designers whether they are working on their own project or creating a site for a client. Sometimes putting a design idea on a page helps you understand better what is or isn’t working. Creating a moodboard shows you how the various elements you’re working with will go together. You can even create multiples if you’re trying to decide between options.

If you have a client who can’t seem to make up their mind, you can ask them to create a moodboard to clarify their own vision for their website. Some people can visualize things very clearly in their heads, while others need something a little more concrete. The very act of creating a moodboard will help them have a better understanding of their own vision.

2. Focus better on intangible brand qualities 

A moodboard can be a creative way to examine the intangible qualities of a brand or website inspiration. If you let your moodboard be a little more abstract, you can use it to explore what the thematic or emotional effects of your design might look like. In other words, the brand’s mood. 

You might have great ideas for the homepage design, color palettes, and font pairings, but are they going to convey the brand’s values? Will they connect with their target audience? Are the aesthetic choices you’re making actually conveying the tone you want to set? Putting concrete images down on a page can help you answer those questions.

3. Share your ideas more clearly with clients

Good communication is essential to having a solid client-designer relationship. A moodboard is an excellent communication tool. You can use it to share your ideas visually, to get you and your client on the same page. You can even build a moodboard collaboratively as part of your brainstorming process.

4. Manage client expectations

Ensuring designs meet client expectations can be a really challenging part of the website design process. Not every client can communicate their vision well or has the technical expertise to know what is possible and what just isn’t. Collaborate on design better by using a moodboard to make your plans clearer and manage client expectations early.

Putting ideas down onto a moodboard gives clients a chance to give feedback earlier in the process. It gives them a way to show you what they’re picturing more clearly so you don’t waste time on a misinterpreted instruction. 

5. Speed up your design review process

Use a moodboard to streamline your design review process. A moodboard helps establish a shared visual language between you and your client. With a shared language and a better understanding of the client’s preferences, you can get your designs approved sooner.

Moodboards are fast to create, much faster than a full website mockup. Back-and-forth feedback can happen faster, and you can spin up new moodboard versions easily to adjust to that feedback. 

Use moodboards to push your creative process further

Sometimes all it takes to unlock new creative ideas is a simple change in your process. Using a moodboard to receive creative direction from a client or to communicate your own vision for a project can help you think differently about your web design work.

Someone who is usually very technical and process-based might find that the process of creating a more free-form moodboard helps them think about web design in a new way. Someone who focuses on brand elements when designing might see them differently when juxtaposed on a moodboard rather than listed in a style guide.

Collaborating on a moodboard can even change the way your team works with each other and with clients. You might discover new strengths, new ways of communicating ideas, and new creative approaches. In any case, moodboards will be a productive addition to your designer’s toolkit.