# Wireframe

Visualize basic structure of the application
Time required
approx. 1-2 man-days
UX Conceptual Designer
Level of experience
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.

# Time of use

Wireframes can be created based on paper-prototype. High-fidelity prototypes are then build on wireframes.

# Tools and Templates

# 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.

# Hints

Stick to established design patterns when designing wireframes and placing UI elements.

# Sources