A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
This website was made by Thomas Sniadecki for his WRT351 class in the Winter2013 semester. It demonstrates what he has learned about the effective use of CSS and other web design techniques during the first half of the course. This was accomplished by formatting an HTML document with CSS. The content of this website serves as the final Design Memo in which is discussed the creator's goals and technical implementation of the project. More examples of CSS can be found in the CSS Zen Garden.
The contents of this website and associated HTML file serve as the Design Memo for this project.
This assignment was not given a rhetorical situation, it was more of a demonstration in creative skills.
This memo will focus only on the techniques used for visual design. There was no writing created beyond the Design Memo.
The CSS sample for a centered style was used for the layout of the blocks. This allows users to focus their attention to the middle of the screen and experience most of the website's contents regardless of screen size.
In addition, the centered style provided more opportunity for adjusting the "float" of the sidebar.
A design with exciting, hot colors like reds and yellows tend to be risky in forming initial acceptance of a webpage. Blue is a cool color and easy on the eyes. With a lighter shade it allows for the use of black text for content (like you are reading here) and a subdued orange for headers. These two text colors create contrast for easy reading.
The background pattern of crosshatched wood was found at the Free Background Textures Library at GRSites. The image and many others on this site are designed for repetition. This background also provides earthtones for the website. Earthtones are another inviting color and provide a sense of the world outside the artificial sights of the internet. The brown of the wood also matches the subdued orange. Together, they give the sense of the text floating through the blue background from the wooden image behind it.
The picture of the man at the bottom left is an image of Valve Softwork's Gabe Newell. This picture was included for both humor and shock. With enough content in the "requirements" block, the image is pushed down below the screen. When the user scrolls down, they will be in for a surprise as Gabe's face looks at them with concern. The image also had a light blue background, adjusting the blue of the "body" block allowed for blending. The placement is manipulated to be at the bottom through the CSS commands for image placement; additional offset is created through a quirk in CSS. By including negative pixels in location adjustment, an image can sit partly off-screen. Through this manipulation, Gabe's face is nestled between the requirements block and the start of the crosshatched wood background.
The body text is untouched, to allow the user to adjust the text through their browser options. This enables those who need larger text to read the website's content. Large text lengthens the page, but little formatting is altered. Smaller text may result in the background image of Gabe to be covered by the other blocks, like the sidebar.
The headers have the most adjustment of the website's text. The title headers at the top of the website were. In addition to the orange-on-blue contrast of the color change, their sizes are adjusted for several reasons:
Links are colored to fit the orange earthtones of the header text and background. They also contrast with the blue and stand out from the black text to alert the user of their nature as links. Previously visted link coloration is disabled to preserve the color palette. Underlining is preserved to assist in alerting users the nature of the links has hyperlinks.
In addition to the headers, colored lines provide clear borders between sections. They can appear as if they are underlining the headers, or creating a block for the "sidebar" and "footnote" blocks. The "body" block is surrounded by a border colored to create a transition from the brown background to the blue.
For variety, the list bullets were changed to squares.
The "requirements" block is set to float on the right, mostly to enable the "sidebar" block to float on the left. This block holds the majority of the website's text content. It has a specific width to prevent pinching the text from being pinched by adjusting the browser's width.
Through the float property, the "sidebar" block can appear on the left side of the website. This selection agrees with the belief of navigation or additional content agreeing with the natural reading tendencies of left-to-right.