What is a Website Wireframe?
I've recently heard from some clients that they haven't heard the term 'website wireframe' before. So I thought it's about time I give you the full rundown.
What are website wireframes?
A wireframe is essentially a blueprint for your website: a blueprint that includes the words and the layout for your new web page.
Wireframes don't include a lot of design. You won't find any images and you'll be lucky to find one that uses a lot of colour. They're generally shades of grey.
The reason for this lack of design is simple. As human’s, we’re attracted to things that look good, so it can be easy to get caught up in design details.
But because the purpose of a wireframe is to focus on the content and the layout, it’s important to remove all the distractions of an attractive design. You can argue about the rounded corners of a button with your designer later on.
You'll hear some UX or graphic designers talk about low-fidelity or high-fidelity wireframes. These terms are talking about the level of detail in your wireframes.
I would recommend you go as low-fi as possible when you're starting. Not being too detailed allows you to change the words and layout without taking a lot of time.
Why should you create website wireframes?
As I just alluded to, it comes down to time. When you think of changing the words on a web page or creating a new one, it takes a lot of time and money to get a graphic designer involved. It is much faster and cheaper to create a wireframe yourself.
You're able to iterate the content with your team quickly, and then you can be confident that all the right words will be in the design.
How can you create a website wireframe?
The best tool I have found to create a website wireframe is Freehand by Invision. And what makes it even better is that you can create unlimited Freehands for no cost at all!
You can share them with your team and get feedback inside the app. You don't get any options to tweak the fonts (which is vital for a designer like me), you get a limited colour set, and out-of-the-box it even looks cartoony. So it forces you to focus on the content and layout.
Do you have any website wireframe examples?
A big part of brand messaging is getting that message onto your website. So naturally, I do a lot of wireframes for my clients.
I'll include some wireframes that I have created for me and my clients to give you an idea of how they are supposed to look.
How long does it take to build a website from my wireframe?
In the age of drag-and-drop editors, it shouldn't take very long at all.
If you are building your website using Squarespace or Wix, you could be looking at under an hour (per page) to create the layout and add the words you need. Looking for the right images to pair with your content may take a bit more time, though. For me, it can sometimes be a couple of hours scrolling the stock image websites looking for the one.
Now, if you are using a platform without a drag-and-drop editor, it could be longer. And there's a good chance you already have a web developer that you're working with, so even in the worst case, you are looking at under 3 hours worth of work. So it's not like 30 hours worth of work or anything like that.
Here's the recap.
Wireframes are an excellent way to change your website wording and layout without fully committing to the change.
They allow you to quickly iterate with your team without getting too focused on the design. Instead, you can focus on creating the best content.
And once you are happy with the content and layout, it is all ready for you to hand off to your designer. They can hit the ground running, reducing the number of changes that may arise, which ultimately saves you time and money. And who wouldn't want that?
