# Wireframe

A wireframe shows the layout and UI elements of an interactive application.

Beispiel einer Persona

# Summary

A wireframe is a kind of "technical drawing" of the interface, a schematic representation of a single page template. Form, position and approximate size or weight of the basic elements of the page are defined. Thus a conceptual layout is recognizable. The focus lies on the complete representation and arrangement of elements, which do not have to be designed yet, i.e. no color is used, placeholders replace pictures or whole areas of the page. Wireframes give a good impression of whether all the necessary information and functions are available and whether the layout of the page is consistent. Wireframes are well suited as the first interface specification that can be handed over to developers.

# Result

A basic structure of the graphical user interface that provides a first impression of the interactive application.

# Approach

Based on the usage requirements, the necessary UI elements are placed in the application frame. A grid should be used. It is recommended to work from " rough to fine ": first you define where and in which format the navigation and content area will be placed, before these are filled with further details, e.g. the number of menu entries, headings, text blocks, placeholders for pictures, etc. In the end, the visual weight of the individual UI elements can be visualized using gray scales.

# Utilities and templates

  • Paper & Pen, or
  • digital prototyping tools, e.g. Balsamiq

# Advantages

Wireframes allow customers and users to discuss the content of the application in a more focused way, rather than the exact design ("I don't like this blue").

# Disadvantages

It can be very time-consuming to keep wireframes up to date over the course of a project.

# References