Wireframes: A Great Way to Start Designing Websites.
22 Mar 2016
Wireframes: A Great Way to Start Designing Websites.
A wireframe is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a skeleton, outline or drawing.
When creating wireframes you have a two options – the first is to create low-fidelity wireframe which involve drawing on paper, drawing on a whiteboard, or the use of software.
The other option is to use high-fidelity mockups that are closer to final product because they display user interface in more details.High-fidelity wireframesinclude a range of design elements such as a logo, images, a colour scheme, and other basic graphics.
Low-fidelity wireframes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process. Low fidelity wireframes are very quick and cheap to produce. You can easily change and modify them to suit your needs or throw them away and start over from scratch. They often can be created in tools like Balsamiq for an internationally hand drawn look.
Low-fidelity wireframes are less formal can also be helpful when asking for client’s feedback – it’s somehow easier to criticize something when it’s a rough draft as opposed to a high quality.
On the other hand, high-fidelity mockups are much closer to finished product – this can be useful for giving everyone a clear idea of how the interface will look and work, but they’re also very time-consuming and costly to produce.
High-fidelity wireframes can also be unclear for clients – especially those who aren’t tech-savvy as they can struggle to understand the difference between anhigh-fidelity mockup and the final fully functional application.
Wireframing brings the following key benefits:
- It gives the client an quick, close-up view of the website design.
- It can inspire the designer, resulting in a more creative process.
- It gives the developer a clear image of the features that they will need to code.
- It is easy to adapt and can show the layout of many sections of the website.
So, which is the right approach to wire-framing? It depends on the scope of the project you’re working on.
It is important to note that you don’t necessarily need to use low-fidelity or high-fidelity wireframes – it can be useful to start out with low fidelity wireframes and build up to more accurate mockups as you enhance the design.
