Don’t Build a Website Out of Thin Air – Use Wireframes

You’ve got big plans for your new website! In your mind’s eye you can already see it in living color, ready to connect you to the world.

But between the site of your dreams and the actual pixels lighting up the planet with your message you suddenly realize there’s a huge gap. Somewhere, somehow, you need a plan on which to hang all those beautiful pixels.

Enter the Wireframe.

A wireframe is like the rebar that provides the strength for the walls of a building. Or, if you like, it’s all those 2x4s that go up first that hold the drywall in place. It’s the structure of your website. And it’s the first thing (after you know how your site fits into your overall business plan) you’ll need to consider once you’re ready to begin your website build.

Wireframes, like the rebar and the 2x4s, aren’t the most exciting things to look at. The best ones are black and white line sketches. They show what the elements are that will go on the web page, and where they show up. That’s it. If you start messing with colors, backgrounds, images and fonts at this stage, you’re trying to hang wallpaper before you’ve put the wall up.

Take the sample wireframe below:

Profilewireframe

 

 

 

 

 

 

 

 

 

 

 
(credit: [Profilewireframe](by http://www.flickr.com/people/doos/ – http://www.flickr.com/photos/doos/3931846833/). Licensed under CC BY 2.0 via [Wikimedia Commons](http://commons.wikimedia.org/wiki/File:Profilewireframe.png#mediaviewer/File:Profilewireframe.png))

Notice how the image is just a box with an X in it that shows that an image (eventually, it’ll be someone’s picture) goes to the left of a block of text that shows someone’s profile name, address, etc. The wireframe demonstrates how those vital statistics stay left-aligned to the right of the image, even when they extend below the bottom of the image, and they leave room for another, smaller right-aligned block of text on the top right. The main text is full width below the vital statistics-top section. The bottom of the page will have three sections: left, a media player; center, a section for four small images; and right, a list of links to downloadable files.

As you can see, this simple, plane-jane wireframe packs a lot of information, all of which is essential for the person who will turn this page into code.

Every page type on your site will need it’s own wireframe. Your home page, your blog page, your contact page, your gallery page, all of them. And if your site is mobile-friendly, you’ll need wireframes for each of these pages as it should look on those smaller screens, too.

You Can Do It. We Can Help.

There are lots of online tools that will help you draw your wireframes, and they run the range from super-simple to rocket-science advanced. Just google “Web page wireframe” and all the best ones will come to the top.

But when you’re doing a custom site design, nothing beats having an experienced designer working through your wireframes with you. A good designer will be able to help you think through proven wireframe layouts and steer you clear of common pitfalls. A good designer will also be able to help you place page componants to maximize your site’s impact based on what you want your visitors to do when they interact with your page.

At Digital Canvas, we aim for maximum effectiveness at every stage of your site’s design and build. We’d love to explore your project with you. Feel free to reach out to us for help on your next web site design.