Lay out your site before building

Like the Organize step, the sketching stage seems unnecessary. Why sketch when you can jump straight into construction?

The answer is easy: Sketching shaves hours off your workload.

Designing on the fly is tempting because it offers instant gratification and a sense of accomplishment. But be warned: That sense of accomplishment is false. The cycle of building, previewing and tweaking seems productive because it keeps you busy, but in reality you're wasting tons of time making mini-edits. It's like cutting lumber with a butter knife -- technically it does something, but the task would be a lot faster if you had a gassed-up chainsaw. Think of sketching as your design power tool.

Design elements

Sketching can be accomplished on paper or with a graphics editor. Paper is nice because you already know how to use it, but graphics editors give you a lot of options for moving and manipulating design schemes.

Whichever method you choose, you should build your sketch around four elements: Navigation, content area, logo and footer.

1. Navigation: We'll dive into navigation schemes in a moment, but for now it's important to understand that the navigation scheme is the key design element. Once you decide where your navigation will live, the placement of your content, logo and footer becomes apparent.
   
   
2. Content area: In most designs, the content area takes up the greatest amount of space because it's the focus of the page.
   
   
3. Logo: The logo is a small design element, but it's a vital piece that needs to be included on every page. It provides a constant visual reminder about the user's location.
   
   
4. Footer: Footers reside at the bottom of Web pages and contain copyright text, section links and other relevant information. They act as a secondary form of navigation.

Navigation schemes

There's a difference between navigation content and navigation scheme. Content is determined by your subsections and it varies wildly between sites. Scheme refers to the physical location of your navigation. Most Web sites employ one of three schemes.

Left Nav:
Left nav is the most common scheme. As the name implies, it's marked by a list of links down the left-hand side of the page. Example: New York Times.
Top Nav:
With this method, links are placed horizontally across the top of the page. Example: Amazon.com.
Right Nav:
This is an unconventional technique that places the nav elements on the right side of the screen near the browser's scroll bar. You don't run into this scheme all that often, but that doesn't mean it's worthless. In fact, some people believe it's more usable because it requires shorter mouse movements. Example: Not only does Audi.com use this method, but their design firm explains why.

Each of these schemes can be used effectively, so don't worry about choosing the wrong one. In fact, you should sketch designs based off of all three types so you can see which is most appealing.

Once you've arranged the four elements in a layout you're happy with, you're done with the sketching process. The drawing or file you've created will serve as the model for every page on your Web site.

Related links

Name	Type	Notes
Mocking up your site	Tutorial	This Builder.com tutorial is aimed at commercial sites, but independent publishers will find useful basic information.
Styles of Navigation	Article	An overview of navigation schemes from eFuse.
When Bad Design Elements Become the Standard	Column	Jakob Nielsen deconstructs different navigation schemes.
Got a recommendation? Send it to: editor@theindependentpublisher.com.