project 3 (optional): css zen garden

  • Nov 24: Project 3 handed out
  • Nov 24: know your theme
  • Dec 1: detailed pencil sketch with annotations due
  • Dec 8: Rough draft due by start of class
  • Dec 17: Final Draft due by 11:00pm for Chack–email link to Dr. Wolff
  • Dec 19: Final Draft due by 11:00pm for Jen F.–include link to site in LR work samples

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 look closely at CSS, its design possibilities, and consider how you might be able to use it more fully in the future.

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 statements but not the selectors (nor can you add new selectors). 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, postage, and What Lies Beneath. 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.

Four sample former student designs are The Brain, Sprite, 50s Diner, and The Way Zen Works.

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 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
  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 a new folder inside your public.www folder called “csszengarden”. All files (including the stylesheet and images) related to the to this project are to be stored in this folder.
  8. Create a new html page called “csszengarden.html” and a new stylesheet called “csszengardenstyle.css” and save them in the “csszengarden” folder. Copy the CSS Zen Garden HTML code into your new “csszengarden.html”file, save it, and do not touch it again. The HTML cannot be manipulated. All work is to be done using the CSS code.
  9. Create rough draft of your page and link to it from your professional page.
  10. Complete the final draft as far as you are able to take it.

suggested resources

Please use these resources as you see fit

Leave a Reply

Your email address will not be published. Required fields are marked *