Individual CSS 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

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 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.

Sample student designs: The Brain and Sprite.

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
  3. Download, save, and print out the HTML code 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
    1. douglas bowman — design
    2. douglas bowman — coding
    3. mike pick — design
    4. andy budd — design
    5. 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 with at least some of the images and most of the CSS in place
  8. Submit the final draft with a completed theme

Resources