大象传媒

Wireframes

Wireframes are used to design the visual layout of a webpage.

A wireframe should show:

  • the indented layout of the page
  • the position of:
    • navigational bars/links
    • all text elements on the page
    • media elements (including file format)
    • elements that allow a user to interact
    • form inputs
    • hyperlinks (including types)
Wireframe image showing placeholders for text, links and images or videos.

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.