A wireframe is a visual representation or a mockup of an interface using only simple shapes. They’re void of any design elements such as colors, fonts or images and they’re used to communicate ideas and represent the layout of a website in the early stages of a project.

They are usually done before the design phase commencement to get the business approval on the structure of the design itself.

It is important that:

• žElements on the page have a good aspect ratio for the content they contain.  ž
• The white-space should give elements room to breathe, and should never  be so large that connected elements get lost. ž
• If the  more than one header is shown, the headers adding  relevant information should be large, whilst others should be either small (e.g. where the header is mostly implied by the content) or omitted (where the header is completely implied by the content). ž
• Vertical space is used wisely.
• žAs a rule of thumb, multi-line text and headers that repeat down the page should be left justified. Lone lines can be centered. With tabular data and forms, the left column can be right justified.
• žTo Avoid: ž
  • Extraneous lines & ‘chartjunk’ ž
  • Unnecessarily repeated elements on the same page.
  • žInconsistent layout choices.
  • žInformation of minimal relevance to common tasks.