How to create an (easy) wireframe for your website
Great photo by pic jumbo.com

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:?

  • There’s the traditional way, with a home page up front, which links to lots of other sub-pages.?
  • The newer camp parks their entire website effectively on one huge page; the “links” just get the viewer to instantly scroll to different portions.?

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:?

  1. Your?home?page is the most valuable real-estate on your site. You’ve got to entice that visitor when they’re there.??
  2. The “above the fold” portion of that home page—that is, what the visitor can see without needing to scroll down—is the absolute Park Avenue of your website’s real estate.?

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:?

  • Home page?
  • Services
  • Recent Posts
  • About Us
  • Contact?

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:?

  • Above-the-fold info?
  • Below-the-fold info?

You can worry about what populates those sub-bullets later.?

Here’s another. Let’s start populating the “Services” sub-bullets:

  • For [Industry A] targets
  • For [Industry B] targets

?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.?

要查看或添加评论,请登录

Ken Copel的更多文章

  • Where do you draw the line, literally, with creative direction?

    Where do you draw the line, literally, with creative direction?

    We recently worked on a book project, wherein we worked closely with the author (to be specific, we ghost-copy-edited…

    2 条评论
  • Is your business branding missing out on a blend word?

    Is your business branding missing out on a blend word?

    “Blend word”?? What the heck is that? More importantly, how can you make money off of one of these things? Let’s dive…

    2 条评论
  • What are website "pilot pages"? And why should you use them?

    What are website "pilot pages"? And why should you use them?

    We know a talented web designer who told us that websites age in dog years. That may well be true of the technology.

  • Trade-show prep made easy

    Trade-show prep made easy

    We don’t know a company in the world that enjoys the prospect of exhibiting at a trade show. It’s often the epitome of…

    2 条评论
  • How to keep your business videos on the rails—and on budget

    How to keep your business videos on the rails—and on budget

    We can’t count how many corporate videos we write here at Copel Communications. That’s because video is simply a killer…

  • The most stress-reducing marketing tip you'll read this week

    The most stress-reducing marketing tip you'll read this week

    Special news! Sure, we’ve got a good blog article here, and we’ll get to it in just a second. But first, a little…

    2 条评论
  • Our top posts for creatives from 2024

    Our top posts for creatives from 2024

    Zoom! And another year goes screaming past. Are we really ready for our year-end round-up of best-practice articles…

  • Our top posts for consultants from 2024

    Our top posts for consultants from 2024

    Boy do the months ever sail past. Time, already, for our annual round-up of our top posts for consultants from 2024.

    2 条评论
  • What we're thankful for: 2024 Edition

    What we're thankful for: 2024 Edition

    Thanksgiving is a tradition. Writing an article about what to give thanks for? Well, we’ve been doing it for so long…

  • The easiest marketing videos you'll ever make

    The easiest marketing videos you'll ever make

    Every hear of a “paper edit”? Probably not. Let’s dive, quickly, into the topic you tuned in for: Making the easiest…

社区洞察

其他会员也浏览了