1. Home
  2. Smartpedia
  3. Wireframing

What is Wireframing?

Smartpedia: Wireframing is a process for designing websites, web applications and software screens that includes information design, navigation design and interface design.

Wireframing Definition

Anyone who designs a website or the Graphical User Interface (GUI) of a software is faced with the question of what is displayed how and where. What information is conveyed, what is the structure of the presentation and how should the user navigate? A wireframe describes the structural model of

  • a website,
  • a software or
  • a web application.

It is a schematic design that defines which elements are used in which places and how the navigation between the elements on individual or different web pages or screens of a software or web application works. The process of creating a wireframe is called wireframing.

 

Wireframing - a process for designing websites, web applications and software screens

The Design of Information, Navigation and Interface

Wireframing involves designing a framework that visualises the information architecture, navigation and user interface. It is therefore about

  • Information Design,
  • Navigation Design and
  • Interface design.

Alternative terms for Wireframe are Page Schematics or Screen Blueprint. 

Abstraction and Conception in Wireframing

The focus of wireframing is on the structure of the display and on user guidance. It is about

  • an abstraction of concrete content such as texts or images.
  • the conceptual design of one or more user interfaces and thus the general arrangement of elements such as logo, headers, headings, text fields, search fields, forms etc.
  • navigation, i.e. the use of menus, e.g. in the header, footer and by breadcrumb, or the calling of commands, e.g. by right mouse button or short codes and keyboard input.

There are different opinions regarding the consideration of corporate identity. Most publications prescribe the use of colours, formats and fonts more for mockups and less for wireframes. Either way, in practice this point is important. A subsequent adaptation of an implementation always causes more effort than the correct use of agreed aspects from the beginning. 

Wireframes Types

There are two types of wireframes:

  • Low-fidelity wireframes
  • High-fidelity wireframes

Low-fidelity wireframes are understood to be the simplest designs, e.g. drawings created with pen and paper. Even a simple design created by software can be a low-fidelity wireframe. The focus is on the essentials, e.g. the selection and arrangement of elements. Advantages are the fast, cost-effective and in the best sense simple abstraction. Sometimes the use of Lorem ipsum dummy text as placeholder for content and labels is mentioned as a feature, but such placeholders are also used in high-fidelity wireframes.

In comparison, the high-fidelity wireframe is a more mature, visually and also technically more detailed variant. For example, elements have information such as concrete dimensions, and the behavior and possible actions of interactive elements can be observed. Of course, the creation is more time-consuming and expensive, but the understanding of the parties involved is higher. And high-fidelity wireframes actually enable a first (positive) user experience.

In summary, the elaboration of the details and the completeness of the illustration are the main distinguishing features. However, more important than a clear distinction between the two types is the following: The two types are not in competition with each other, but build on each other. With a low-fidelity wireframe, rough structures can be quickly defined and an initial understanding between the parties involved can be generated. With a high-fidelity wireframe this understanding is expanded, details are integrated and interactions are made possible. Alternatively, the two types are also referred to as static and dynamic wireframes. 

Advantages of Wireframes

Wireframes offers a number of advantages:

  • The creator of the wireframe gains clarity about the structure of his website or application.
  • A wireframe can be realised quickly – at least with regard to the creation. The more extensive or complex a solution is, the longer the creation will take.
  • Since a wireframe is “drawn”, the procedure is much cheaper than rashly starting to implement a solution or program a website.
  • Wireframing is also favourable with regard to the use of materials. In the simplest expansion stage, pen and paper are sufficient. Of course, the more people are involved in the process, the more effort it takes or the costs increase depending on the possible technical solutions (see Wireframing Tools).
  • Customers, users, colleagues, clients etc. can be involved at an early stage. And the exchange between the respective parties is encouraged.
  • An iterative approach is supported, in which new insights can be easily used and integrated; much easier than with later adjustments of the implementation.

 

Wireframe Software

In some practical reports it can be read that the creation of high-fidelity wireframes using software and interface libraries works as fast as with low-fidelity wireframes. Such statements should of course be treated with caution; they may have been made by a wireframe software vendor.

Here you can find a list of wireframe software:

 

Impulse to discuss:

What do you think of the following statement: “A user interface is like a joke. If you have to explain it, it’s not very good.”

Notes:

At SoftwareHow you will find a detailed comparison of some of the tools linked here.

From time to time the question about the distinction between wireframes, mockups and prototypes – e.g. click dummies – arises. Even if the boundaries are rather fluid, the following description may help:

Wireframe - Mockup - Prototype

Here you will find additional information from our Smartpedia section:

Smartpedia: What is a Click Dummy?

What is a Click Dummy?

Smartpedia: What is a Protoype?

What is a Protoype?

Smartpedia: How does Pretotyping work?

How does Pretotyping work?