A Guide to Viewing Wireframes

After sitemap creation, the second part of the architecture phase of the website project is wireframing. Wireframes are typically created with software tools such as HotGloo, Balsamiq, or Mockingbird which help create simple wireframes or even more robust prototypes of websites. However, the basic functionality of any wireframing tool is the same. They help you sketch the framework and structure of a website to visualize hierarchy, page real estate, content flow, and layout.

Wireframes are critical to the architecture process, allowing the client, project owners, designers, and developers to identify key areas in the structure and functionality of the site. Color, styling, and design elements are intentionally omitted in order for team members to focus on the structure of the site before it is passed on to the design phase. The overall goal of wireframing is to visually represent the elements, features, objectives, behaviors, and functionality of each page. 

Overview

• A wireframe is essentially a rough draft of the layout of a website.
• It consists of many white, skeleton boxes posing as different elements of a page.
• A few things to keep in mind: (1) The boxes are not proportional to the actual size they will be. (2) This is just a way to show everything that is needed for the website before the design process begins.

Sitemap Elements

• The first thing to realize is that the wireframe is a way to make sure everything brainstormed on the sitemap is incorporated in the design.
• Wireframes are usually built for homepages in order to include all of the main navigation, homepage elements, and header and footer elements.
• With that in mind, the purpose of the wireframe is simply to make sure all elements are included without being distracted by colors, shapes, fonts, or images.

Hierarchy

• The next thing to consider when looking at a wireframe is information architecture.
• On a website, the information should be ordered by importance (determined by the client from a user perspective), and the wireframe is the most efficient and simple way to visually convey this.
• When looking at the wireframe, make sure the elements are ordered by importance from top to bottom (left and right).

How do they relate?

• Last, but most definitely not least is the relationship between the elements.
• Do they make sense where they are placed in relation to others?
• Look at adjacent elements to determine if they are placed logically on the page relative to the other elements.
• Specifically, look for any call-to-action elements (buttons) and see if they make sense where they are placed.
• Make sure the wireframe has every element it needs, confirm the hierarchy, and address the relationships.

Conclusion

Wireframes are the "blueprints for design". They are critical to the success of a web design and development project, because they connect the underlying framework (the architecture of the site) with what you see in a finished product (the visual design). They are also utilized by nearly everyone involved in the project, including designers, developers, content strategists, project managers, external stakeholders, and clients.