09 Jul Wireframes and their purpose

What is a Wireframe

Wireframing is a critical design phase that is often done in a User Centred Design process. A wireframe generally refers to the skeletal for the webpage or screen. The skeletal will define the framework for the website or application (desktop or mobile) – the required elements on the page, the functions available on the page, how your users interact with the page elements; and between pages on the website (or application).

At T2 Web, we will usually include a screen flow diagram (or at least a sitemap) before we embark on wireframes. The screen flow diagram will illustrate the user journey and allow you to better relate to how the website flows from page to page and the content in each page.

Wireframes are black and white layouts without any color, graphics or styling. It is deliberately kept simple so users can objectively focus on the elements placed on the page and the interactions on the page; without being distracted by styling or other graphics. The style and graphic imagery, can be tackled during the layouts phase where high fidelity mockups are provided.

Here is an example of how a wireframe looks like.

Purpose of wireframes

1. Gather feedback on placement of elements on the pages

• Think of wireframes as the blueprint of a house. You need to focus on the foundation before the interior design.
• Before we embark on the aesthetics of the pages, figure out if the element is at the correct spot and if it is necessary.

2. Consider the functions on the pages

• Wireframes will allow you to scrutinise the functions of every element on the page – is the element necessary, what a button does, where a hyperlink goes to.
• During wireframes phase, you can double-check if your website align with your intended objectives. If a function does not help with your planned objective, you might want to consider removing it.  
• As wireframes are low fidelity skeletals, it will be easier (and faster) to make amendments to wireframes compared to amending the high fidelity mockups. 

3. Prioritise & organise content

• The hierarchy, placement & grouping of the elements will be able to determine the priority and organisation of the content on the webpage.
• With the wireframes, you can also test if the navigation is clear and simple, whether users can find the information they are looking for.
• In addition, bold, regular, italic fonts can be used in wireframes to indicate the hierarchy of information. 

4. Test for potential pitfalls early

• We encourage our clients to test with wireframes before implementing layouts. You can print out the wireframes on paper, run a quality round of user testing with a handful of potential users using these paper prototypes to find out if your website has any issues. Any confusion and insights cited during this early stage of user testing can be dealt with during wireframes phase.

We do understand the desire of every client to want to save time and launch their website as soon as possible. However, although it is exciting to embark on a new project and want to see beautiful visual previews of the website immediately, the structure and foundation of the website is much more important. Wireframes will help to save a lot of time spent in the back and forth during both the design and the development phase. If you jump into high fidelity mockups without wireframes, there is a high chance of going into more rounds of iteration subsequently, and incurring higher costs ultimately.