What is a Website Wireframe?

Introduction

We can all agree that website visitors have a purpose, right? They’re on your site to achieve something, find something, buy something. Wireframes help web design teams and clients focus on what that purpose is and how to most effectively meet it.

A website wireframe, sometimes referred to as a page schematic or screen blueprint, is a visual representation of the website's skeleton architecture. In their first iteration, they don't often have many design features, such as logos, colour schemes, or font selections; free of any distractions. It provides a simple black and white blueprint that focuses solely on a site's structural aspects, such as page element size and arrangement, site features, conversion areas, and navigation. It's the base from which to build.

In the web design sphere, you might have come across a lot of fancy, unmemorable keywords that sound technical; SEO, Attribute Filtering, CMS, SERP, Google Search Console, Wireframe! And so by utilising this wireframe tool on a website build, it provides a clear communication between client and company on how these features will function, where they will live on the specific page and how useful they might actually be without feeling like you’re being spoken to in a different language. Wireframes ensure that all parties are on the same page.

‍

Differences between Low Fidelity Wireframes and High Fidelity Wireframes

Some more techy words for you; high fidelity and low fidelity. The main distinction between low and high fidelity wireframes is how they contribute to the overall user experience. Low-fidelity wireframes are a useful tool for visualising needs and ensuring that everyone is on the same page early on. High-fidelity wireframes ensure that your design decisions are conveyed to the team developing the final product, and that target consumers are taken into account.

Low-fidelity wireframes are simple and quick to build, and they can be adjusted as the design evolves. They can also be easily scrapped and rebuilt from the ground up without disturbing the design process too much. Low-fidelity wireframes are also a useful tool for bringing a web project's team together, letting everyone agree on the simple components before moving onto the more sophisticated high fidelity model- minimising rework later on.

At Paddle Creative, we always begin with the low-fidelity wireframe and then move onto the high-fidelity wireframe. This allows for the basic concepts and layouts to be agreed before adding more meat to the bones in the high-fidelity wireframe. High fidelity wireframes tend to resemble the final product meaning that during testing, participant behaviour is more likely to be realistic, delivering more accurate feedback, and allowing for the creation of a more comprehensive user experience.

Wireframes, both low and high fidelity, are important stages in the web design process. It allows designers, developers and you, the client, to better understand how it all fits together.

‍

‍

How to Build A Website Wireframe

Wireframe tools allow designers to rough out their ideas and get the basic building blocks in place so the overall design can be assessed and refined.

Octopus.do

For low fidelity wireframes we like using Octopus.do. This software is simple and quick, perfect for low fidelity wireframes. It can remotely represent how and what information will be located on the screen. One feature in particular is the Content Brick Method- a game changer!

The 'Content Brick' method of building a website structure and mapping out content is basic yet effective. Its biggest benefit is that it eliminates the requirement for you to be a web-mastering specialist in order to develop a functioning, working website.

When we start a project, we put together a comprehensive low-fidelity wireframe that is easy for you to understand and also allows us to create the website map at the same time. We then share this with you for feedback. Once we iterate this, and the final version is agreed, you have all the content blocks required and it allows you to get working on your content (or we can write your content for you).

Figma

Figma is quickly becoming the go-to design tool for a whole host of design purposes. It is for this reason that we utilise Figma for high-fidelity wireframes. Figma is also a cloud-based design software making it easy for remote teams, like Paddle Creative, to work collaboratively. It also allows you, the client, to be involved in the process as we can quickly share a wireframe on Figma and you can give feedback directly in the platform. Figma gets our top rank for the best wireframe software for developing high-fidelity wireframes. (It's also Webflow’s #1 selection, so you know it's awesome!)

Figma can show you how each element will behave on various screen sizes, making it much easier to optimise your user experience for mobile and desktop. It also allows numerous team members to access and alter the design as well as make comments when it comes to collaborative working.

‍

‍

Whilst at Paddle Creative, we use Octopus.do and Figma as our tools of choice, there are other options if you wanted to create your own wireframe. Below are a few other options for you to consider.

Adobe XD

For quite some time, Adobe XD was the tool of choice for Paddle Creative. Figma only won out due to a few subtle differences, but Adobe XD is a great bit of software.

With easy-to-use tools for building site maps, flowcharts, and storyboards, as well as a comprehensive array of prototype tools, Adobe XD focuses on making the wireframing process as efficient and straightforward as possible for designers.

The platform also offers a repeat grid option, auto-animation and voice triggers, and a comprehensive set of collaborative working capabilities as part of Adobe XD's commitment on offering designers tools that make quick creation feasible.

Vireflow

Vireflow is a basic yet effective wireframing programme created by Anton Balitsky and hosted on Webflow.

Balitsky's creation is rudimentary, and you'll need to add your own UI libraries and objects, but it's completely free, making it great for individuals who want to start into web design without investing any money.

There are many other tools out there and this resource is not intended as a review of all of them. IF you want a wireframe creating, do get in touch with Paddle Creative and we can set our expert team to work.

‍

What is a Website Sitemap - And Where It Fits In

Whilst a website wireframe is a visual layout for each page, a website map is an overview of the layout of the whole website. So even before we get to the wireframe stage, we start with a sitemap.

The sitemap allows you to easily see what pages you need to write content for, and how they all connect together. This shows the user flow of a website and this is a crucial first-step in any custom website build.

‍

Why Create a Wireframe

It takes time and effort to create a website. Wireframing is one of those steps in the web development process that should not be overlooked. Think of it this way, you wouldn’t build a house without a blueprint, so you shouldn’t build a website without a wireframe. Each step has an important place in a larger process.

Wireframing saves time in a variety of ways, contrary to popular belief.

• Your designs have a more deliberate approach to them.
• The designers, developers and you, the client are all on the same page.
• It becomes much easier to create content.
• It allows for quicker development of the site as fewer changes are required.

‍

There’s a chance you still don’t quite know why we create wireframes, so let's clear it up.  Creating a wireframe forces everyone to look at a website's usability, conversion routes, link naming, navigation positioning, and feature placement honestly. Wireframes can help you and us see problems in the site's architecture and show you how a certain feature might operate.

After a feature has been wireframed, you may elect to remove it. Perhaps it just does not fit with the site's objectives, and that's not a problem and an easy fix at wireframing stage. Seeing features without any creative input will help you concentrate on other equally essential areas of the project and establish any assumptions about how features will be implemented. Later in the project, this will save time; it’s always best to find any problems early on before we take it to Webflow and develop the real website.

‍

Wireframes Are Not...

So now that you know why we use wireframes and what they are, let’s quickly establish what wireframes are not…

A wireframe is not:

• A time to focus on colour, font, copy length (in general) or visibility
• Always right; it’s meant to get a response and start asking questions in a visual format
• The finished, clickable product- there will be lots of things to change
• Only for the web developer- it’s a time for everyone to get involved and express their opinions

‍

Wireframes have a purpose. By having your understanding and input, we can work more effectively and, ultimately, produce a stronger, more appealing website.

‍

Conclusion

So, there you have it, now you know what a website wireframe is!

At Paddle Creative, we’re always happy to help so if you have any questions or just need a quick chat, get in touch.

‍