Overview

Because the word “zen” conjures up ideas of simplicity and a sense of calm, I wanted to design a page that fit in with those concepts. The design to my page is fairly representative of how I design most things. While the ethos of the page doesn’t necessarily translate into the text, I believe that my design works. It is easy to navigate and does not overwhelm visitors to the site.

Design Strategies

As soon as we began working on this project, I knew that I wanted to incorporate the green grass and blue sky image as my background. That was a non-negotiable. As a result, I did my best to match the colors of my text to the shade of green in the image. I used the color scheme designer site that we visited in class several weeks ago, and created a header in Photoshop using the pantones from the site.

Spacing and balance are two very key concepts to design. I went through a period of trial and error while adjusting the padding, margins, and container sizes. Eventually I settled on the layout that I have. I used a two column approach to my site because it was easier to create a sense of balance on the page. In addition to that, I don’t enjoy scrolling side to side while using web sites, so I wanted to ensure that mine didn’t require other users to do that.

I chose to remove the borders around the various containers on the site because I felt that they didn’t flow with my design very well. As I previously stated, I wanted to create a site that was open, simple, and very calm. I felt that the lines surrounding the different containers, combined with the green grass image, and the text made the site appear cluttered. Clutter does not equal zen.

In addtion to the header, I also used Photoshop to create the bullet points next to the bulleted links. Initially I planned on leaving the bullets as traditional points, but after talking to several of my classmates who had changed theirs, I decided to follow their lead. The pink flowers provide a little bit of contrast from the green, blue, and black of the rest of my page. The purpose of a bullet point is to draw the viewer’s attention to that item. By changing mine, I added a little pizzazz to my site.

Problems

A major frustration that I face when developing design projects is that I can always envision an elaborate end result, but I never know how to reach it. I struggled a bit with the CSS because I am still not entirely familiar with the coding process. It is a completely new language to me. The formatting is just as important as the text. Missing a set of parenthesis, or a semi-colon can completely change the appearance of the site. In addition to that, making a slight adjustment to a tag or code can completely ruin the site itself.

During my trial and error escapades, I tried to create three columns. I am sure that there is a way to do that, unfortunately my CSS abilities are not at that point yet. In addition to experimenting with the lay out, I would have also liked to create semi-transparent white boxes behind each of the sections of text, but I had a hard time coding them into my CSS. My goal was to create more contrast between the text and the background. I entered them into my CSS the same way I did my header, but they just wouldn’t show up. Eventually I decided to just leave the boxes out.

Credits

To find my background image, I performed a Google image search of “green grass wallpaper”. The one I used came from this wordpress blog. I found the flower image for the bullet points from Stock.Xchng. When I ran into trouble with my coding, I consulted HTML Dog for additional guidance.

Stephanie Gamble
WRT 351
March 18, 2010
Mini-Zen Design Report