So, What Exactly are Wireframes?
Wireframes are essentially visual blueprints that serve as a skeletal framework to a webpage. They are created to arrange and organise elements on a webpage, including how interface elements and navigational systems will interact with each other. Wireframes are generally created by business analysts and user experience and visual designers, among others.
Wireframes essentially outline what a webpage does. Instead of focusing on the aesthetics of a webpage such as typography and colour schematics, among others, wireframes fundamentally focus on functionality, information and content. There are different levels to wireframes and each level includes more detail.
Wireframes help clients visualise the layout of elements and content on a page. They are different to prototypes and mock-ups as they generally only utilise lines, boxes and different shades of grayscale colour.
Benefits of Wireframes
Creating wireframes is a good way to make rapid versions of pages while measuring the practicality of design concept. When developing and/or redesigning a webpage, wireframes can be a very useful tool to map out your ideas.It is also fast and cheap to produce wireframes. Basic wireframes don’t require fancy software applications, and they can be easily manipulated since they simply consist of lines, boxes and dummy content.
Feedback from your designers and/or clients on your wireframes can help with enhancing software functionality, information architecture, user experience, user interaction, and usability. Without having to focus on aesthetics, wireframes can be used to more effectively improve user experience and more easily improved based on feedback.
Types of Wireframes
There are three main categories of wireframes:
- Low fidelity
- Mid fidelity
- High fidelity
Fidelity here refers to the level of detail that is added to the wireframe, that is, the higher the level of fidelity, the more reflective the wireframe is of the final webpage design.
1) Low FidelityThis type of wireframe only outlines elements on a webpage for a better visual understating of how everything fits together. It is the most cost efficient type of wireframe as they allow quick editing.
2) Mid FidelityThis type of wireframe includes a more functionalities, information architecture and placeholders for content such as dummy images or dummy text, among others, and all the qualities of a low fidelity wireframe.
3) High FidelityThis type of wireframe fills in all the gaps of a low fidelity and mid fidelity wireframe. These are basically mock-ups of how the actual webpages will look like. It should include colours, branding, draft copy and sample images, among others.
Apps to Create Wireframes
Wireframes can be done by hand or sketched, or produced through software applications. There is a variety of both free and commercial software applications. Good ol’ hand drawn sketches and Balsamiq are useful tools at the early stages of producing wireframes. Software applications such as Mockplus!, Adobe XD, UXPin, Justinmind, OmniGraffle and Origami are more suitable for higher levels of wireframe production.Just like how a well-built house requires blueprinting, wireframes are a solid starting point and foundation to a good website and its nested pages.————————————————————————————————Anchor Digital are a crew of strategists, creatives, coders, account managers and techs. We are a digital agency powered by your business goals.With Anchor in your corner you can expect tailored expertise and measurable results. Our business model is simple: Consult, Create, Convert.Through close collaboration, accountability and total transparency, Anchor combine the forces that set your digital brand sailing. From the ground up, we’re your partners in the climb.
