The purpose of a wireframe is to help you visualize the page structure and to place major components in context on your site. Fortunately, when creating wireframes you don’t really need any drawing ability beyond drawing boxes and squiggles.
The first step when creating wireframes is to lay out the main structure of your site. This includes the following:
- Homepage layout
- Interior page layout
- Sidebar layout
- Blog layout
The second step is to indicate how the major components will appear. The major components on your site include:
- Primary navigation
- Homepage content
- Interior page content
- Sidebar content
- Blog content
- Footer content
A low fidelity, hand-drawn sketch is most useful when creating wireframes because it conveys the idea of a work in progress, and you will avoid getting bogged down in details and will remain focused on layout and position. Content is broadly used to represent text, images, and forms. Any element that will appear on your site should be represented as best as possible. This definitely will help the designer when she is putting together the look and feel of the site.
An excellent software program that emulates the look of hand-drawn wireframes is Balsamiq. This tool is very useful because re-drawing the logo, primary navigation, sub-navigation, and footer on multiple wireframes can become tedious.
Creating wireframes is a useful step when building a website because it gives you the ability to more clearly visualize what to expect. The end result after several iterations will serve as the basis for your website design.
Next up in this series is picking the right colors and fonts for your website.
Find out how creating a site map helps to establish a high-level overview when planning a new website.