bare essentials: wireframe design

The user journey can be very simple or highly complex and will be made into a working model through wireframes. A wireframe is a visualization tool or blueprint for presenting the layout and functionality of a web page, which includes the concept, content, navigation structure, technology and branding.

Whenever a web interface design is presented, people tend to give more attention to the visual elements rather than the proposed function, structure or content of the webpage. Hence, the wireframe attempts to separate the look-and-feel of the site, from the way it reads and works by presenting a simplified version of the page in the earlier stages of development. Wireframes aim to create a design prototype, in monotone instead of color, of a working site, which means it illustrates how the user will use the site, and also allows for initial testing of concept and usability of the design.

So, how much detail is required in a wireframe? There is generally no checklist, as long as it represents how the site will work, hence the amount of detail is solely in the hands of the information architect. However, some dependencies may suggest the level of detail required, these are: the time allotted, the complexity of the project and the requirements of the client.

Wireframes may be presented in three ways:

1. Abstract – a bulleted list of what is required on the site in terms of design elements and functionality without specific reference to layout or placement of these elements or working screens of the action constituted by a function.

2. Low fidelity – is a simple representation of the layout of website elements such as the header, footer, navigation structure, and content objects, drawn within boxes and labeled with only headings or short descriptors that give a brief idea of what content sits inside it.

3. High fidelity - shows a detailed layout of key page elements and function (includes header, footer, branding elements, modules, content objects) with proposed copy or suggested relevant body content; navigation schemes (includes all navigation links, linked elements, drop-down menus, side bar, tabs, bread-crumb trail, etc.); placeholders for images, text and other multimedia; labeling of modules that do a certain function and forms (includes instructional text, call-to-action buttons, text field boxes, etc); user interaction such as rollovers, search and browse functions, customized views, and personalized web pages and picklists; control mechanisms (includes display, scroll, jump, zoom, hover, monitoring history and bookmarks, cutting and pasting, drag and drop, back to top, previous and next, etc.)

A website will have hundreds of web pages, so then, which pages should we create wireframes for? Any and all pages that have a distinct layout and functionality, such as main category landing and listing pages, sub-section pages, and major informational and application pages on the site. The number of wireframes required are dependent on the overall scope of work and complexity of the site whereby templates need to be created for each screen the user will come across on their journey through the site.