Assignment 1 Website Template

I have come up with 2 templates for assignment 1. As I was browsing CSS Zen Garden, at Julian’s recommendation, I realized that photographs were used for some of the good designs. Thus I decided to follow suit and use my photographs as the background for my portfolio website.

 I chose these photographs as they do not contain too many details that distract the viewer from my contents. They also guide my layout, especially for the first design (which I call yellowTwigs), as the tree branches divide the page nicely according to the rule of thirds.

Thus my layouts generally follow the rule of thirds and elements of the pages are placed according to the photographs’ composition.

Here are the rest of my design elements:

The fonts are mostly sans-serif to make it easier to read on the web. The only exception is Stencil for the “redWall” design, as I thought Stencil would make the design look as if someone really did stencil on the wall. However, Stencil is difficult to read, so I used Colaborate for the rest of the text. Fonts are largely kept the same to give a sense of consistency.

As for color, I used those that are similar to the photographs, again, to create a sense of consistency. Black and white is also used as they are rather neutral colors and do not clash with the photograph colors.

For the content portion of yellowTwigs, I did not change the color of visited links, as visited links use a dark brown that will be hard to see against the black background. (I don’t want to change the color dark brown as it matches the photograph.) I also think there is less need to indicate visited links as the content is short (only the sketches and a few lines of description) and viewers can simply click on the links repeatedly and in any order they wish.

I also did not include rollovers as I feel that the rollovers should be the same color as the heading of the contents and yellow will be too light against the white background. Moreover, viewers may expect the links to change color after they have visited the link, which brings me back to my previous problem of deciding on the color for visited links. Hence, I decided to do away with rollovers and used font size as an indication instead.

For the content portion of redWall, I decided to use black text on white background as I felt that it will be difficult to read on a red background. To ensure consistency, I used the same red color as the background for the rollovers. Red is used since it stands out against the white background. As a result, I kept the size of the selected link consistent with the rest. However, I did not change the colors for visited links, for the same reason that the content is short and viewers may repeatedly click on the links if they wish.

For navigation, subcategories (i.e. thumbnails, roughs, etc.) are only provided on the page of the work itself, as I felt that it will be too much information otherwise, and the subcategories are less important. Also, there is probably no need for subcategories, as I could have combined the thumbnails etc. on the same page, if not to prevent too much scrolling.