The web agency that excels at finding smarter ways to
improve your website and online marketing. Here's how


Website Design Case Study Part 4 of 6: The Moodboard

By Erin  |  March 12, 2012  |   How To | Website Design

Part 4 of the website design case study: moodboard

This is part #4 of a 6-part case study blog series in which we walk through the actual process behind the creation of one of our custom website designs. 

If you missed out on any of the previous posts, you can view them here:


What we have

We now have our finalized wireframes, which shows us what content will be in the new site and and how that content will be laid out. We also now have our finalized Design Document, which serves as a written design agreement between ourselves and Hemingways.

Next step: we create the new website design's moodboard.

What is a moodboard?

The moodboard we designed for Hemingways translated their Design Document's text into actual visuals.

It provided Hemingways with their first actual, visual sense of what their design would look and feel like.  (Needless to say, moodboard unveilings are usually very exciting milestones in website design projects.)

Here's an easy way to think about moodboards:
Moodboards are the fancy clothing "skin" that sit over the the naked wireframe skeletons.  

The final, approved moodboard...

Because so much time has been spent planning upfront, the moodboard contained no surprises for Hemingways. Instead, it was an accurate representation that visually summarized all of the communications and decisions they'd engaged in. And so, not surprisingly, when we presented the moodboard to Hemingways, they responded, “Looks great!!”.

This particular moodboard was simple and straightforward, and in it we placed a heavy emphasis on the specific textures presented. 

After a quick update round consisting of two minor changes (including the removal of a specific animal print), Hemingways approved the moodboard. 

Here's what the final moodboard looked like:

website design moodboard

With the moodboard approved and the visual look and feel of the site agreed upon by everyone, we officially had everything we needed to begin working on the actual website's design.

We'll have a look at the design work next time in part #5 of our website design case study series.

A quick side note to designers

To all our fellow website designers reading this post: Recently, as you can see from the images posted, we've been thoroughly enjoying working with Kevin Flahaut's PSD, which is a fabulous foundation from which to start the moodboard design process. We highly recommend it. A most sincere thanks to Kevin's hard work and selfless sharing with others in the design community!

Get an email when our next post comes out! Sign up now