Why I Use a Mood Board for Website Design
So a client reaches out for a website design. You ask all your onboarding questions and work feverishly to create a look that matches the client’s expectations, preferences, and requirements. After all that effort, you unveil the website, only to get this response:
“This looks okay, but it’s not exactly what I had in mind. Can you change this and this and this and this…?”
As a website designer, the first thought at hearing this is “Ugh!” Or maybe something worse that I can’t print here. Most likely, the changes requested aren’t so easy to change and much of the hard work you put in - again - must now be changed, often with additional time you simply don’t have. We’ve all been there at some point in time, I’m sure.
And while that’s a pain-in-the-you-know-what for a website designer, it’s also not very fun for your client, either. Your client isn’t being a jerk (usually). It just means that during the planning process, something was misunderstood or envisioned a different way, or the design doesn’t deliver the impact to the client that it may for you.
Mood boards, or inspiration boards if you prefer, can be the answer to this problem. Creating mood boards is an essential part of my web design process and it’s also super fun. This design strategy offers concrete direction for the client’s website, actually provides more flexibility with the design, and you can deliver exactly what the client wants for their website.
WHAT IS A MOOD BOARD?
A mood board is a digital collage or group of elements that helps define the direction of a website design. It shouldn’t be confused with a mock-up which is a more concrete version of a website design that is only a few steps away from going live.
It’s not a branding board, either, A brand board is an at-a-glance document containing all your brand elements- from your main logo to your color palette. This is different from a mood board.
As a website designer, the mood board is a physical or digital collage of ideas that are used to define the direction of the website design project. It’s the jump-off point for your website design, style, and vibe.
A mood board can include images, fonts, colors, graphics, patterns, grids, screenshots of other websites the client likes, basic text (words you might use for headline, copywriting, etc.), layout, and more.
Their purpose is to gather ideas and inspiration before jumping into formal design. For example, what will your overall tone and voice be: light or dark? Professional or playful? Bright colors or pastel colors? Blue? Purple? Gray? Black and White? Rainbows? Luxury or retro? There is so many options when it comes to creating a website design. A mood board helps focus that design into a cohesive whole.
WHY USE A MOOD BOARD FOR WEBSITE DESIGN
The purpose of a mood board is to capture your client's desired website + brand style in one glance. Starting the design process with a mood board is a good idea for two reasons:
It helps you, the website designer. Gathering some ideas and inspiration before you actually start designing can streamline the design process and cut down the time you spend staring at a blank screen. It can also potentially save you from a lot of wasted time and effort by getting client approval on a concept ahead of time. No one likes to pour their heart into a project only to have it rejected by a client.
It helps clients. Creating a mood board to present to clients give them an idea of what the finished product will look like and allows everyone involved to agree on a direction before too much work is done. It also helps avoid any misunderstandings that may result from trying to describe a design concept verbally. Two people may say that same thing, but mean something completely different, so a visual representation can help everyone get on the same page.
MY STEP-BY-STEP MOOD BOARD PROCESS
01. The Client creates a Pinterest board.
Once a client books their website design with me, I have them fill out a design questionnaire and create a Pinterest board (secret or public, their choice) with all of the images that inspire them for their website design.
The questionnaire provides me with their goals, purpose, target market, and other strategic, functional elements of their business, while the Pinterest board will provide me with a good sense of the design styles they like.
02. Narrow down the images.
Once the client’s Pinterest board is complete, I analyze it for patterns. Do they pin a particular color a lot? A particular font style? Are the photos they pin following the same style? Looking for patterns helps me see the design style my client truly wants and stops me from creating designs they don’t want.
03. Decide how to create the mood board.
There are several ways you can create a mood board. You can create one using PicMonkey, Adobe Illustrator, Adobe Photoshop, Canva, etc. My preference is Canva. I find it simple to use and I can download the mood board as a PDF to share with my client.
04. Create the mood board.
Now I use the images from the client’s Pinterest board to create the mood board. If the client pinned multiple styles, you can create more than one mood board and ask the client which one they prefer.
Important: Try not to include other people’s logos and website designs. This can potentially over-influence your client to the point they want you to recreate exactly what someone else already has.
Here are two mood board examples I created for two different website design clients.
05. Send the mood board to the client
Once I’ve completed the mood board, I share them with my client. I like to use a project management tool like Asana to communicate with my clients, so I share the mood board and all other files through that.
06. Revise the mood board.
I like to offer one revision round for the mood board. My clients message me through Asana with their thoughts and feedback about the mood board, then I make changes based on their feedback.
I like to emphasize to my clients that the colors in the mood board can be altered during the design process. They aren’t stuck with the mood board colors and we can be flexible. A mood board is simply a foundation for the colors and style.
Keep in mind that when you’re creating a mood board, focus on the design and not specific content. Keep your mood boards as design-focused as possible. Beyond a few words you might suggest for display text (and to contribute to the design), save the content for later.
What has been your experience with mood boards? If you’re a designer, do you use them? Why or why not? I’d love to know in the comments below!