Wireframes 101 - What They Are and Why We Use Them

Marketing Advice - 02.08.22

When a client approaches us to deliver a brand new and innovative digital solution, whether it is a whole website redesign to a web application to aid business processes, one of the most important strategic elements we work upon and develop for our clients is wireframe prototypes.

Wireframes are, in a nutshell, a low-fidelity visual mockup of the views and processes that we envisage during the strategy phases of a project that we can use to show the client and collectively make changes upon.

We identify certain processes and user journeys in the strategy phase of a project and we use wireframes to visualise these views. These are the pages the user will encounter as they move through a website. These visual representations give us the perfect basis to work collectively with a client to ensure their customer's needs are met. Having these wireframes also allows us to conduct paper prototyping before venturing into the design phase.

They give both us and our clients a rough idea of the direction a project will take and how it will look and behave. Wireframes are NOT, however, project designs, plans and blueprints, and differ greatly from concept designs.

When Are Wireframes Not Used

Typically wireframes can be used for a wide variety of projects and applications, however, wireframes typically aren’t used for high-end product brochure websites. The reason being is that there is a high focus on the design and presentation of the brochure website, so the actual visual design takes a lot more prominence over how the information is laid out on the page.

Their Role in Design and Why Are They Used?

Wireframing before creating a concept design with colours, logos and imagery allows us to focus on user behaviour and information architecture while not getting distracted by smaller details such as fonts and colours.

If the web design process begins with a well thought out and structured wireframe, it saves a lot of time and energy changing layouts further down the line, and it also means that your designers can make more informed and accurate decisions over the final concept design of the website when the time comes.

Wireframing also allows us to put a lot of consideration towards the flow of the website and how the content of the website is interacted with. Wireframes typically just consist of layouts and snippets of content, which can be lost in a high-level design as our judgement can be clouded by the other design elements in place. Essentially wireframes allow us to see the wood from the trees when it comes to our websites.

Advantages of Wireframing

One of the main advantages of using a wireframe in the strategy phase of a website is that making changes to the wireframes becomes a quicker and more efficient process. As there are considerably fewer detailed design elements in the wireframe to be changed, things can be changed and added quickly and easily, and brand new layouts can be created based on other templates.

Another advantage of using wireframes for the initial design stages of a site is that when it comes to content creation it helps us to envisage exactly what content goes where, what content is the most important, and how much content should be included. All of this helps us at a later stage to create content that is both suitable for the setting, fits in well with the design and is optimised.

When it comes to communicating and proposing ideas and concepts to clients, showing them rather than telling them reigns supreme. Another advantage of using wireframes is that it is a great aid in communication, both internally and externally. Wireframes and prototypes can be shared amongst teams and the logic behind it can be quickly and easily interpreted, which is important when we have such a large team of people working on a project. It also allows the client to play an active part in the web design process and allows them to communicate ideas in a similar fashion, after all, wireframing isn’t just for designers and strategists.

Low-Fidelity and High-Fidelity Wireframes

Wireframes can be produced in two distinct flavours, low-fidelity and high-fidelity.

Low-fidelity wireframes are essentially used at the very beginning of the design process and are typically the rough sketches and designs we produce on paper and whiteboards in strategy meetings. They are the bare foundations of a design and can be rapidly created and changed, based on what we think would be the best way to structure a site or a project. Once we have the structure and layout defined in a low-fidelity format we can move on to the high-fidelity wireframe.

High-fidelity wireframes are a lot more polished and refined versions of their low-fidelity counterparts. They are typically created using one of the various graphic design tools we have available and be easily exported as an image that can be shared with clients. Their higher level of detail and layouts make them the perfect foundation on which to base a high-level design and create a technical specification from.

Creating a Prototype Using Wireframes

Some of our clients might require a prototype to get buy-in from the key stakeholders. This is where we can take wireframes a step further. Using the collaborative tool we present our wireframes in we can create a simple click-through demo that demonstrates a user journey. Wireframes give us the added value of allowing us to do these demo’s when requested without having the significant cost/time requirement of building this in code.

Efficiency

As mentioned previously in the advantages of using wireframes, efficiency is one of the defining features of using wireframes in the strategic and creative processes. There is a lot to be gained in using wireframes over creating concept designs. The low level of detail in a wireframe helps to focus our attention and allows us to refine the user interaction (UI) and the user journey. Then, once the concept design is presented to a client they can then focus on the design elements and transitions, happy that their users' needs are taken care of.

If you would like to discuss your own website strategy or would like our help with a web project why not get in touch with one of our digital strategists today?