Web Workshop: Planning Your Website


CFH Web WorkshopCarefully planning your website will save you time and help you make a much better site. We have compiled a plan to help you map out your website. Keep in mind, this is not the only way to build a website, but rather a boost for your thinking process so you can get to work. To start, think about the following points:

  1. Consider your motivation and your audience: Why are you creating your site and who will be visiting it?

  2. Navigation: What is the strategy for navigating through your site?

  3. Structure: What is the shape of your site? Is it meant to be linear or do you want to encourage roaming?

  4. Design plan: What will the overall look be? Will the whole site share a look, or will parts have their own designs?

The Jones's Vacation & Pooch Palace

To show family pictures of vacation with some explanations and funny stories.To sell fashion clothing for dogs, provide information on dogs and dog content.
NavigationText links in top, bottom and sides to represent compass points that point to each vacation spot. Arrows will guide them through slide shows on each page.Doggie accessories will be used as icons to point to each section of the site such as products, the Dog Dish, and Collar me Crazy. Links to every section will be available on every page.
StructureThere will be one welcome page with the direction links pointing to second level pages only. The site will go no deeper than that though may expand in the future.Main page will link to second level sections that will in turn link to topic specific pages. Third level pages are the deepest the site will go.
Design:Design will be simple with different background colors for each vacation spot to set them apart, light on graphics as site is picture oriented.Overall site will have similar look and feel sharing header styles, icons, colors. Content sections may differ slightly in organization.

You can see that these two sites were created for different reasons and, therefore, need to be planned differently. Read on to see why these decisions should be made in the planning stages.

Initial Planning

Unlike catalogues and albums, a website is not linear. This means that instead of flipping back and forth, you can access any page at any time. This can work for and against you.

The Jones' Picture site aims to show some pictures in an order they can control. This is why they decided to offer initial links to the vacation spots, but they control the way their pictures are viewed by only offering links in two directions: back and forth.

The Pooch Palace, on the other hand, has a different motivation. The creators want people to come into their store, browse, find useful information, and decide to come back. Their strategy is to make every section available at any time. This way, they are assured that in case a member of their audience remembers a glittery collar and wants it, she or he will know how to find it instead of giving up and leaving the site.

How could making all your pages available be detrimental? Without a carefully thought-out navigation system, your viewer could end up lost in your site, get confused and decide to leave. This is why you should make everything available within only a couple clicks of the mouse.

Keep in mind that not everyone accesses the Web like you do. Find out how to make your site more accessible to people with disablilities in Making Your Website Accessible by Liora Alschuler.


It may sound trite to think about cute little images or themes for your navigation, but good design and memorable images can really add to the success of your site.

The dog store is fairly obvious. It sells clothing and accessories and provides information. Creating icons that represent these points helps your viewers navigate the site.

Visuals play an important role in our memory. If visitors feel comfortable in your site and each page has some familiarity, they are likely to stick around and return.

For the slide show, it is more a matter of guiding the viewer through the site than it is offering him or her free roam. Keep in mind that just because pictures look pretty and help people remember what they're looking at doesn't mean you should stick them all over the place. Not only will it bog down your site, but it may degrade your content.

Use your images wisely and make sure they really serve a purpose, even if it is a decorative one.

For a more in-depth look at navigation, read Jacob Nielsen's article on How to Structure Your Website.

Give Your Site Shape

Next to navigation, the structure of your site is the most important decision. Try talking to someone about your goal, (or talk out loud to yourself if no one is there to listen).

Draw a picture of what you think the site should look like. Begin with your main page. Do you want a decorative welcome page that does nothing but say hello to your visitors and let them know they've arrived, or do you want to lay everything out at once?

It is up to you, though keep in mind that many people prefer less clicking. Now divide your site up into categories.

Picture your site as a tree. The main page is put into the root directory, so that's easy to remember. If you don't really have a lot of content, then your pages will all be the first branches that come out of the tree.

In the Pooch Palace, each branch has a lot of branches sticking out of it. You can get from one branch to another at any point, but you can't get from little branch to little branch without going through one of the large ones. This way you don't have tons of links everywhere, but rather an organized system that will make sense to you and your viewers.

Why Structure is Important

Organizing your site will not only help your viewers keep track of where they are, but it will help you keep track of your files and create rules for keeping your site tidy. A messy website can be hard to figure out, and if you go back to fix something after quite some time, it could be really confusing.

After you find a good structure, name your sections and decide what should go in them. You don't have to worry at this point what each page in the section will be, just establish the basic content to help you create your navigation. Think about what sort of images, icons or multimedia files you think you might want to use. These files will need a directory as well to keep them together and make them easier to find and access.

Design Considerations

Now that you have a basic shape to your site, think about the look you hope to achieve. This doesn't have to be specific, but think about whether the site will have the same overall look or if each section will have it's own identity. If you are sharing the design throughout your site, now is a good time to know. You may want to create headers for each page that are the same size, font and color.

It is much easier to do this at once before the pages are created. That way you can power through the creation of your pages, simply inserting the appropriate images and content. Of course, it is not the end of the world if you feel like making a change, it is just easier to start out with a plan.

Home HTML Menu Extra Information HTML Hub