How to create an (easy) wireframe for your website
If you’re seeking to create an all-new website for your business, one of the first things you’ll need to build is what’s called the wireframe.?
The definition of creating a website wireframe is the process of using different tools—primarily software—to develop a multi-level framework view of how the site will be constructed, including which types of content will live on the various sections and pages.?
That may sound complicated. In fact, we’ve seen lots of ad agencies and web-design firms who actually?make?it complicated.?
Thing is, it needn’t be.?
Thus this article. If you’re trying to create a new (or updated) website for your business, you want to make that new site as powerful and business-building as possible—and you also want to get it up-and-running yesterday.?
Perhaps those agencies and design firms we’d mentioned above are looking to justify their hefty fees. We’ve seen big, sprawling wireframes that look like the org chart from the Department of Defense, with connectors and boxes and dashed lines and finicky labels and all that.?
Yeesh.?
We’d noted “software,” above, and there are certainly apps and platforms out there to help you create the kind of graphical spaghetti mess we just described. If that’s the type of solution you’re seeking, stop reading right here. This article won’t help you.?
Still with us? Glad to have you. Here’s the?real?way to create a quick-and-dirty wireframe for your upcoming website.?
Two camps
First, we need to address some trends in web design that will affect this assignment. Broadly, there are two ways, these days, to build your website, in terms of how it’s structured:?
The latter way of proceeding, it’s been argued, is better for mobile-first audiences, who don’t want to keep opening new windows while they navigate. The traditional way, by contrast, is great for desktop and laptop audiences.
We won’t weigh in on which one we prefer; that’s the topic of a different article. But once you choose the way you’d like your site to be structured, you?still?need to create that wireframe. The only difference between the two modalities is that one wireframe will indicate links for actual pages and sub-pages; the other will indicate “links” for placeholders to scroll to on that one huge page.?
Center stage
The other big consideration, when it comes to website design (and thus your wireframe) is that not all website pages (or sections) are created equal. (For the remainder of this article, we’ll refer to “pages,” for simplicity’s sake, but know that everything we’ll discuss applies to both types of sites.)?
What’s “unequal”? There are two huge things to consider, based on the valid assumption that your visitor is basically in a hurry to find out what they need to learn about your business, and if they’re not satisfied quickly, they’ll click off to one of your competitors.?
So here are the two huge things:?
So you need to treat those two areas with extra-special care. Deeper sub-pages, such as “Company History,” aren’t as urgent.?
领英推荐
Who’s there?
As we’ve said a zillion times in these articles, the primary, A-1 consideration for all your marketing—including your website—is understanding who your target audience is, and what they need. That’s a huge given for this website assignment; for the purposes of this article, we’ll assume that you’ve figured that out nicely.?
From there, it’s pretty straightforward to create your wireframe.?
You know you’ll need a home page. And some sub-pages. You’ll need to determine the order, in importance, of those sub-pages, and which ones cluster together in order to simplify navigation.?
But how do you?build?this? What about all that fancy whiz-bang wireframe software??
Think big, act small
This is so ridiculously easy we’re amazed that more agencies don’t use it. The answer:?Microsoft Word.?All you have to do is create a blank page with a couple of basic bullets on it, such as:?
That’s it. Should take you all of about 15 seconds.?
Then here’s the cool, easy, and downright fun part: Simply start?populating?each of those bullets with sub-bullets. When you do this in Word, simply hit the “Tab” key underneath any given bullet, and Word will automatically indent and format the sub-bullets for you, outline-style.?
So, starting with really easy stuff, let’s add the next layer to the “Home page” bullet. That would go like this:?
You can worry about what populates those sub-bullets later.?
Here’s another. Let’s start populating the “Services” sub-bullets:
?And you just keep on going, adding to it until it’s done. You can always do a “Save as...” and create a v2, v3, whatever you like, in order to preserve earlier versions (and thinking) and build a creative audit trail. You can even start dropping in chunks of copy, such as headlines and teaser intro’s, into this wireframe.?
One more trick: We’ve often helped clients build websites in a phased fashion. That is, there’s some stuff that needs to get published immediately (Phase One), vs. other pages that can be rolled out at a future date (Phase Two). So we’ll use color-coding (again, in Word) to make that clear to the reader?without even reading it.?We’ve set, for example, the most urgent pages in a red font so they stand out. Easy.?
This process is really simple. But don’t let that fool you. It’s hugely powerful. We’ve used it to help clients create all kinds of websites, big and small.?
Need help ideating that new site or the client needs it will address??Contact us.?We’d be delighted to help.?