# Wireframe
- Purpose
- Visualize basic structure of the application
- Time required
- approx. 1-2 man-days
- Participants
- UX Conceptual Designer
- Level of experience
- experienced
# 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
- Paper & Pen, or
- digital prototyping tools, e.g. Balsamiq (opens new window)
# 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.