iSchool Logo Info 343: Web Technologies

Summer 2012


The reasoning behind the page

For my CSS Zen Garden re-design, I decided to create a theme centered around a busy desk. The overall high level view is to have the main content on a sheet of lined notebook paper, centered on the page, while additional snippets are scattered to the left and right. The basic grid layout is three columns, two small columns, one on the left, and one on the right, with a large (~50% of the page) column in the middle, which contained most of the page's content. I opted to avoid incorporating smaller columns in the main content area, in order to uphold the "hand-written" paragraph style. The exception to this is the pull quote at the very beginning, which adds interest to the page.

After implementing the CSS reset, I began by adding back some font hierarchy as well as whitespace, by setting font-sizes and margins for the headings. Starting with h6 being slightly larger than standard paragraph text, I slowly incremented in size as I progressed into larger headings. I then went through and added in top and bottom margins, generally following a similar pattern. I wasn't able to be quite as drastic with the margin sizes, as an extremely large margin (or vise-versa) looked odd and out of place. As a final touch to the default settings, I added back some spacing between paragraphs, and added some indentation for lists.

After some baseline styles were outlined, I was able to then add more "creative" styles to the page. In order to keep with the "desktop" theme, I kept my font-colors limited to blacks and grays - pencil and pen shades. I also modified abbreviations to have a "highlighter" effect. The overall font-scheme was chosen to represent the hand-written aspect. Although some readability was compromised, I changed all links to have a light gray color. To counteract some of the readability issues, specifically for the links on the unordered lists, I added a hover effect that lightened the background and darkened the text, making the list item more visible.

The overall color scheme used was to incorporate bright colors as seen in a standard desk environment - pencil yellows, eraser pinks and reds, and sticky-note pastels. Due to the vibrant colors of the page's background images, I decided to keep the font colors in shades of gray.