Overview

My Mini Zen design is called Brick Buddha. The following Design Report briefly describes my design process and final design.

Design Strategies

Although the sample designs on the CSS Zen Garden are very motivating, I was not inspired by any particular design. Instead, I was challenged. I chose to create my own design from scratch because I didn't want to compare my work too closely to another design or designer's expertise. For me, it was more liberating to begin the assignment with fewer expectations rather than setting a lofty goal without a way to reach it. I think this approach worked very well. At the beginning of this semester I never would have expected to do so well. I am proud of my work and looking forward to future assignments.

The overall theme is based on earth tones and textures. I chose the muted colors as a way to compliment the colors found in the brick image. In terms of texture, I included the Buddha image because of the rounded shapes found within to counteract the square edges of the brick pattern. I wanted this design to be relaxing and interesting at the same time.

The use of lines and spacing are a major part of my design as well. Around the outer edges of the page and between various elements I have allowed space for the brick pattern to show through. Using padding and margins, I positioned the various divs in such a way that at least one row of bricks separates each element. During the design process, I thought of the divs as bricks as well and tried to position them accordingly.

Once I got my bearings with Fireworks, creating the Image replacement for the header was fairly easy. Creating images to replace the h3 headings was not so easy however. I couldn't figure out how to make room for these smaller images within the CSS file even after help from peers and Professor Lowe. Eventually, I decided to forget about image replacements in the h3 headers for the sake of my sanity and other elements within the design. While I want the Papyrus fonts to display on as many browsers as possible, I didn't want to sacrifice other design elements in the process. Instead, I worked on adjusting the color scheme, spacing, and header which will be visible to all users regardless of which browser is installed on their machine.

Working Process

This design is a result of small tweaks and daily revisions. Each day I would begin working on small details here and there on the page. Within an hour or two I would either get tired or frustrated and put the project away until the next day. These breaks in CSS coding allowed me time to realize different ways to approach lingering problems and inspiration for new ideas.

During and between each work session I saved multiple version of my style sheet as a back-up. Each CSS file was saved under a number and a short, descriptive note of what the most recent changes accomplished. This made it a lot easier for me to go back and figure out what I did wrong or right.

Since it was overwhelming to dive into the major aspects of layout, spacing, color, typeface, etc. all at once, I tinkered with certain design principles individually until I was satisfied with each and then moved onto other major elements. My focus moved from larger, more general elements towards more specific, as the following progression details below.

  1. Positioning: I knew I wanted to use a three column layout, but since I had never worked with floats or absolute positioning getting things exactly where and how big I wanted them took a while. Using floats seemed like the best way to go for my beginner skills and patience. At times it was quite frustrating but I eventually overcame these initial stumbles.
  2. Spatial Relations: Once I had the different divs in the desired locations and I began to adjust size and space between each element by using padding and margins. These codes were easy to use as long as I didn't exceed my pages maximum width. During this stage I also incorporated the background image. Using the brick pattern as a guide, I tried to align various elements and leave enough brick showing around the various divs to make the page look clean and well planned.
  3. Custom Bullets: As suggested in class, I created custom bullets for the various lists found on the page. The bullets were created using Macromedia Fireworks. Even though the bullets are small and simple, creating them gave me an opportunity to refresh my Fireworks skills before moving on to the custom header.
  4. Image Replacement in Header: Because I chose to use the Papyrus font I was forced to create a custom header in Fireworks so that all viewers would see the same font regardless of browser and installed fonts. The biggest part of this task was editing the Buddha picture for size and content. The original image was a Polaroid so I cropped it to eliminate the white space surrounding the actual image. Doing so made the image fit within the header better.
  5. Color Scheme: Throughout the process I made changes to the text, background, and border colors but my most drastic changes were made in the later stage. Knowing that the rest of the design was finished gave me more freedom to play around and see more tangible results.

Designer

Sara Marie Ramaker
Writer and Web Designer
Sara@Sara-Ramaker.com
www.Sara-Ramaker.com

Design originally created Winter 2007 for Writing 351: Writing for the Web.

Credits

Brick background image used with the Brick Buddha Mini Zen style sheet courtesy of Free Stock Photography.

Buddha Image courtesy of Squidfingers.

Slight changes were made to both files using Macromedia Fireworks for size and content.