If I mention the word “website wireframe” to a customer, they’re likely to stare blankly at me.
Why?
Because most business owners developing a new website have never heard the term and don’t know what it means.
This can cause confusion, especially when they have a different picture in their mind about what a wireframe is.
Before you ask, no, it’s not a model of your website made with wire (that could get very messy).
Nor is it a frame that sits nicely around your fancy new online presence (what would the designers say?!).
While a wireframe is not these things, it is many others. An incredibly valuable tool, no website project would fulfil its true potential in terms of look, feel, design and functionality without passing through the wireframe process.
Curious?
Great! Let’s see how things shape up with a website wireframe.
With a wireframe, you get the picture
It was the movie master himself, Martin Scorsese who said “Cinema is a matter of what’s in the frame and what’s out”.
Cheers to that!
The very same thing can be said when developing a website from first principles using a wireframe.
In layman’s language, it is a framework for the design, content and functionality of any page on your business website.
It helps to clarify:
- Which important content to include
- The order in which visual and written content should appear on a page from top to bottom
- Placement of content on the page, considering right, left, centred or background
- How design can enhance communication of your key messages
- Headlines and subheadlines
- Ideal placement for calls to action
- A logical page flow that enhances the user experience (yes, this is super important)
- What might help compel a visitor to click through to other pages on your fabulous site.
Yes, a wireframe does all this, and more.
These are all important ticks, but for me, by far and away the most valuable contribution a wireframe makes to the website development project is: it paints a picture.
Why is this a big deal?
Because most business owners developing their business website don’t do website projects for a living. This means they’re not familiar with how it all comes together. If I start going all techie website developer on them, things go south very quickly.
It will be the deeply confused blank stare all the way to launch day. Not good.
The benefit of a wireframe is that together, we can mock up what a page will look like before any design work happens. This is ideal because the client gets a picture in their mind. No more blank stares. It also helps them to understand the kind of visual and written content they’ll need to fill in the frame.
And bingo! We’re on track.
How do you build a wireframe?
While web developers will use software to mock up a wireframe, there are some very accessible options anybody can take advantage of during the development process.
Here’s the list:
- Paper and pencil.
- Whiteboard and pen.
Yup! These time tested tools are just as effective as any design software. In fact, they are perfect for any business owner who wants to have a crack at getting their design ideas out of their head and down on paper.
A wireframe is a fantastic communication tool because it gives your web designer something to work with. It helps convey what’s important to you about your site’s design and functionality. This makes it a solid reference point you can both go back to through the design and development process. In the world of web development, having a wireframe bridges the communication divide between your expectations and the designer’s assumptions. Confusion and disappointment be gone!
It makes a wireframe a little bit of web design gold.
A wireframe helps shape up content
I’ve previously mentioned content can be a website project progress blocker. *Sigh*
I know, your enthusiasm levels right up there. You’ve found your web developer, get excited that you finally made the call and have your web project rolling, and then reality strikes.
You need content. *Another sigh*
Well, with a wireframe, you can breathe a little easier. Here’s why. When you sketch out a web page, the content you need becomes clearer. What a relief.
Instead of thinking OMG! What do I write?, you can high five yourself and say I’m rockin’ this, Jon.
A wireframe helps with content because it breaks a page up into blocks. This means you gain a sense of the amount of content you need, as well as the type that’s required.
Just for kicks, let’s look at a homepage wireframe:
- At the top of the page, you could have the page header and a series of hero images, you know, the big pictures that make people feel good. Each of those images could have one of your business’
- key messages. In this instance we have a headline that summarises the product and a big fat play button to view a promotional video.
- We then move into intro content that contains all the nice keywords the website wants to get found for (really important for SEO). We’re not talking pages here, people, just two or three sentences.
- The next inclusion is features and benefits which visually summarise the product
- As we flow down the page we want to highlight other internal sections within the website
- There is a blog summary feed which is constantly updated adding lots of great new content to the website
- Social proof of other happy guests
- A location map showing the physical location of the business
- Email opt-in
- Footer elements & call to actions
Boom! Home page done.
Here is what the finished product looks like:
Okay, it will take a little longer than that, but you get the idea. And you can see how a wireframe sketch can be done by anyone using the tools we’ve come to trust and love – pen and paper and whiteboard and pen.
Thinking about updating your website? Then start with a wireframe. You’ll be one step closer to a great looking, high performing website you love.
