Website Design Case Study Part 2 of 6: Wireframing
This is part #2 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.
In part 1 of this series we met the client (Hemingways Expeditions), saw their "before" site, and learned about the first part of the custom web design process: pre-design.
Pre-design work: complete.
At the end of the previous blog post we had wrapped up our pre-design work.
Because we took the time to complete extensive pre-design planning upfront, we had a great deal of solid information we could use to guide us through the actual design process.
The information we collected during the pre-design process would help us make informed, objective, smart decisions about Hemingway's new website design. At this point, we understood:
- the website's primary goals
- what story we wanted the site to tell
- how the site would be organized (specific sections and individual pages)
- what type of information visitors would be most interested in
- what we wanted to encourage visitors to do upon arriving
- what specific we had for individual pages in the site
- what type of content would be going into the various section of the site
Though not discussed in this blog series (as we're focusing solely on the design work in this case study), the website's content strategy work had been completed by this time as well. Thus, it was time for Hemingway's in-house copywriter and photographer to begin collecting and generating additional site content and assets, such as team member photos, testimonials, country-specific content, and itineraries.
Meanwhile, we got to work on creating the website's wireframes. We use Balsamiq to design and generate our wireframes.
What are wireframes?
The wireframes we design for our clients can be thought of as “skeleton page layouts”. Just like sketches of stick-figure people, they're simple visual representations of complex concepts.
We generate wireframes to help initiate communication with our clients and then ultimately arrive at a final decision about the exact pieces and parts and text that will be included in their sites' pages.
Through the use of relative sizing and placement (higher up or lower down) of page components, our wireframes allow our clients to understand the relative importance and placement of the different pieces and parts that will make up their pages.
Two things our wireframes do not do:
- Address color, fonts, textures, or design styling
- Show the exact sizing or placement of the various pieces and parts that will go into a page
The approved Hemingways homepage wireframe
After two minor revision rounds, the final Hemingways homepage wireframe was approved:
(Quick note: If you're a designer and are raising your eyebrows about the use of Comic Sans in these wireframes, please see our note about font-use at the bottom of this post.)
Similar but never exact
Wireframes are guidelines that are to be followed.
They are not 100% final, rigid blueprints. Compare the Hemingways approved homepage wireframe above to the final approved homepage design that is now live:
Several noticeable tweaks have been made. You can see the personal note from the owner is much longer than originally anticipated, and that instead of three blog posts laid out side by side, we ultimately chose to display the blog posts in a square grid of four.
We also split the one large testimonial that had been planned for the bottom of the page into two smaller testimonials, laid out side by side.
Wireframe complexity & detail
The complexity of the wireframes we create for our clients differs greatly from project to project.
Factors such as client preferences, the types of the content that need to be included, the amount of content required, the amount of content strategy agreed upon in the project's Scope of Work, whether we're providing copywriting or the client is having it done in-house, etc. all come into play.
Here is an example of a homepage wireframes we generated for another client. You can see there are more specifications, copywriting instructions, explanations, details, and notes incorporated.
Here is another homepage wireframe from a (quite) different, recent website design project.
Upon approval of the homepage's wireframe, we went to work on a wireframe for a standard internal page in the site. Internal pages were much simpler, but we created them for the client to see as they're so different than the unique homepage layout.
We then created wireframes for a limited number of pages within the Hemingways site which had unique layouts unlike the standard internal page layout used by most of the pages.
After Hemingways understood how their various pages would be mapped out, we received final and full approval for the wireframe work and prepared to move forward to the next step in creating their custom website design.
During the next stage of the design process, we begin to consider how the Hemingways final, polished site will actually look and feel.
The final wireframes have provided us with the bare-bones page skeletons. It's now time we focus on covering those bones with a fitting, strategic design.
****Comic Sans side-note to all the designers reading this post:
If you're a designer out there who's snickering about the usage of Comic Sans in our wireframes… just pipe down. Comic Sans is the only font you can use in Balsamiq wireframes. And no one but us designers ever notice.