Wireframing is part of the design process for a web page. It takes place in the early stages before any developments are made. It is like looking at blueprints for the erection of a new building. A wireframe is useful in providing a visual understanding for a client before the rest of the web page is created for them (experienceux, 2016).
There are two types of wireframes; low fidelity and high fidelity wireframes. Figure 1 is the low fidelity wireframe that has been created for a peer, Scott. This kind of wireframe is a sketch that is manually done by hand and created simply in black and white (Rawool, 2017).
Steadfast Creative states that low fidelity wireframes are the the designers initial thoughts, and are a good core for communication between the designer and client (2017).
Moving onto a high fidelity wireframe, in figure 2 it is clear to see that this wireframe is very similar to the first one, but with refined changes. The peer was very clear with the brief and after sharing the low fidelity wireframe, he was happy for it to be made into a more distinguished and sophisticated form – ultimately moving towards a high fidelity wireframe.
High fidelity wireframes are created to show the finer details of the design. For example, colours, typefaces, image dimensions, buttons etc – it goes beyond the absolute basic structure to bring more life to it (Steadfast Creative, 2017).
The brief created and provided by a peer resulted in the wireframe (Figure 1). It would have been in black and white as a basic outline, but following communication with the peer he was adamant on having this colour – therefore it has been included. Continue reading the next post in order to see the brief given, and an evaluation.
This video was very helpful and engaging to help understand the ingredients of a wireframe: https://www.youtube.com/watch?v=T0vt3nLZKks
experienceux (2016) What is wireframing? Experience UX [online] available at: <http://www.experienceux.co.uk/faqs/what-is-wireframing/> [accessed on 10th March]
Low fidelity vs. High fidelity Wireframes (2017) Steadfast Creative [online] available at: <https://steadfastcreative.com/low-fidelity-vs-high-fidelity-wireframes/> [accessed on 10 March]
Rawool. A (2017) What is a Wireframe – The Complete Guide to Wireframes, Web App Huddle [online] available at: <https://webapphuddle.com/what-is-a-wireframe-the-complete-guide-to-wireframes/> [accessed on 10 March]
Lim. W (June 2012) A Beginner’s Guide to Wireframing, Envatotuts+ [online] available at: <https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399> [accessed on 10th March]