To explain what a wireframe is, you do not need 500 words. If you limit the definition to the basics, 10 words are enough. This is the definition of wireframe: “A wireframe is a simple sketch of a user interface.”

Since I have about 460 words left, let´s take a closer look at the words “simple sketch”. If we forget about software and user interfaces for a while, how would you create a simple sketch of your house?

You would probably grab a piece of paper and a pencil and draw some squares for the house itself and the door and the windows. A triangle on the top represents the roof. Finally some lines indicating the garden. There you are. You have created your first wireframe!

A wireframe for a software user interface is just the same. It is done with pen and paper. A rectangle represents the screen. Instead of doors and windows we talk about controls, e.g. buttons, graphics or any kind of input fields. Those are also represented by squares, triangles and circles etc., drawn with a few strokes.

After the exercise with the house you can probably already guess that a wireframe is not a work of art or of precision. The important thing is to convey the rough idea. So we do not care about colors or textures. We do not measure exact spaces between controls or force them into one line using a ruler. Texts are abbreviated or just connoted. Interaction or animations can be indicated by arrows.

Example of a wireframe:

I would now like to go back to the name “wireframe” and see how all this ties in with it: The visuals you can achieve in a classic wireframe you could also achieve by bending a couple of pieces of thin wires.

For a team working on the design of a user interface, the advantages of wireframes are pretty obvious.

  • It´s quick
  • Everyone can do it
  • It can be done almost everywhere as long as you have paper and pencil handy
  • Making changes is easy
  • Discarding a wireframe is cheap
  • The inhibition level to discard a wireframe for a better idea is low
  • It makes you concentrate on the essentials

Of course wireframes can also be created digitally or be digitalized e.g. by taking a picture, but for the sake of simplicity I only talked about paper.

Second example of a wireframe:

 

Not logged in