header thumbnail image

What is a Wireframe? Why are they important?

May 28, 2019 - Stephan Salt

A website wireframe is also known as a page schematic or screen blueprint. It is a visual guide that represents the skeletal framework of a website.

Wireframing 101, is a way to design a website at the structural level making the process quicker and easier. From here we move on to the design stage.

The wireframe lays out the content mapped by the UX designer along with the client. It takes into account the users’ needs and journeys before any design work.

What is Wireframing?

The wireframe demonstrates to the client as well as the design team what sort of interface elements to design.

I would say it’s a critical part of the process as this allows for any concerns to be addressed as early as possible. This also extends to elements that are beyond the client’s budget or expeditions of their users.

Wireframe Example
Overall, the aim of a wireframe is to provide a visual understanding of a page for stakeholder and project team approval before the creative phase gets underway. Wireframes can also help create global and secondary navigation. They also ensure the terminology and structure used for the site meet user expectations and user journeys.

A user journey is a path a user may take to reach their goal when using a particular website. User journeys in website design are integral. They identify the different ways to enable the user to achieve their goal as quickly and easily as possible.

Are wireframes easy to adapt?

A wireframe is much easier to adapt than a concept design.

It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format. From draft to the final version, it will provide the client and the design team confidence that the page is catering to user needs whilst fulfilling the key business and project objectives.

When does wireframing happen?

Wireframing takes place early in the project lifecycle.

Often used to complete the User Centred Design process, wireframes are also used at the beginning of the design phase. A prototype usability test will often be a test of the wireframe pages to provide user feedback prior to the creative process.

Wireframe on mobile device
Wireframes can be hand drawn, but are often put together using software like Microsoft’s Visio. However, if the wireframes are going to be used for a prototype then I would use UXPIN. Other programs that will allow you to prototype wireframes include Sketch, Balsamic and Axure.

To clarify, user-centred design is a process or set of tools used to design a service which focuses on what users need. This spans from the very beginning of the project and continues throughout development until launch. Site design usually takes technical and business perspectives. While considerations for users come about later. User-centred design ensures the service focuses on what users need before anyone. In this way, wireframing is something that is at the heart of user-centred design.

What are the advantages of Wireframing?

One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism for prototype usability tests. Once approved by the client and the users they provide confidence to the designer.

Various elements on mobile wireframe
From a practical perspective, the wireframes ensure the page content and functionality correlate with user and business needs. And as the project moves forward they can be used as a good dialogue between members of the project team to agree on the project vision and scope.

What are the disadvantages of Wireframing

As the wireframes don’t include any design or account for technical implications, it is not always easy for the client to grasp the concept. The designer will have to translate the wireframes into a design. Communication to support the wireframe is often needed to explain why page elements are positioned as they are. Also, when content is added, it might initially be too much to fit within the wireframe layout, so the designer and copywriter will need to work closely to make everything fit.

What We Do at Fifteen

So here at Fifteen, we aim to make the user journey seamless for your clients. Where it is necessary we would advise we start working with wireframes to gain a larger understanding of what, why and how messaging will work. This will allow us to quickly repair any holes and align messaging before any design work. This will make the process a million times quicker and help us make the right choices.

Digital Wireframe
Yes, it could be strange for you to try and not think of the end goal. However, breaking the project down into smaller goals aids us and you build momentum. If you have a mapped out process and something that is going to work for all types of users, you know what content is going where (which includes text and images), you’ll see the benefits of having an early wireframe and don’t need to worry too much on the finished article as the hard work has already been created with simple boxes and Lorem Ipsum.

My opinion is that for larger types of websites and applications having wireframes are key. Some sites need several wireframes with the first few frames aiding other builds.

If you have a one-page site a shorter sketch will be enough. This would include brochure sites and sometimes even printed material. All in all, wireframes are useful mainly in web-based applications such as websites and web apps as well as mobile applications and even portal systems.

There hasn’t been a time where I haven’t used a good old fashioned paper and pen (not pencil as I like to make mistakes) and have sketched out concepts before starting on the computer.

Designer using a wireframe
This allows me to analyse what I have done. I can then ask myself: why I have done it? Is it worthy enough for me to charge onto the computer to start a wireframe that client will be happy with that meets all the needs of the users? Plus is it right for the brand?

So to conclude my theory on wireframes; wireframes should be used early in a project to get user and client approval on the layout of key pages and the navigation.

This will provide the project team, specifically the designers, confidence in moving forward. Wireframes will also save considerable time and money in the testing and amends phase later in the project allowing for seamless construction of the core design of the application in question moving into development and then deployment.

If you wish to talk to us more on wireframe or even the planning of having your own website wireframed, designed and built please do enquire today. Alternatively, call us as we would be more than happy to give you guidance and hopefully start a great future together.

Back to Blog

Let's start something special

Get in touch with Fifteen today to start your project.

Get In Touch
Footer Call to Action