Website Design Case Study Part 3 of 6: The Design Document
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:
- Website Design Case Study Part #1: Intro & Meet the Client
- Website Design Case Study Part #2: Wireframes
—————————————-
Picking up where we left off
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.
Where To Start?
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:
- The goals of the site
- The vision and story the client wished to tell
- Client requirements
- Our expertise + design capabilities
We combined these four elements, along with additional information unearthed in continued communications with Hemingways, into a Design Document.
Design Documents
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.
Uncovering More Details
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.
In the meantime…
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.
From Data + Details To Design Document
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:
- Focus points + guidelines for the new site’s design
- A section containing details on the new site’s overall look and feel
- A list of design components that would be included on the homepage [example: photo slideshow]
- A list of design components that would not be included on the homepage
- A list of design components that would be included on all pages in the site
- A list of design components that would not be included anywhere in the site [for Hemingways, this included items such as video, animation and music]
- Unique components that would only be included on specific pages
- A recap of Hemingways feelings regarding the designs of competitor websites
- A list of five proposed color palettes for the new site (see image below)
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.
The Significance of Design Document Approval
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.
Great websites need great design. See websites we’ve designed.
———————————————————
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.