A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
Design Report | An explanation of the Mini Zen Garden design "Winter Blues"
Since the "Winter Blues" Web page began in the winter, the season's dreariness inspired the design. My Mini Zen Garden theme is the winter blues; it focuses on the cold, dull, and lonely feelings associated with winter.
To achieve this theme, the design is centered around a photograph of a bare tree with traces of snow on the ground. The tree is surrounded by a blue hue. Applying a graphic to the bullets enhanced the theme. The small diamonds imply ice and, thus, cold. Their color is also light blue, which flows with the color theme. Snowflakes are used in the headers to add a graphic related to the theme.
The winter blues theme is based on the colors:
Design techniques other than color warrant discussion too. First, the header, which was inspired by Jens Kristensen's "White Lily" in The Zen of CSS Design, was created in Photoshop. The photo was cropped and text was added. Text replacement was used to eliminate the header text from the design without altering the HTML.
Lines were another technique used because they add visual content without confusing the eye or cluttering the design. Lines subtly lead the eye across the page and down to the text. The lines also create rectangles, which were added because--according to the text--rectangles suggest order and logic. This order enhances usability by offering logical flow.
Another technique with design involved the type. The main type is black on a white background, and the header, footer, and description sections have a dark background with white text. This gives high contrast and ensures readability.
White space, or negative space, is also important. White space guides the eye to the main text and gives readers a place to rest their eyes and digest information. It is also part of the minimal, lonely feel the design strived for.
The theme began with the photograph of the bare tree in the winter. The design began with the layout. Initially, the sidebar was on the right side, and the footer was below it confined to the sidebar column, but the layout changed. The footer moved to the bottom and the sidebar moved to the left because the header caused problems with the floats. After laying out the page, a sans serif font was selected to ensure readability, and adjustments were made to the font size and style.
Next, the header was created using Photoshop so the "Winter 2007" text could be vertical. Graphics were added to the bullets, and the links were given coordinating colors. Finally, a border was added to separate the requirements and sidebar sections.
Revision revolved around:
The margins and padding required the most time because they needed to be adjusted after changes to make sure the layout remained unaltered. For example, changes in line spacing and the addition of the snowflakes required adjustments to the requirements and sidebar padding.
Color was another aspect focused on in revision. At first, only the header had a design. During revision, color was added to the description and footer to give the top and bottom of the page weight and balance. Borders were added to increase color. The colors were also matched to the photograph.
In addition to utilizing color to coordinate the material below the header to the theme, graphics and borders were added. Professor Lowe's Mini Zen Garden inspired adding a graphic next to the paragraph headings. Images of icicles and ice-covered trees were added to the bottom right corner of the page; however, this did not flow with the two-column layout. Adding snowflakes to the headings increased the visual appeal of the main text and enhanced the theme with a concrete representation of winter.
Inspiration also came from Ryan Sims's design, "Oceans Apart", in The Zen of CSS Design. He created a simple two-column Web page by using colored borders around the white text area. The header and top-most information were given the most visual importance. So, borders were used around each section of "Winter Blues", including the:
Besides HTML and CSS, the technology used was Photoshop. Other than coding errors, the only problem occurred with the initial liquid layout. With the borders around each section, the liquid layout created gaps when the page was viewed on different sized screens. Changing the layout to fixed width solved the problem.
The tree photograph was courtesy of Free Stock Photography. The snowflake and diamond bullet were courtesy of Clip Art Space and Bullet Madness, respectively. The block-style header was inspired by Jens Kristensen's design, "White Lily", in The Zen of CSS Design by Dave Shea and Molly E. Holzschlag. Also from this text, the design "Oceans Apart", by Ryan Sims, was inspiration for the layout and color placement.
Professor Lowe's Mini Zen Garden was used as a coding guide. Also, The Zen of CSS Design was used for learning and using code. Various snippets of code were borrowed from the text.
Professor Lowe deserves a special thanks for the knowledge of HTML and CSS he shared and his patience and guidance.