Wireframing

3 Contributors
Last updated 22 Nov 12:43

TL;DR

Wireframe shows how will the UI of your product look. It does not have any sophisticated visual design, in fact, it can be drawn on a piece of paper.

What Is a Wireframe

A Wireframe is a technical and visual representation of the UI. It ignores any visual design and focuses only on the content and the structure of the UI. Wireframing can be done by sketching it on a piece of paper or a whiteboard as well as by creating it in graphic design software.

Creating a graphic design can be very time-consuming. The Wireframe shows quickly if the scheme or the information hierarchy of the UI is correct.

Why You Might Want the Wireframe

Wireframes create a clear picture of the elements that will be developed. This tool is fast, cheap, and impermanent.

You can use the Wireframes to:

  • see quickly if you did not forget anything.
  • make changes to the UI scheme without ruining the visual design.
  • transform it into a Clickable Prototype.
  • test the UI on users (to a limited extent).
  • test more variants of the UI on users at a low price.
  • show to the business stakeholders to ensure that their requirements are taken into account.
  • give the graphic designers a basis to create the UI.
  • communicate the functionalities without the distraction of any visual design elements.

Problems the Wireframing Solves

How to Implement the Wireframe

As mentioned earlier, the Wireframe can be drawn on a piece of paper so it can be created very fast. It is important not to go into too many details. The Wireframe should be customized for the target group. For example, a user prototype needs to have a real content - high fidelity, but a graphic concept without any real content is enough for stakeholders - low fidelity.

The Wireframe does not define the final look of the UI. It shows how the UI will work.

When drawing a Wireframe, follow these simple rules:

  • Always use just a grayscale: white, black and shades of gray.
  • Use a maximum of two fonts. If you want to show the hierarchy, use different sizes or styles of the fonts instead of changing the font.
  • The text can be replaced with lorem ipsum.
  • Avoid complicated pictures. Use simple objects like squares or rectangles.
    Examples: Instead of placing a real picture, write an "x". Instead of inserting a video, use a triangle (as a play button).

Wireframing Samples
Source: Visual Paradigm: How to Draw Wireframe for Android Apps?

Make your life easier and pick a tool for Wireframing, such as:

Common Pitfalls of Wireframing

It is common that the developers skip the Wireframing and create the UI directly. There is a risk of making some mistakes and it is more difficult and expensive to change it.

When you present the Wireframe to the stakeholders, you can get stuck on the look of the Wireframe. This can be a result of the following examples:

  • A lack of information
    The stakeholders cannot imagine how the UI will look. You did not explain to them that the Wireframe is for discussing the functionality, not the design.
  • Too polished Wireframe
    You misjudged the detail and did not focus on the functionality enough.
  • The stakeholders do not see their expectations
    You were too focused on your own image of the UI that the stakeholders' needs are missing.

Resources for the Wireframing