Web Development Rhetoric RHE 309K • Fall 2008

CSS Zen Garden Design

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.

How the Zen Garden Works

The CSS Zen Garden is a single HTML file which poses a challenge for the designer. The goal is to create a visually stunning page without altering the HTML of the file. You may alter the CSS as much as you like. You may use as many background images as you like, provided that they are added using CSS. You must not change the HTML of the file. Keep the tags and the text in the HTML file exactly as they are when you download it. There's really no point altering the HTML — I'll be using my own unaltered copy of the HTML file anyway, so any changes you might make simply won't be there later.

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 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 visual design; the text is just there to fill up some space.

Some of the designs are very advanced. Most of them were created by designers with years of experience. You, on the other hand, are just starting out. Make your design look as good as you can, but relax — I'm not going to hold you to the same standard of design as you see in the Zen Garden archives.

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. Create your own theme idea
  3. Download, save, and print out the HTML and CSS code and familiarize yourself with the HTML tags
  4. Read carefully the following short blog-entry discussions of these designers' design experiences with CSS Zen garden
    1. douglas bowman — design
    2. douglas bowman — coding
    3. andy budd — design
    4. 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. Submit the final draft with a completed theme

File Management

In your folder, create a folder called "zen". Put all your Zen Garden files in that folder.

Submit your Work Sample

When you file your work sample, you need to submit the URL of the CSS file.

We will be viewing the finished Zen Gardens in class.

Resources