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.
Going into this project, I had grand ideas of my overall theme, what I wanted my Mini Zen Garden to look like, and how it was all going to turn out in the end. But very soon after I started, I realized that having ideas and actually implementing them are two very different things. My initial design strategy was two come up with a theme and then work all of the elements around this one theme. My initial theme was going to be “Eden”. In my imagination, I wanted my webpage to look very leafy and green – like the very first garden. I thought that it would then be good to tie in greens, and images of different garden elements such as flowers, bugs, and trees. Once I started actually doing the physical CSS for this project, I realized that as a beginning “web designer”, I could only accomplish so much – or little for that matter.
Once realizing this, I decided I needed to cut back my ambitions and do what I could with my idea. I think that I still accomplished my goal in the sense that I went with a garden-esque theme, it is just on a much smaller scale than I originally thought. I learned as I went along that a lot can be accomplished with the right background and adjusting the colors of the rest of your basic elements.
First, I chose a background that I liked, and that gave me lots of room to work with. This background was found on the free photo website, Stock Exchange. The viney, leafy border around the edges gave me plenty of room to put all my text in the middle while still providing the green feel that I originally wanted. The butterflies and spiders were also found on the Stock Exchange website separately, manipulated with Fireworks, and then placed into the background where they could be used. The heading was also made in Fireworks, just by choosing a font that I thought went well with the overall theme and then adjusting the color. I took out the original header in my CSS style sheet, allowing the text I placed onto my background to be used instead.
All images I used came from Stock Exchange, a free stock photo community online. After searching for the type of images I wanted to use there, I was able to base my design around the ones that I found. Some ideas were taken off of previous examples of Mini Zen Garden designs that were used in previous semesters of Professor Lowe’s class. This included the Subway design, in which after viewing the CSS, I learned how to separate the different headers, and also make them not show up – that way I was able to supplement them for an image I had created myself. I also received ideas from the Brick Buddha design. From this webpage, I learned how to format and change my text. I must also give a lot of credit to HTML Dog, a website that was introduced to us in class, but is open to the public over the internet. Without this website, my Mini Zen Garden would be a black and white screen. The information I received there helped me to format the text, the lists within the texts, as well as change borders and colors.
To be perfectly honest, the process of working on this design was quite frustrating. I went into this class with no web based design experience at all, and everything I learned, I have learned in class. It was as if it was a foreign language to me – I found it so hard to think in pictures but then have to execute using numbers and letters. The first time I actually sat down to work on this project I just stared at the screen, not even knowing where to start. I think the biggest thing I have learned through this process is that it’s okay to make mistakes while working on your web design – and really, that is probably the best way to learn. I was so afraid of making a mistake in the beginning and permanently messing up the design that I hardly changed anything. But as I went on, I realized that I could delete what I had just done and things could always go back to the way they were – but if you don’t just try an idea you have, you will never know if it could have worked.
Although this process has been frustrating and extremely time consuming without the product that I originally had in mind, I have learned a lot about web design through CSS. By jumping in and getting my feet wet, I learned more than I could have by just reading. My design is not perfect, but it is a collage of a valuable learning experience.