Wireframes have been around in 3D Modeling and Web Design for ages. It’s basically a bunch of lines that show the outline of what a design should end up looking like.
In 3D modeling, it’s the bones of the model – the structure beneath the structure that tells the computer what shape something will take.
In architecture, the wireframe is your blueprint – the framing of the walls of your building – the inside, x-ray look at what is being constructed.
A wireframe in web design is pretty similar to that – an x-ray of what you want the bones of your page to look like, without all the pretty stuff on top.
It gets to the core of what’s important on the page – the content.
Yes – design is important because it draws people in and directs them on the page where you want them to go.
Poor design will actually repel readers (if you’re bounce rate is high, this might be part of your issue), but great design pulls them in and helps them meander through, absorbing your content.
And content is where it’s at.
Content is the cornerstone of your website or landing page. Content is what gets it done for you.
That’s where a wireframe shines.
A wireframe is a simple, visual layout of the page so you can think about and focus first on the content elements and how best to organize them on your page to engage your visitors and make it easier for them to engage with you (e.g., opt in to your email marketing list or click through to contact you).
Almost all my site designs start with a wireframe, whether it’s a very simple sketch with blocks and boxes in my trusty notepad or something fancier in Photoshop that uses placeholder content.
At this point, you’re probably thinking, “But how on earth does this apply to me?”
So just like you might outline your content to make sure you touch all the bases when you’re telling your story, it can be useful to outline an entire web page as well to see how that content will translate into your website.
Because nobody wants to read one continuous, long page of content.
For example, if you’re setting up a landing page to have people sign up for your awesome upcoming webinar, there’s a lot more than needs to go into that page than just the story of why your webinar will be awesome.
You’re going to want to include things like:
- a compelling headline and subheads
- a clear Call to Action (a big, standout button that helps people sign up)
- some social proof (testimonials about the awesomeness of your awesome webinar)
- and maybe even some sharing opportunities
(A good web designer will help you with all of this, so even if you’re not comfortable tackling it yourself, that’s OK.)
As you’re writing out the content for your web page, think about how and where some of these other key elements might fit into it.
For instance, a testimonial as a pullout quote works great embedded within the your content – it draws the eye and reinforces the value of what you’re offering.
So next time you’re working on content for a web page or even your next blog post, think about trying a quick visual sketch of not just the words by the content elements that you want to include and how they might fit together – like a puzzle – to engage your reader.
