What Are Website Wireframes?
The important first step in the design and development of any website is the production of a set of website wireframes. This is even more important since the introduction of responsive website design and mobile-first website design. But what exactly are website wireframes and why are they so important?
What is a website wireframe?
A website wireframe is a layout for a page of the site, demonstrating the structure of the page and the elements to be included within it. These are black and white mockups that do not include any colour, font choices, logos or imagery. Many people refer to website wireframes as being an ‘architectural blueprint’ for the site.
Why are website wireframes important?
Surely it’s a much quicker website design process to go straight into fully styled mockups? What’s so important about website wireframes that warrants a whole extra development phase in the project?
The review of black and white wireframes enable both designers and clients to really concentrate on the content and features of the website, as well as the user journey. Without the distractions of colours and fonts we can really focus on whether we are including the key elements that are going to aid a user in finding the information on your site that they are looking for and whether the flow of the elements on the page is going to create a good user experience. We can make sure that everything is on track before we get too far into the process, and clients find it a really useful indicator of the content that they will need to start preparing for their new site – they can see how many images they will need for each as well as the sizes that images will be used at. Wireframes can also give the client a good indication of an appropriate length of textual content, so that they can write or edit their text suitably (if they are managing this process themselves).
Used in conjunction with a style tile, website wireframes can become even more powerful. If you can agree the structure of the elements for the webpages, and agree the colours, fonts and design elements via a style tile, then you have everything you need to build the website templates quite quickly.
Wireframes can also be used for very early usability testing with your target market – if it is not clear to users how to navigate through the site structure at this stage, then the layouts can be re-thought at this point – making changes to wireframes is a simple and quick process, certainly much quicker than making large scale amends to full page mockups.
It is also important to remember that wireframes aren’t only for the unrestricted customer facing pages – they become even more important for customer login areas and administration areas. The backend functionality within these types of areas on a website can have huge effects on the way that data appears elsewhere on the website and can be pivotal to everything working Go to the full article.