A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
My design is intended to be clean and colorful. I chose a vector image for the header (courtesy of stock.xchng) because vector styles are very current and popular in graphic design. This image is the starting point for the design. The city-scape itself is professional with straight linear shapes. What makes the image interesting are the circles of color, which add a spherical design element. On the header image I actually erased some of the image to add differing levels of opacity. I did this to avoid a perfectly rectangular header image. My intention was for the header to be soft around the edges and more oval in shape. The original text from the html document was ‘spanned’ in the CSS in order to add an accent font and a more graphic based header. For this design I chose an accent font that meshed well with Century Gothic, the main font on the site. I like how this font choice adds to the modern, clean look of the site with all capital letters and the arrangement of the font I chose.
The header was made purposely large. Although I do not like added scrolling, I wanted the header to stand out as the primary focus of the design. The overall color scheme of the site pulls from the light blue and pink colors at the bottom of the header image. After trying various background colors, I settled on baby blue. The blue color adds to the clean feel of the site. I chose to offset the background color with a thick solid border. The solid border ties in the black and white contrast with the container.
The modules were floated traditionally, with the sidebar on the left. This makes the most sense to me organizationally. The sidebar is offset with a specialty list with graphic based list items and a changing hover color. The blue hover color gives the appearance that the mouse cuts straight to the background of the site. The list items font color are white as a contrast to the otherwise black font on the site.
Contrast * The design is high in contrast with the black and white feel of the site with bright blotches of color. Contrast was one of the goals of the site.
Repetition * Repetition occurs in the site through the interlaced elements from the header image. For instance the ‘h3’ sections incorporate an image I created from the header graphic. This gives the site a source of cohesiveness. There is also repitition in the font styles in a complimentary and consistent way.
Alignment * The site in general is left aligned, however the header is center-aligned, I found this to be visually the easiest to follow.
Proximity * To avoid an over-crowded look I’ve spaced out the separate modules and added borders and padding in the container. This adds to the clean look that the site prizes.
In the creation of my site I used Photoshop for the image editing. I had some troubles with the program because I am more familiar with InDesign. I had trouble locating some tools that added to the time I spent on small revisions. At the beginning of my design work I found that the off setting of the container was a big addition to the design. I like the organized look that created.
Initially I also played around with some different color effects with the graphics. I considered a completely blue/black/white color scheme with the absence of the other colors. I eventually decided against that.
Go to page 2