Planning your site structure is equally as important as the design and layout. Before you ever open your HTML editor you should lay your site out on paper and organize your pages in a easy to navigate structure. An excellent, very detailed article on web site planning is Web Monkey's Information Architecture Tutorial. (Read between the lines, I want you to read this article!) :)
First determine the content and goal of the site. What will the site be about, what is the most important idea that site should convey. Write these items down, organizing and planning will be much easier if you have a list.
Once
you have determined the content of the site you need to decide the web
pages in the site, their actual filenames, titles and a rough idea of
the content of those pages. Creating a flow chart using a large piece
of butcher paper and yellow post-it notes is a great way to chart your
site since you can move the yellow stickies around the page to suit your
needs. I have included a sample image to the left so you can see what
I mean. (Click the image to the left to see a larger version).
When building this chart, keep in mind that it will be used for your navigational
structure and menus.
If you prefer to create
a flow chart of your site on the computer, you can use Visio, Inspiration,
the organizational chart feature in MS Office, Dreamweaver's Site View
or FrontPage's Navigational View. I personally use Dreamweaver or FrontPage
for charting my sites. Click the images below to see screen captures of
navigation flow charts created in Inspiration and FrontPage.
 |
 |
 |
 |
| Inspiration | FrontPage (Entire Site) | FrontPage (Home Page and some child level pages) | FrontPage (Job Search section only) |
There are four basic structure models: Sequence, Grid, Hierarchy, and Web. For visual samples and complete descriptions, visit Yales Style Manual.
Most sites tend to use a Hierarchical structure or combine two or more styles. The Hierarchical structure starts with your main idea and then branches down to sub-ideas (or pages) the above charts are Hierarchical.
 |
Once you
have the structure of the site decided you should determine folders
that will be needed. Main ideas, themes, etc. should be grouped
into their own folder. For example, my classroom web site has a
webdes folder, software folder, jobsearch folder, etc. Pages relating
to each section of the site are placed in the appropriate folder.
Images are stored in their own folder. As an example, the picture
to the left is a screen capture of the folder structure for my classes
web site. |
If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.
Stop by my Amazon Store for gifts for the web developer.
Visit Robin's Blog for more web design and development resources.
©Copyright 2001-2006 - Robin Wood - Send Questions or comments to robin at tinkertech dot net.
Last Updated:
December 19, 2006