Template Files

Wireframes - Web Project Template Files

By Sonia Kay and Ashley Friedlein,

This report is part of the Template Files for Web Projects bundle.



Web Project Template Files: Project Definition and Start Up
Authors: Sonia Kay, Econsultancy and other expert contributors
Title: Wireframes

About this Guide

Wireframes are simple page design representations that contain the content and functional elements of a page (or template) without any graphical elements present. Their purpose is threefold: First they are useful in presentations as an outline of the design approach. Second they are useful to the development team, in particular the designers at this stage, in defining and refining the elements that need to go on the page. Third they are useful to the team in showing the navigational architecture and information flow; that is, how the pages are going to work together to provide the user's interactive experience. The most important 2 things about such wireframes, however, are: They are easy for anyone to create, distribute and manipulate. So they are a great tool for collaborative working and iterative prototyping. They are very cost effective. You can rapidly try various approaches without committing yourself to more time and cost intensive activities like actual page design, or working HTML prototypes. The wireframes template is provided in PowerPoint format and is simple to manipulate and distribute. There is a 'basic' web page template that illustrates a standard layout for global and secondary navigation that could be used as a good starting point for typical content or e-commerce driven site. A useful feature of the template is its ability to highlight the nature of any content appearing on the page (e.g. static, dynamic) to the development team. To help illustrate how wireframes relate to final page designs (complete with content, graphical elements and images) there are two example wireframes from the original Econsultancy functional specification (NB the site has since changed) presented with the corresponding pages from the resulting live Econsultancy site. Wireframes can be used not just for pages that the site visitor sees, but also for any other interface - the content management admin screens, for example, as shown in the template provided. Note: the wireframes / storyboards can form a Schedule to the Contract (see Section 2.9.1).