A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality and intended behaviours. As a wireframe usually represents the initial product concept, the styling, colour and graphics are kept to a minimum. They can be created by hand or digitally, depending on how much detail is needed. It is a vital tool for UX designers.
The process seems to take place during the exploratory phase after the idea generation. The designers test the scope of the product, collaborate on ideas, and seeing the business requirements. A wireframe is the inital iteration of a webpage, used as a beginning point for the product’s design.
The three key purposes of wireframes are:
Keep the concept user-focused
Clarify and define website features
Quick and cheap to create
They are effectively communication devices; they facilitate feedback from the users and genertae ideas between designers. Conducting user testing during the early wireframing stage allows the designer to gather honest feedback, and identify key pain points that will help establish and develop the product concept further.
Wireframing specific features will clearly communicate to the users how the product will function and its purpose as not all people would understand technical terms. Seeing the features on a wireframe will allow you to visualise how all the features work together and could make you remove or add other elements.
All you need is a paper and pen. It allows you to see if there are any changes need at this early point of the design process as the later it gets in the process, the harder it is to make changes.
There are three main types of wireframes; low-fidelity, mid-fidelity and high-fidelity. The most distinguishing feature between them is the amount of detail each of them contain.
Low-fidelity are basic visual representations of the webpage and usually are the design’s starting point. They tend to be rough and are drawn without taking scale or accuracy into much consideration. They consist of simplistic images, block shapes and mock content.
