Intro

Designing web pages is different from traditional design because of the ability for the user to ineract with the web site itself. User interface, site navigation and organization, and scalability are key factors that need to be taken into account when designing for the web.

Things to Consider

Whether you're building a commercial site or a personal site, careful planning will make the site more successful. Organize a site map and consider future plans for the site before you start the graphically design and coding of your web site.

• How do you want the site organized?
• How big will your site grow?
• What new content will you want to add that you currently don't have?
• How do you intend on getting visitors to return to your site?
• Will you need to add new sections in the future?
• Where will you put these new sections when you add them?

Navigation & Organization

Organization and navigation of your site should be meaningful and intuitive. Decide which are your major sections and how your content fits into each section. Drawing a flowchart is very helpful. Every page should allow the visitor to get home and to get to other sections of the site easily. Many sites now employ a "footprint" or tracking system that shows the visitor the hierarchy of the site that led him to the page he's currently on. For example, if you go to builder.com, you'll notice that there is a green bar about 1/3rd of the way down the page that shows you what section you're in. If you click on "Basics", that bar will say "CNET: Web Building: Production", and each word is a link to go back to that respective section. Footprints let visitors know where they are at all times and allows them to be able to go back up the hierarchy to any other section.

Navigational links are most often in the left hand column of a page, the footer, or in both areas. hardCoder.com currently only uses the left hand column for its navigational links, but will eventually utilize both areas for links. Each section has a listing, and whatever section you're in (for example, the Graphics or HTML section), has a complete listing of what's available in that particular section. This allows the visitor to have access to any part of the section he/she's currently in and to have access to any other section as well.

Coming Up

Coming soon I'll walk through a web page makeover and show you step by step how to improve a web site.