Wireframe 

What is Wireframe?

Wireframe – a cursory layout drawing of a webpage that acts as the first step in the design process.

It is a way to design a website service at the basic level. A wireframe is commonly used to lay out content and functionality on a page that takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic level of a page before visual design and content are added.

Critical in UI design

A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process.

The goal is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway. It can also be used to create global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

A wireframe is much simpler to adapt than a concept design

It is quicker and cheaper to review and adjust the structure of the key pages in a wireframe format. The development of the wireframes to a final version will provide the client and the design team confidence that the page is catering to user needs whilst fulfilling the key business and project objectives.

Wireframing takes place in the begin of the project lifecycle

Often used to complete the User-Centered Design process, wireframes are also used at the beginning of the design phase. A prototype usability test will often be a test of the wireframe pages to provide user feedback prior to the creative process.

Wireframes can be simply hand-drawn but are often put together using software like Microsoft’s Visio, to provide an on-screen delivery. However, if the wireframes are going to be used for a prototype usability test, it is best to create them in HTML. There is some good software that allows you to do this easily including Axure RP or OmniGraffle (Mac only).

Advantages

One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism for prototype usability tests. Not only are they easier to amend than concept designs, once approved by the client and the users they provide confidence to the designer.

From a practical perspective, the wireframes ensure the page content and functionality are positioned correctly based on user and business needs. And as the project moves forward they can be used as a good dialogue between members of the project team to agree on the project vision and scope.