You’ve talked. You’ve sitemapped yourself silly. Now what? Time to build yet? Well, this is five steps to planning a website, so hang in there. The journey will be worth it when you end up with a web site that adds value to your business and brings in more customers and revenue.
Step 3: Wireframe
Once you know what pages will be on the site, the next step is to figure out what’s going to be on those pages. This is where the wireframe comes in, sometimes referred to as “information architecture”. It’s still a paper-and-pencil exercise, but it’s far more detailed and it builds on the previous two steps.
It’s time to take the blank canvas of your site pages and start filling them with content. If the sitemap was like an architect’s drawing, then the wireframe is your interior designer’s floor plan. You may not be ready to choose lighting fixtures and armchairs yet, but you’ll need to know where they’ll go so you know whether that awesome red sofa will fit through the door and be sure it doesn’t block the fireplace.
Make Room For The Navigation
You can’t have a site without navigation so make sure to allocate space for it. Remember that sitemap? The one that outlines each page on the site? There should be room on your wireframe to put links to all of those top level pages. Be sure to consider primary, secondary and even third-level navigation depending on how you’ve structured your site.
Sounds abstract, but you can begin to make sense of the madness if you simply take your blank page and draw a box where those page links should be. Since this exercise is to designate space for each page element, take into account how much you’ll need for each navigation block so you don’t realize long after you’ve spent money on the design that there’s simply nowhere to put them.
If you’ve got three levels of navigation, you may need one on the top, one on the side and one in the footer. This doesn’t need to be fixed in stone. Your designer might decide to put two on the top, none on the side and one in the footer. But if you lay it out on paper first, there won’t be any mistake as to what belongs on the page later.
Make Room For Copy
Once you’ve got space for navigation, be sure to make room for the copy. Each page should have a main content area where you can describe your company, your services, your products, or whatever else is important. You may not have written all the copy yet, but you know it’ll be there so draw yourself a nice big box to hold it.
Remember, this is a fluid process, and you may decide that you need to break up your copy into two shorter pages rather than one long one. But you’re doing the bulk of the foundation work now, so when the furniture does start arriving, you’re not jaw-gapingly shocked to find out that twelve armchairs won’t fit in your 800 square foot condo.
Make Room For Images
Will you be using images on every page? Or just on some pages? Do you need space for permanent images, such as a banner, product shot or featured highlight, or will you be interspersing several photos as-needed throughout the copy? Do you need space for thumbnails, icons, multiple views? All of these things should be drawn into your wireframe.
If you’re working on an ecommerce site, designate space for your largest product image but be sure to include space for each alternate view, color swatch or additional sample image that you’ll need to include. Why wait until the site is designed to realize that you’ve got sixteen enlargeable color swatches for each polo shirt but no place to display them?
Even if you’re an accountant with nothing to sell or show other than your brilliant brain, you’ll still need some imagery on your site to make it interesting. Whether that’s in the form of graphics or photos, you’ll want to consider what they’ll be and where they’ll go.
Make Room For Social Icons
Social icons should not be an afterthought. Don’t design your site and then throw on a Facebook link or an RSS feed. You should consider where to put them so they work within your site’s structure and so that they will be evident to visitors without “busying” up the page.
Especially with so many social sites and so many options available – from toolbars to icons – you’ll want to consider which ones are relevant to your business and how they can work for you. Don’t just start plastering your site with every imaginable icon and toolbar. It will only overwhelm your visitors and make them less likely to follow, fan or favorite you.
Make Room For Highlights And Features
If you want to feature a blog post, a sale of the week, an upcoming event… make sure you’ve got space for it, whether it’s on your home page, or on some or all of your interior pages. Do you want a permanent area that lists all of your services? How about a permanent place to showcase your latest project, newest product or recommended reading? Better figure that in, because the design-now-and-tack-on-later approach only results in a site that is difficult to navigate and fails to draw your visitor in.
If you want a site that works, start drawing some boxes on that paper and making room for all those important details.
Make Room For Interactive Elements, Flash Or Animations
If you want a carousel or rotating image on your home page, allocate space for it now. If you’ve got interactive graphics, photo lightboxes or other moveable parts, make sure you find space for them that doesn’t interfere with the rest of your page. You’ve probably seen sites where hovering your mouse over a navigation link rolls out a long menu that obscures the other thing you were trying to read. If your navigation is going to roll, drop or move, be sure it works for your site – not against it.
Make Room For Video Or Other Media
Much like social icons, videos usually get tacked on “later”. Maybe your site was already designed when you decided to venture into video and now it’s plunked right in the middle of a paragraph in the middle of a page. Video should be part of – not apart from – your site. It should integrate into the design and be placed somewhere that makes sense for visitors. Otherwise it could be distracting at best. At worst, it may be too much visual junk for visitors to process and they’ll leave your site for a better one.
It’s a great idea to include different types of content on your site. What fun would it be if your site was a giant block of text? That’s so 1990. Animations, videos, social feeds and other interactivity give visitors something to see, do and enjoy while they’re visiting, and the more engaged they are the more likely they are to become your loyal customers.
Remember, a big chunk of a person’s buying decision is emotional. If you tap into a visitor’s emotion through your web site, you’re a step ahead of the guy who didn’t. So use the tools at your disposal to create a vibrant, engaging, enjoyable site. But plan it first, so it will work seamlessly and pull visitors in.
Without good planning, you could end up bombarding them with competing messages and never making it clear just what they’re supposed to do.
You’d be surprised at how a few boxes on a page can help you build a great site.
Can you think of anything else that should be included in a wireframe?
