It's all in the planning - Part 2

David Dorn moves you from initial thoughts about your Web site to planning the layout and adding some design features

Last time, we looked at the 'physical' structure of your Web site - the way in which you can plan out its navigation so that the folders you use and the way your readers can get around it easily and quickly.

This time, we're going to consider the look and feel of your pages - the design elements that can keep people coming back for more.

Horseshoe, vertical or horizontal?

The first consideration must be the static furniture - those bits of the page that will be constant throughout your site. If you've managed to get this far in the PPC site by navigating from the front page, and if you've looked at one or two other articles, you'll have noticed that we use a few chunks of 'static' furniture. These are the main navigation array to the top left of the page, the PPC logo (which also serves as a link to the front page or home page) above it and the section title immediately below the advert cluster.

That layout doesn't really change much from page to page - in style, if not in content. Using that consistency of furniture placement means that no matter what page a reader goes to, they'll always be able to find a way to other pages in the site.

The question is, what style do you want to use on your own site? There are three main layout types:

Horizontal - the navigation array stretches across the top (or bottom) of the page

Vertical - the navigation array occupies the left (or right) side of the page

Horseshoe - the navigation array uses the top and one or both sides to 'cradle' the content.

Each has its own advantages and disadvantages - a horizontal navigation layout scrolls off the screen more quickly than either of the other types, unless you use some clever tricks to keep it onscreen at all times, in which case it takes up space that could be used for other purposes.

Vertical navigation narrows the available space for content, but survives a scroll for longer, while a full two sides and a top bar horseshoe can look cramped, especially if the page is designed to a narrow screen resolution, plus, it can be overly crammed with links, and can be confusing.

Take two styles into the Web Site?

So, while it's tempting to use just one style of navigation layout (which determines the page layout to a large degree), it's often better to use two types, or two variations of a horseshoe. It's exactly what we do - if you click a 'section' link to the left of this page, you'll see that we use a full two sides and top horseshoe for our indexes, but drop the right hand side for articles (like this one). The main navigation remains the same, and the top section remains the same, but the right side comes and goes. The level of consistency is maximised without sticking slavishly to a pre-set pattern.

You could also use a horizontal navigation layout for indexes, and change to a side bar for content pages, or vice versa, or add one to the other.

The great thing to bear in mind, though, is that once you've decided which route to go, you should apply it to every section of your site - don't use different navigation styles indiscriminately as you see something you like on another site. It serves only to confuse the surfer if you do.

Labelling

You should also notice, hopefully, that we maintain section labels on every content page in the PPC site - you're currently in the Web Building area, Getting Started section - it says so at the top of the page. Every other article aimed at basic building blocks of Web site authoring will have the same label, while more advanced articles on design will be in the Design section, hints and tips on using various software packages are in the Software section and so forth.

We decided that a text (ish) label and the navigation methods we use would make it very clear how our system works, but you can use colour to do the same sort of thing very effectively.

It's not too difficult to work that out, but it does take a lot of planning. You have to limit the number of areas of your site, because there's only a limited number of colour combinations you can use to denote the different ones. The one thing you should never do is to differentiate the areas by changing fonts. Once you've got a basic set of four of five styles, stick to them throughout the site.

That's probably enough to be going on with for now - your sheets of paper with rough sketches and trial layouts will be piling up - next time, it's time to fire up your HTML authoring package and begin putting your thoughts onto the digital page!

Read Part 1 of this series

Read Part 3 of this series

 

David Dorn