What Are Wireframes?
A wireframe is a webpage blueprint or schematic, which visually represents the underlying structure of the site. The goal of a wireframe is to make clear the basic functions of the page, the information displayed and the various scenarios based on what the page allows users to do.
Why Use Wireframes?
Wireframes come in handy when designing a site because they can be amended as required and used to experiment with different options, as well as give developers a better intuitive sense of how to design the site to be as functional and user-oriented as possible. Wireframes are also used as the basis of working prototypes. This can save valuable time because amendments are easy and quick to make, and the wireframe provides a guide for all the developers who are working on the site.
How to Make and Use Wireframes
Making wireframes can be easy if you understand the principles behind them. There are three things to think about when creating a wireframe: the information content, the interface design and the navigation design.
Figure out what your message is by determining the profile of your customers. You may market to multiple demographic groups, but getting insight into the broad spectrum of your audience and customers helps to sharpen your site’s message. Ask who your customers are, what problems they are trying to solve, what your business’ appeal to them is and what they need to be able to do on the site.
Knowing what the goals of your website and users are, you can then set about designing the user interface; those elements of the page that users can interact with. Draw up a rough draft of the layout of page elements, with a pen and paper or using a graphic tool. Label these elements with the functions and various options they present.
Next, the navigation design connects up the various pages on the site. The navigation design needs to identify the relationship between pages, and the avenues of action that users will likely negotiate. Think about where a user is going depending on the page they’re on: if a page goes into detail about a particular service, link users to the page where they can buy that service.
Once the wireframe is complete, you can then add details and start formatting to create your prototype.