Black and white photo of park bench and large boulder
Introduction to Web Development
Instructor: Bill Wolff
Fall 2005

• home
• syllabus
• schedule
• assignments
• readings

Project 3 Overview

important dates

• November 22: project 3 handed out
• November 29: know your theme
• November 29: detailed pencil sketch with annotations due
• December 9: Rough draft of page due online; present to class; last day of class
• December 13: Final Draft due by class time

the assignment

In this assignment we are going to be working with the CSS Zen Garden, a site where graphic designers have an opportunity to create beautiful pages and experiment with the possibilities offered to designers by CSS. Many of the sites on the page are intricate and far beyond anything expected of the class in the short space of time we have. The goals of this assignment are to play: to play with your ideas, imaginations, and style sheets. I do not expect that all of your ideas will come to fruition - and I don't even expect that your designs will be completely finished by the end of the semester. What I do expect is for you to work with your partners to look closely at CSS, its design possibilities, and consider how you might be able to use it more fully in the future.

We going to be working in small groups of two and three, which I hope will maximize each group member's time with both CSS and visual design. I also hope group members are able to teach each other things about CSS and design, because as we have seen, much of CSS design is about sharing ideas with others. Hopefully, we'll have a bit of that in this project, too.

how the zen garden works

CSS Zen Garden is a place where designers manipulate a style sheet to create visually stunning pages based on the same exact HTML code. In other words, when designing for the Zen Garden, you can change the style sheet in however many ways you'd like, but you cannot change the HTML page at all. That means keeping the tags and text exactly as they are when you download it to your own computer.

You will also be making new images, as those most certainly change from one design to the next. Those images should be consistent with some sort of theme that you and your partners decide on. As you browse the Zen Garden collection of designs, you'll notice that many themes have been covered (some more than once) - but there are also surprising nuggets in themes you'd never expect, like cereal and postage. You'll notice that the text is all the same; the focus is on new design; the text is just there to fill up some space.

our zen garden design process

We are going to move through a strict process so we are all moving along at a similar pace:

1. Browse through the current designs to get an idea of what people have been doing
2. Choose your own theme
3. Download, save, and print out the HTML code (text version) and CSS code and familiarize yourself with the tags
4. Read carefully the following short blog-entry discussions of these designers' design experiences with CSS Zen garden
• douglas bowman — design
• douglas bowman — coding
• mike pick — design
• andy budd — design
• bobby van der sluis — design & coding
5. Create a detailed pencil sketch of your Zen Garden page, complete with descriptions of the tags associated with different elements
6. Create the images and determine the layout
7. Create rough draft of the page online
8. Submit the final draft as far as you are able to go

suggested resources

Please these resources as you see fit

• visual representation of css zen garden xhtml (click on image to enlarge)
• CSS Zen Garden — Resource Guide
• CSS Zen Garden — FAQ
• i stock photo ($1.50 fee per photo download)
• stock.xchng (free photo downloads)
• fonts.com (fonts can be purchased for various fees)
• font foundry (free fonts, but donation suggested so they can stay online)
• 1001 free fonts (fonts can be downloaded for free)
• Typographica ("a journal of typography featuring news, observations, and open commentary on fonts and typographic design.")
• Color Schemes from Adam Poselli ("Design inspiration can come from anywhere, anything, and at anytime.")
• Color Schemes by David Shea ("A designer’s ‘style’ is made up of a number of different factors, though colour plays a large role.")

the groups

Group numbers (will) link to the group's Web page.

copyright 2003 by bill wolff . validates . css2 . xhtml . 508 . WAI 1,2,3