This is part #3 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 either of the previous posts, you can view them here:
Our website’s goals are set and Hemingways has approved the site’s wireframes. Now that the upfront preparation work has been done to set the foundation, it’s now time to determine the general direction we’ll be taking with the client’s custom website design.
We didn’t (and never do) make decisions about the site’s design based on our personal design preferences. To create a fitting design for the Hemingway’s site, we needed to combine four things:
We combined these four elements, along with additional information unearthed in continued communications with Hemingways, into a Design Document.
Our Design Documents outline clear guidelines that detail how the various pieces and parts of a new site’s design will look, feel and work.
They discuss the details surrounding elements such as color palettes, textures, requirements, and preferred photography. They also outline what won’t be included in a site’s design.
Our Design Documents are 4 – 8 page reports that, after final approval, ultimately serve as concise, written design-direction agreements between ourselves and our clients.
Through ongoing online communications with Hemingways, we continued to (collect, if necessary) and review important details, including marketing materials, specifics from their visioning plan, competitor websites, websites that Hemingways admired, and photography.
We looked for patterns and continued to ask questions as we dug deeper to understand what style of design would best match their needs and company brand.
While we worked to complete the Design Document, Hemingway’s copywriter and marketing team worked to collect and refine their final content (text, photography, downloads) so that upon the site’s final design approval, we could quickly move forward into the coding stage of the project.
We synthesized all of the new information and materials we collected from Hemingways along with the previous pre-project planning work we’d completed.
The final result was a five page Design Document that detailed:
As mentioned in the final bullet point in the list above, the Design Document provided Hemingways with five potential color palette options from which they could choose.
These were the options presented:
After reviewing the Design Document, Hemingways provided us with feedback along with their decision on a color palette: Option #3, Quiet Adventure. We updated the Design Document and resubmitted it to them for review. They approved it in full.
Hemingway’s approval signified that they agreed with all of the design guidelines in the document, that they had no other required specifications of which we needed to be aware, and that the document should be used as the base from which we were to create the project’s next deliverable: the moodboard.
Join us next time in part #4 of this web design case study series as we start diving into the really fun stuff. The moodboard component of the website design process is where we start to work with colors, imagery, textures, and fonts. It’s where we move from words and planning to actual design.