A wireframe is a basic, low-fidelity representation of the initial product concept, containing the essential elements that would feature on a webpage or app. Wireframes provide a clear outline of the page structure, layout,
information architecture, and overall direction. A wireframe traditionally only uses black, white and grey, and can either be drawn by hand or created digitally.
Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:
The wireframing process tends to take place during the exploratory phase of the product life cycle. During this phase, the designers are testing the scope of the product, collaborating on ideas, and identifying business requirements. A wireframe is usually the initial iteration of a webpage, used as a jumping-off point for the product’s design.
Wireframes serve three key purposes: They keep the concept user-focused, they clarify and define website features, and they are quick and cheap to create. Let’s take a look at each of these purposes in more detail.
The wireframing process tends to take place during the exploratory phase of the product life cycle. During this phase, the designers are testing the scope of the product, collaborating on ideas, and identifying business requirements.
There are three main types of wireframes: low-fidelity wireframes, mid-fidelity wireframes, and high-fidelity wireframes. The most significant distinguishing factor between these wireframes is the amount of detail they contain.
Low-fidelity wireframes are basic visual representations of the webpage and usually serve as the design’s starting point. As such, they tend to be fairly rough, created without any sense of scale, grid, or pixel-accuracy.