Wireframing is a technique that has been used by designers of websites for some time and with lots of success as it combines the benefits of low-tech speed and cheapness with an effectiveness and clarity that makes it an extremely useful and flexible tool in the early stages of website design and development.
The basic function of a wireframe is to present a workable and understandable model of the structure, user interface and content of a website and give a good idea of functionality, user flow and other features which can be helpful to both designers and other interested parties in the early development phase.
Wireframes are often developed and delivered through particular software packages but they can, conceivably be simple drawings on paper or a whiteboard (or at least begin that way before being subsumed into a more sophisticated medium). The building blocks of a wireframe are usually simple boxes, lines, text and shaded areas to represent the content, graphics, functionality and the relationship and progression between them. Typography hierarchy and layout can also be represented within the structure.
Two types of wireframing:
- The simple vector wireframe – a series of drawn screens roughly depicting the main elements of the site with placeholders for graphics, text, functions etc and with a rough architecture built around them to describe navigation and the functional relationships. A more sophisticated version can include text, comments on functions and content and actual pictures and graphics.
- The UI wireframe – a static version of the site; so the pages themselves are pretty final versions of the actual site pages but they are not linked or interactive so they just show the content and relationships with other parts of the site. It is also possible to produce clickable wireframes where the testers and parties to the development can click between rough pages and headings to trial navigability, logic in the links and understandability of the progression.
The advantages of using wireframing:
- It is quick, simple, cheap and easily changed so it is a good conceptual and discussion tool;
- Concentrating on functionality rather than appearance, there are fewer distractions from the structural relationships and developers and contributors don’t get so bogged down in commenting on looks, descriptors, layout etc
- It provides a visible, flexible and usable basis for experimentation and discussion around the architecture and navigation and a means of working through ideas and issues that emerge from the debate.
The potential disadvantages:
- As it very rough and lacks explicitness, it requires some imagination and effort on behalf of the viewer;
- It is generally lo-tech so is quite restrictive and can only provide broad illustrations and concepts in a primitive setting.
Wireframing is a very effective tool in website planning and development. If you would like to know more about the technique why not ring us on +44(0)800 0246247 or email us at hello@ux247.com
