A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
The purpose of this project is to demonstrate what you have learned about the effective use of CSS and other web design techniques during the first half of this course. Just as with the CSS Zen Garden project, you will be given an HTML document to format with CSS. You will also submit a final Design Report in which you discuss your goals and technical implementation of the project.
Every class member will have some input in final grading of this project. After the project submission date, the full class will review and vote on their favorite submissions.
Although my design does not have a clear overall theme, the element of design that are implemented create a consistency that works well. If it had to be categorized, I might call it “artsy” or “whimsical”—maybe even “Zen?” You could consider some aspects of the title and the bullets to be representative of a garden. They seem a bit like leaves and vines. The title and the lights in the background are fun and playful, but the site does not look silly or unpolished. I think since the layout is quite basic, it is balanced by the interesting images. I wanted to keep it simple, but not make it boring. I also wanted to incorporate some color without it becoming overwhelming.
I think my design follows the principles of CRAP quite well. The values on the site are very high in contrast, but not to the extent that it is difficult to look at. Stark black and white pages can be too high in contrast, so I added some light values in the yellows and oranges to add to the range of tones. Also, black text on a white background is generally easy to read, so I made the text boxes white. I would have liked to make them somewhat transparent to tone down the intensity of the white, but I could not figure out how to make that happen.
My design uses repetition effectively as well. The background is repeating, which gives the reader’s eye something to follow down the page without being too noticeable. Also, the bullets are part of the image that is the title. This repetition also leads the eye around nicely and ties the whole page together.
Everything on the page is also very well aligned, including the boxes, the text, and the headers. There is some space between the boxes, and I think if there was anymore, it would be too much and the background would become a distraction.
When this project began, I did not have a clear picture in mind of what I wanted my Web site design to look like. In fact, I did not have a picture in mind at all. I sat down on the floor in my room and started brainstorming, but I just wasn’t coming up with anything brilliant. I looked through a lot of my photos, hoping to find inspiration, but I ended up looking at the stock photography sites that we learned about in class. I spent a very long time looking through images, and I had many ideas for themes, including graffiti, clouds, phone booths, London, and art, but none of them seemed to fit.
Looking back now, I think I realized why it took me so long to come up with an idea. I really like the theme of a site’s design to relate to the theme of its content. For example, if I were writing a Web site about street art, its design would be very graffiti-themed. In this case, the site is mostly informational in nature, so it was hard for me to assign it a theme. I think that is why my design is so un-themed. I would call it versatile.
Once I decided on a simple yet pleasant background, I knew I wanted the title to be interesting. I also knew that the only way I would be able to achieve that was by drawing it myself, which is what I did. I think it gives the site character without looking unprofessional. I chose the font for the body because it is simple and easy to read.
As for technologies used, the main application that was used in creating this site was Notepad. I also used Fireworks a little bit to create bullets. I was experimenting and was trying to do something different with the title, but the program was giving me trouble and wouldn’t allow me to do what I had in mind. If I spent some more time on it, I could probably figure out how to do certain things, but I think it looks fine the way it is. All of my code was revised many times after consideration and feedback.
Photos courtesy of stock.exchng. Some codes were researched using htmldog.