What are Wireframes?

A wireframe is a blueprint of your product and describes all the key screens, processes and interactions, one page at a time.

They are one of the outputs of user experience design.

On one side of the page is a labelled diagram that outlines the content and navigation on each screen; on the other side, a description accompanies each label. Wireframes should clarify how content is linked and allow you to follow and validate key user journeys across the site.

It is best to show the diagram at 100% size of the target device (or a good approximation there of) on your page, so you get a realistic view of how much content is visible at any one point.  For a typical desktop website on a typical 1024×768 monitor with accompanying notes, you want to print out onto A3.

Content hierarchy

It is not important for wireframes to carry any styling, that is what the designer does next, but they do need to establish a content hierarchy – the order of importance. Making this clear lets the designer know what content should appear most prominently and what is less important.

A little typography goes a long way

A wireframe does need to be clear and highly legible so take a little care with the typography;

  • choose a single sensible font that works well at smaller sizes
  • use no more than 4 different font sizes
  • pick 3-4 shades of grey, a spot colour or two and use only those colours
  • stray away from commenting on the screen
  • be judicious with any added screen furniture, cut down on visual noise

Tools for creating wireframes

You could use any simple drawing package, though more sophisticated ones will probably make editing and maintaining a set of wireframes easier.

Consider how you are going to share them, gather feedback and make changes. Software tools such as Axure, InVision and Mockplus make collaboration much easier but new tools enter the market all the time.

Where next?

To understand what your product feels like to use, consider building a prototype of your product.