Set the mood with Mood Boards


Designing a site

...can be a subjective process and can include potential miscommunication. This miscommunication can lead to issues in design or functionality later on, and possibly even the loss of trust between the client and designer. This process can take longer than expected, cause divisions between stakeholders, and on occasion lead to disjointed hierarchy and design cohesion between pages that had formalized designs and pages that did not. The solution for this? Give the whole design process a boost with a round of mood boarding. example of a mood board

For those of you not familiar with mood boards (or those needing a refresher), they are a collection of design components placed together into an easy to digest single document. These components might include:

  • Photography
  • UI Components (like buttons, lists, pagination)
  • Color Palettes
  • Fonts
  • Repeating Elements (like navigation, teasers, feeds)

Let’s take a deeper look at their potential.

Benefits to specific roles

Developers and site builders won't have as many questions about how something will look if the feature they are building wasn’t included in the design process.

Designers cut down the time they spend on over-designing and coming up with complex ideas before clients have seen a design by quickly coming up with lots of inspirational designs. It helps get that much-needed client feedback quicker by allowing the client to pinpoint their likes and dislikes faster.

Clients get the idea of what a finished product will look like quickly. Everyone involved is in agreement on the direction before too much work is done. Clients know what to expect during the design phase and can focus on functionality and layouts instead of the overall feel and design.

Mood Boards Provide:

Visual cues to the larger site design and aesthetic.

They help to give the client, for lack of a better word, the “mood” of the site without the potential of getting bogged down by too much information or overwhelmed by some small detail. This makes it easier for the client to share meaningful input that will inform the designer and speed up the whole process.

A fluid process.

They can be simple or very detailed. Multiple boards can be created. They may contain actual elements that will show up on the site or inspirational elements that will illustrate a certain feeling or aesthetic for components later on. They can be merged and reworked. But each of these iterations take a fraction of the time a full design would take all while keeping it simple and straightforward.

A quick way to demonstrate visuals and get clear feedback.

The reasons for choosing these visuals should be explained to the client. This will ensure that the client and designer are on the same page about the message the site design will take, which is by far the most useful part of mood boarding. It could take twice (maybe three) times as long in a standard design process just to get to this basic shared understanding.

Versatility for any design process.

While it’s true that every project might not have a need for them, their true value is shown when you have complex layouts, multiple templates, multiple stakeholders that will be deciding on the final design, or just need a little more guidance on your site’s message. Some might say that adding mood boards will just raise overall costs, or that getting client buy-in will be too difficult. In our experience we have found that mood boards actually lower the overall design cost by helping to inform the client, designer, and developer with less effort up front. They can also alleviate miscommunication and build trust, validating the client (and designer).


Mood boards are a way to provide a visual aesthetic during a fluid design stage, where client and designer share visuals and feedback to get everyone on the same page quickly. They are great for any project with a design component, and can save both time and money on the project overall.

Do you think mood boards are right for your next project? Contact Us.

Profile picture for user gnoack
Gregory Noack
Senior Front-end Developer, UX

Gregory started his career as a front-end developer in 2006 after studying as an apprentice printmaker in Northern California. With the help of his detailed design skills in art, photography, typography, and layout, he creates engaging websites for our clients.