Website Design Case Study Part 4 of 6: The Moodboard

Filed under: How To | Website Design

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.

See other beautiful websites we've designed.

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:

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.

Take a peek at our portfolio.