What is a wireframe

A wireframe is a preliminary design to show the main elements in an application’s interface. It is a fundamental part of the information architecture and design process.

The goal of a Wireframe is to provide a visual understanding of a web project to obtain the approval of the interested parties and project team, before the creative phase is launched.

A Wireframe can also be used to create primary and secondary navigation, ensuring that the structure meets the expectations of the interested party, just as users can also use it as a feedback mechanism in the first usability tests of the prototype.

Wireframes can be simply drawn by hand, but are often formed by software such as Microsoft Vision to provide a screen delivery. However, if wireframes are going to be used for a prototype usability test, it is best to create them in basic HTML. There are some good programs that allow you to do this easily like Axure RP or Omnigraffle.

Advantages of Wireframing:

By far, wireframes are easier to modify than a completely developed design, since they do not carry the whole creative process and therefore saves time in the definition of basic elements. From a practical perspective, wireframes ensure the content of the page and functionality, the correct position of each element based on the needs of the user and the needs of the business. As the project progresses it can be used as a good dialogue between team members according to the vision and scope of the project.

Disadvantages of Wireframing:

Wireframes do not include design, and it’s not always easy for the client to understand the concept with black and white elements. The designer will also have to translate the wireframes into a design, so communication to support it is often necessary to explain why the elements of the page are placed in such a position. In addition, when content is added, what is initially displayed in predefined spaces may not always be the final space occupied by the information, since this could be too much to fit in the wireframe design, so the designer and editor will have to work closely to make this adjustment.


A wireframe must be used at the beginning of a project to obtain the approval of the user and the client in the design of the key pages and navigation. This will provide the project team, specifically the designers, the confidence to move forward. The wireframes will also save time and money in testing and modification during the later phases of the project. Hopefully, this post has communicated the benefits of wireframes and encouraged you to open your sketchbook.