STEP 5: How Zoom Creates a Wireframe
In the last segment about sitemap creation for J.R. Johnson, Inc., we described how we planned out, divided, and arranged the contents of J.R. Johnson’s website into pages. The next step in organizing all this information is called wireframing. Wireframing outlines the arrangement of content on a page to provide a clean, simple, and functional user experience.
What is a website wireframe?
A wireframe is much like a newspaper layout. It is used to determine how much space titles, texts blocks, and pictures will take up and how they are arranged. As the name suggests, a wireframe is a mockup of the finished website using only borderlines and descriptions of each section. Similar to a newspaper layout, different page templates are used depending on the purpose of the page.
For example, think of the home page of a website as the cover page of the newspaper. Most of the space is taken up by pictures, headlines, and introductory text to each of the top stories, and references on how to find other news within the paper.
There are also cover pages for each section; for example, living, sports, and business. These pages would are like level one pages of a sitemap. For the J.R. Johnson website these pages would be service category pages like construction defect repair, fire damage restoration, storm damage restoration. These pages will be similar to the cover page but with more text and content specific to that section.
Finally, there are the internal pages. These pages are very text heavy. This is where most of the specific information for their category is found.
What function does it serve in creating a finished product of a website?
Wireframing plays a major role in creating the user experience (UX) of a web page. In general, people have basic expectations of what they will find on a web page and how they will interact with it. In creating a wireframe, designers consider:
- where to place standard website components like logos, navigation bars, search boxes, and contact information so that a user can easily find them,
- text, image, and video priority to direct users to the most important and personally relevant information and do it in a visually appealing way,
- what links are placed where on the page in order to allow the user to easily navigate to the information that they are seeking.
If considering the interplay of all of these factors is not enough, the designer will also have to consider the tastes of the client. The sitemap serves as both a blueprint for UX and proof for the client.
How is a wireframe made?
Wireframing is the interface and alignment of every department within Zoom Creates. Most of the time our marketing goals, creative aspirations, and the restrictions of internet code all align to create a glorious website workflow. Sometimes wireframe creation is an interdepartmental cage fight with the website client as a referee.
Our primary focus is our client’s business goal. In this case, the goals are to position J.R. Johnson at the forefront of the market by presenting them as the most up-to-date, trusted, and knowledgeable of their industry and then to provide them with as many leads as possible. This meant creating a website that is intuitive, transparent and packed with high quality, highly user-relevant information.
With the business and website goals in mind, the wireframe was designed to navigate people to the service and information that is most relevant to them. As Corrina pointed out, “If someone’s house was on fire, they’re not going to care about construction defect repair.” The content will then be organized on the page to easily answer their most urgent questions and finally the user will be directed to a contact form or to call J.R. Johnson, Inc. to answer any additional questions they may have or to request an estimate.
One aspect that affects the wireframe creation is the textual information on each page. In the next segment of the Zoom Creates Website Design Process Series, we will detail the process of informative copywriting for SEO and show how it affects J.R. Johnson, Inc.’s business and website goals.
To follow this series, “Like” us on Facebook or subscribe to a feed below.
See the rest of Zoom Creates’ Web Design Process Series for J.R. Johnson