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.
I used a beach theme for my Mini-Zen website. This included:
These elements together made the design feel bright and tropical.
I put the requirements on the left side because they will be read first this way. The requirements are the most important information, so I placed them on the left side. The sidebar is next to the requirements on the right side and in line with them as well. Together these two sections form the "body" where the meat of the information is. I also aligned the header, description, and footer sections with each other to show the starting and ending points of the site.
Furthermore, each section is separated by borders that align with each other. The margins and padding I chose allow for the space between the outside of the borders to be the same and the inside of the borders to be the same. The borders are ridged with a light color for emphasis. I did this because it reminds me of footprints in the sand to again support the beach theme.
Additionally, repetition occurs through all of the levels of headings. They all are in the same typeface of Bradley Hand ITC. I chose this typeface because it reminded me of the shapes that are made when objects such as hair are blown in the beach's breeze. I also made the bullet points into images of flip flops which are repeated for the requirements, resources, garden, and validation sections. Also, the borders are all the same. This repetition unifies the site.
In addition, the paragraph font is in Veranda typeface which is easy to read for longer blocks of text. Also, all of the text is black which is legible over the lighter background. I chose to keep the headings black because I wanted them to be readable. I did not think any other color would go well with the beach theme and would be legible against the background. Instead, there is contrast between the heading typeface and the typeface of the rest of the text to make the headings stand out.
When I first started working on my design, I started with a western theme. I looked for background patterns and images that would work well together, but the elements did not seem to fit. Next, I tried a winter theme and then an ice cream theme, but each time I felt unsatisfied with my design. I finally settled on the beach theme, finding elements that worked well together.
Next, I set the margins and padding so every element aligned well with each other. Then, it was on to the borders. That was the easy part. I had a difficult time with finding a free background that was large enough to take up the space of my entire site. Once I found one, I chose the image of the flip flops for the bullet points. It took me a while to get the flip flop bullet points to show up on the site. Next, I chose a generic typeface for the paragraph text that was legible enough to be read on the computer screen. Finally, I switched a few times with the typeface for the headings, trying to find one that was flowy enough for my beach theme.
What I ended up with was a cohesive site.
I took the all of the images from the Stock Photo Exchange website. All of the images used are free. The background image is credited to the address http://www.sxc.hu/photo/1144042. The flip flop images used for the bullet points are credited to the address http://www.sxc.hu/photo/830623.