Visual Design Strategies

The look I wanted to achieve with my CSS coding was that of an ancient Egyptian document. I chose an old piece of paper for the background of the website to imply that the text was written a papyrus-type material. At first, the old paper looked slightly Western. However, by adding the graphic for the heading and the hieroglyphs for the bullets, I was able to give the page a bit of an Egyptian feel.

Creating an aged look for the website was also the reason I chose to make the text maroon and a very dark purple. The first types of ink were more so stains and paints, many of which were derived from crushed plants, gum, and soot that were mixed with water. Though these early inks and paints were mostly black and red, I imagine those colors looked closer to the ones in my CSS design than an absolute black and a bright barn red.

The graphic I used for the heading also contributes to the aged appearance of the design because of the archaic look of the brushstrokes of the typeface. Since none of the fonts I was able to use for the main text would really contribute effectively to an aged look, this heading does a lot of the work to create the mood for the webpage. It is also the same color as the main text and the same color of the outlines of the hieroglyph-bullet image, which ties the design together.

The graphic I used for the bullets is a hieroglyph of a lion. I chose the lion because it was more visually interesting than a lot of the other hieroglyphic letters, it is horizontally oriented, which fit better with the list items, and because it is the heiroglyph for the letter "L," which is my middle initial. This also contributes to the aged look of the design because the Egyptian civilization is one of the most widely recognized ancient civilizations. The color of the lions is in the same color family as the color of both the main heading and main text of the webpage, so it helped to tie the bullets in with the rest of the design.

Though the dotted line doesn’t reflect any kind of historical document, I still felt that it contributed to an aged appearance more than any other options available for borders. It give the borders a stitched or even faded look.

Process

The process of putting together this CSS code was quite slow and very frustrating. It took me a while to find an image that would keep the text legible and wouldn't look like a cheezy pattern from 1996. Then, it was a struggle trying to decide what type of cultural mood to create through the colors and other images. Finally, I decided on ancient civilaztion, which is why I chose the lion heiroglyphic and the brushstroke-looking font.

I experiened many problems with elements of my design suddenly disappering after I hit "refresh," though I hadn't touched the code for that element of the design before hitting "refresh." This problem mainly happened with the image for my webpage title and the image I used for the bullets.

I also experienced problems with the position of the text underneath the heading graphic. During the early stages of designing this webpage the positioning was fine, but a few days ago it started overlapping, though I hadn't touched the coding for those elements of my webpage. I tried adjusting the position of that text, but most adjustments I made to the coding made no difference or moved the project description above the subheading. Overall, creating CSS codes is a very detail oriented process, one that I will have to get used to if I plan to improve my web designing skills.

Credits

I got the old paper background image from The Evil Gang Line Dancers website, which is a website for a Swedish line dancing group.

I got the hieroglyphic reed from a screen shot of an iPhone application that decodes Egyptian heiroglyphics.