Mini Zen Garden, Winter 2007

WRT 351: Writing for the World Wide Web

A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden

Subway System was inspired by my fascination with big cities. Although I've never gotten the chance to ride the subway, I thought it would be a great city-type theme. This design report will explore my design strategies and the process of working on the design. This Mini Zen Garden project was created for WRT 351 at Grand Valley State University during the Winter 2007 semester.

Design Strategies

When I decided to create a city theme, I started out using a skyline image of New York City, but I just couldn't get inspired by it. When I saw an image of a subway sign, I knew how I could use the subway as a design. I used the image to replace all of the content in the header div to make the wording appear exactly as it would on a subway sign.

As I continued to design, I found a map of the subway system, modified the coloring, added a border, and tiled it as my background. At first, this image did not tile as well as some images, so adding a border helped.

The border is functional in two ways:

1. It separates the image, so that the viewer does not wonder why the map does not match up
2. The border looks like the gridlines seen on most maps

Using the design principle of repetition, images taken out of the heading were used as bullets.

• The white arrow was repeated as the bullet for the Requirements section
• One small blue circle was repeated as the bullet for the Sidebar content

Side-Note: It was important to use a smaller image for the Sidebar bullet, because this area of content is in a lower hierarchy and is sized appropriately. The font size of the Description, Sidebar and Footer content is 12pt., while the Requirements section is sized at a 14pt. font because of its greater importance.

Repetition in color was also used to pull together my design.

• Green found in the map was made into the background image border
• The same green repeated in borders between content areas and as hyperlinks
• White was chosen for the primary text color to match the header (throwing in a third color for text would make things too busy)

The overall layout of the page is a fixed width centered on the page. I chose this layout because it is aesthetically pleasing to me. Since I centered the title in my header image, I chose to make the description stretch across the width of the container. I chose to put the main content along the left hand side of the area below the title and description.

To balance the page, I chose to float the Sidebar and Footer to the right-hand side of the Requirements. While footers usually end up along the bottom of the page, it left a blank space below the sidebar.

I chose to add an image between the Sidebar and the Footer to break up the large amount of text appearing below the fold of the page. It is also a subway map (slightly different because it says "You are here") which adds cohesiveness between the background and this element of the page.

More...

Continue on to read Working on the Design and Credits where I discuss the process of building the design and giving acknowledgement to my image sources and inspiration.

This HTML document is available under a Creative Commons Attribution-NonCommercial 2.5 license. CSS style sheets and all graphics and images used are copyright 2007 by each individual author and do not carry the CC license unless otherwise indicated.

Thanks to David Shea for CSS Zen Garden and The Zen of CSS Design, as well as Steve Krause for suggesting this class project.