Case Study in Wed Design (1: Plan the site)

The first step in making a website is to develop a plan.  That's what we'll do here, looking at what we want to accomplish, what our constraints are, and so on.

Disclaimer:  I'm no pro!  I also have the advantage that most hobbyist coders have: I don't have to work for anyone under a contract.  If you are reading this and want to be a freelance web designer, realize that it becomes much more complicated when you are hired by a client to make their site.  This cartoon should serve as a warning....  If, however, you want to experiment and try to make your own site or want to help someone make a site, this case study shouldn't teach you too many bad habits.  :-)

Our Goals

Let's begin by looking at what we want to accomplish.  We're designing a site to promote a volunteer group's trail system that they maintain.  Because they have zero web presence at this time, almost anything we produce will be an improvement, even a simple site that merely has some static info on it.  On the other hand, I can think of some really cool things that we could try to include for supporting portable devices that would enhance the experience of using the trails.  Users could mark events or wildlife sightings on a shared map, we could utilize geolocation, and so on.  But, let's keep this simple and more traditional.

Here are some goals we can consider:

1. The site should be relatively simple but with a consistent theme.
2. The site should have a clear navigation scheme--not something "cutting edge"
3. The site should have a web address that makes sense for the site.
4. The site should work reasonable well on older browsers.

Here are some things we can consider including on the site:

1. An attractive home page that gets the user's attention
2. A gallery of photos that were taken on the trail system
3. Information about the trail system during the 4 seasons
4. Information about the EATS group itself
5. A page that gives info on upcoming events
6. A contact page
7. Clear directions on how to find the trails
8. An interactive trail map--almost a "virtual tour"
9. Historical information about the trails
10. Information on the "Woodland Waddle" horseshoe event.

There are several things here that make this much easier than a typical commercial site you could be hired to design.  Most of this can be done with HTML and CSS.  Unless we include a guestbook or a system for receiving donations, we can probably do without using much PHP or a database.  Maybe some JavaScript for the gallery, but for the most part this is a simple site to create.  We can think of things we can add almost like modules, but the base site is just HTML and CSS.

So let's get started!  The first thing to keep in mind is the "separation of powers" between the languages we'll be using:

The Three Layers of the Web

1. HTML for content.
2. CSS for style.
3. JavaScript for behavior.

For a small site, it is very feasible to make the main page first and then alter copies of that page for the other parts of the site.

The first big decision we have to make is deciding on WHAT the main page is about.  Is this site primarily for the EATS group, or for the Scotch Creek Woodland Preserve?  I'm going to go with the Preserve itself as the focus, but we can change that later, if necessary.

Here's a preliminary sketch of the site arrangement:

Main Page: Scotch Creek Woodland Preserve

  |

  |--Events

  |--Four Seasons on the Trails

  |--Gallery

  |--Interactive Map

  |--The EATS Group

  |--Get Involved!

  

Since the amount of actual content is relatively small for this site, I think the history of the trails and the information on where they are should go right on the front page, along with an attractive picture.  So the front page serves a few purposes:

1. Show a nice image to grab attention
2. Explain what the trails are, and how they came to be
3. Show where the trails are located
4. Contain a menu or navigation area to link to the other pages on the site

With that in mind, we can start sketching up ideas for the main page.  And that, is the subject of part two!