What is a moodboard, and where do we go from there?

Posted By:

Ashley Spires

Woman holding a clipboard containing a moodboard

A moodboard is a collection of visual elements to help ensure the designer and client are on the same page. This is a quick and efficient way to show design direction without getting too far into all the finicky details. Moodboards are a crucial step in any design process. Whether it’s designing a website or branding, moodboards should always be established first for a successful end result.  

The Purpose: Evoke Emotion

The purpose of a moodboard is to evoke an overall feeling or emotion. These emotions should reflect the brands’ mission and values. A moodboard is created to give an overall idea of the visual direction, not to be confused with seeing the final design. Moodboards are the guiding point, but this doesn’t mean the design is set in stone. Often enough elements are refined along the way.

What will they look like?

Moodboards often include pieces such as; colour palette, typography, imagery, and icons. Depending on the project they can also include more detailed pieces such as call to actions and graphical elements. While this may be overwhelming, seeing all of these detailed elements at once, note that this is just to provide a general design direction. The focus should be on the colours and the overall emotion you feel from the moodboard. The individual pieces will often evolve with the design as it goes through the process and when all the elements come together in the final piece.   

What is the next step?

Once a moodboard is decided on, the next step is implementing them into the design. For web design, the moodboard will be implemented in the high-fidelity stage. While the overall direction that is chosen will be kept in mind throughout all the stages, the high-fidelity stage is where the design comes to life. This stage shows the finished pieces all together, including the full colour palette, imagery, icons and any other design elements.


Moodboards are a great way to make sure everyone involved is on the same page and there is no miscommunication. They can also be a fun way to visualize a brands’ values and emotion through imagery.  

What mood will you choose?

Want to learn more about our process? Read more about our wireframe phase or get an overview of our entire process, from beginning to end.

Our process delivers results.

Let our work speak for itself!

Our process

Like the steps to baking the perfect cookies, we use our refined process to build you a website that reaches your goals.

  1. Discovery
  2. Strategic Kick Off
  3. Mood Board & Sitemap
  4. User Flow & Wireframes
  5. High Fidelity Designs
  6. Build & Test
  7. Launch
  8. Training