Skip to Content
Main Content

Hiker looking out over the mountains

Jenna Dehn

UX/UI Web Designer & Developer

Jenna works directly with clients to understand their challenges and goals in order to develop working solutions to any marketing or design struggles. She specializes in developing wireframes and prototypes with a strong focus on UX/UI design and works closely with Northwoods' digital strategists to ensure that strategy doesn’t get lost in the design phase of projects. Jenna also has experience in designing for data and creates stunning page layouts that showcase complex product information in a digestible format that allows any user to easily find the information they need. She also enjoys creating infographics, digital display advertisements, and illustrations to enrich marketing collateral.

Everything You Need to Know About Mood Boards

August 14, 2023 | Jenna Dehn, UX/UI Web Designer & Developer

4 Minute Read

What Is a Mood Board?

Mood boards are visual tools that quickly communicate design concepts and establish vision early in design projects. Design is subjective. Mood boards help clients and designers buy into a shared vision before they put in too much time and effort. They help clients see and evaluate preliminary design directions and give the designers time to consider feedback and change course as needed.

A mood board for a website covers such items as:  

  • Color palette
  • Images
  • Logos
  • Typography
  • Icons
  • Patterns or textures
  • Backgrounds
  • Illustrations
  • Animations

Benefits of Mood Boards for Web Design

Design is visual. Why settle for words alone to describe your design thinking when you can show it to a client on a mood board? We use mood boards to gauge our clients’ reactions and guide us to the next iteration of that mood board, if needed.  

A mood board can help both designer and client review existing design assets to determine what can be retained, altered, or supplemented. For example, a company might have a strong brand with great imagery but lack the sort of established iconography that would enhance a new website. The designer could add icon styles to the mood board for the marketing and/or brand team to review.

The mood board can be a valuable resource beyond the preliminary phase, as well. It can serve as a standing reference that keeps the style and aesthetic consistent with a client's expectations and brand.

For designers, the mood board can streamline the development of each visual element as the project advances. If you have a mood board, you’re never really starting from scratch.

Mood Board Examples

A client came to Northwoods with a newly developed brand. The client described it as “bold, exciting, and energetic.” They had colors, images, typography, and a logo. But they lacked marketing collateral and an established online presence. They looked to Northwoods to put it all together.

First, we ran all colors through an accessibility tool to show all stakeholders how the color palette meets – or doesn’t meet – accessibility contrast requirements. (Some colors need just a bit of tweaking to meet WCAG accessibility standards. Accessibility matters, so it’s important to address those updates as early as possible.) Next, we created background textures to elevate the client’s brand and give them more choices.

An example of a color palette optimized to meet accessibility color contrast requirements.

Once we had created all the elements (colors, images, fonts, textures, and logos), we put it all together (see below) to get a better idea of how the parts could work together to create a cohesive art direction.

An example of a mood board produced for a client by Northwoods.

This mood board proved to be a good start. However, it wasn’t the direction the client had envisioned – they wanted curves, not angles – but it prompted the feedback we needed to modify the design direction. They also wanted to bring in another color and a simpler background pattern. Their input helped us to quickly created the next mood board:  

An example of a mood board created by Northwoods.

This one aligned with what the client had in mind; they approved it.

The mood boards facilitated the client’s involvement in the design process. They shared their ideas, and it was critical for us to hear them. Starting with a mood board saved time and money and brought everyone together before the website design process officially began. Even though many brand assets were predetermined, a mood board helped us determine the best and fastest way to pull everything together into a cohesive concept.

Another client came to Northwoods with nothing but a description (“disruptive, modern, innovative, and daring”) and a logo – no color palette, imagery, icons, fonts, or patterns. The bold design concept our team created needed early approval to make sure that everyone involved understood the direction.

An example of a mood board developed for a client by Northwoods.

The client had some misgivings about the bold color palette – until seeing it applied to the sample content and design ideas. The mood board sealed the deal. We then built a website and marketing collateral based on the new look.

How to Create a Mood Board

If you want to create your own mood board, start by reviewing your current brand strategy and any existing branding:

  • Is the brand established or does a new one need to be created?
  • What adjectives describe the brand?
  • What assets are established and what needs to be created?
  • Is the color palette set?
  • What is working with the brand, and what needs updating?

Once you’ve gathered all the information, put it all together visually. When you see what you have, you can readily see what you need.

Online tools: Canva, Pinterest, Adobe XD and Photoshop, among many others, offer digital mood board creation tools.

Start Your Web Design Project with a Mood Board

Mood boards are a valuable way to start any web design project. Ensuring that everyone understands and approves of the art direction in the beginning makes the process seamless. It guarantees accurate representation of the brand. Most important: Mood boards draw everyone into the creative fun and make the design process more collaborative.

If you’re looking to redesign your website, launch a new brand, or redo your current brand identity, reach out. We’d love to help, and you’ll get to experience our mood board development process first-hand!