A wireframe or template is an outline that visually and easily interprets the layout of a web page. The visual representation of layout and functionality is done in grayscale for both a web page and a mobile application. Their design is of low quality, thus avoiding the insertion of a specified user interface, that is, they only show the concept or main idea.
Its use serves as a guide to what the design will end up being in terms of functionality and structure of a product or service. All this always attending to the needs of the clients.
With wireframes we can:
- Represent the initial concept of interaction and functionality.
- Trace structures and compositions of navigation at a basic level.
- Take a generalized approach to the user interface.
What a wireframe should encompass
A wireframe must be composed of the following elements:
- Information from our website. To begin we will determine the location of the different content blocks by establishing a reading range. We will give different degrees of priority in reading the information to direct the user.
- Navigation. We will insert the elements that will grant the user’s mobility through the web page, such as links and everything that allows them to interact.
- Interface. Finally, we will delve into usability and the functions that we will give to the user so that their experience is enjoyable, simple and effective.
If you dedicate yourself to web design, the ideal is that before starting a new project you spend a little time doing a wireframe. It is always recommended to make more than one scheme to be able to compare and make the correct decision. At the end of the day it is the project of your future website, take your time.