Wireframes
Wireframes are used to design the visual layout of a webpage.
Wireframes should clearly show:
- navigational links
- text areas
- media used (including file format)
- position and type of hyperlinks on a page
The parts of this wireframe that look like large envelopes are used to signify images, audio files or videos.
The horizontal lines symbolise text areas. The parts shown in orange/red signify the need for a link.
Sometimes the text areas may include a summary of the text to be included rather than the horizontal lines.
Sometimes wireframes may also include annotations that specify:
- background colour
- text font
- text size
- text alignment
- text colour
- the size of any images e.g 150 x 200 pixels
Multimedia players may also be shown on a wireframe with a play button to indicate where the controls for audio and video should appear.
There are variations in the way that different elements are represented but the key points remain the same.
Low fidelity prototyping
A wireframe may be passed to a graphic design artist who will try to replicate the desired layout. The design artist may start to develop low fidelity prototypes that can be compared to the wireframe design.
These prototypes are created using pen and paper. They should be shown to the end-user group and their feedback should be considered when the final version of the site is being developed.
Low fidelity prototypes will often include more detail than a wireframe:
- text areas might contain all intended text
- image and video areas might contain hand-drawn versions of the final image/video still
