A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden
Going into this project, I at first had no real ideas on how to design the web page. Then, all of a sudden, I had quite a few. After going to some usual websites I visit for a few days, inspiration began to hit really hard. I was drawing possible ideas from all over. Be it forums, personal or band websites, purely ‘experimental’ websites, anything I came across I considered, unless I really didn’t like it. Some of my main sources of inspiration early one were these websites:
With the Radiohead website, I was drawn in by the very unusual setup of it, especially many of the older versions. Links that kept going and led nowhere, type in obscure places, images or text that seem to have nothing to do with the bad. But also included in this ‘mess’ so to speak, were links to tour information, or an online shop, etc. I also liked the color schemes of all of them. The simple, dull colors that allowed you to focus on what ever was featured on that page.
And with the Om website, I really just liked the simplicity of it. It was easy to navigate and had all of the important information right in front on the respective links. Yet there was a sense of difference about it because it featured odd black and white photographs as backgrounds. You almost don’t notice them until you’ve read everything on the page but they’re surprisingly striking once you do take them in.
I then was deterred from using these websites as direct inspiration because we were designing a singular page, with very little use of overly creative CSS. It was only a project meant for a beginners attempt. Then one night I was watching a movie from the Criterion Company, which releases mostly underground or under appreciated movies they deem to be very important in cinematic history. And I noticed the packaging for the particular DVD, ‘Seven Samurai’. It was simple like both of the bands websites, said what was most important right away. Yet I harbored deep respect for the packaging because it was so simple and elegant, and still, through minimal use of images, managed to captivate. Keeping the ‘samurai’ theme, I began looking at other packaging choices the company made for other movies, and drew inspiration for the colors I used from those. All were separate to a movie, very pastel-like, and correlated perfectly with their respective movie. Plus, I have always been a fan, back when I studied art in high school, of the pastel color wheel.
With these newfound sources, I set to work using a very base, simple page setup to go along with the theme. I put a single image that I thought to be very strong on its own with the title of the page, and made each of the backgrounds for the sections a different color, and the text in those backgrounds that I thought went nicely with their respective background color yet also stood out. And I had an original design.
I didn’t do much revision during the following time, as I was quite satisfied with the original design I had created. Some coding things I did do were center and align the text in the sidebar much nicer, and I added some padding in all of the sections. I also moved all of the sections over a bit so the whole unit was more centered and nestled in together. Then I was suggested by Professor Lowe to add another, accompanying image at the bottom right of the page. I though of it as a way to maybe reward the user for reading the entirety on the content. I originally was searching for an image similar in theme to the dead samurai at the top left, I was thinking and strongly hoping to find an inked sword in the ground, or floating. Drawn in the relative same style as my other image. Unfortunately after searching for some time through many databases and subjects, I decided to go with something else.
This something was an image of roughly drawn mice looking at each other, covered in different shades of purple ink. I was attracted initially to the image because I just liked it in general. I thought that it would have a place in the bottom right corner of my page. The purple colors used in it went along with the other pastel colors, and the technique of simplictity matched the samurai image. The only thing was that it had nothing to do with that samurai theme. And then I remembered the Radiohead websites that had pages of seemingly meaningless images just thrown in. And I thought I’d put it in.
I took it into Photoshop and made a few changes with the color. Mainly taking out all of the color in between the two mice, and making it a little more ‘random.’ After that was done I put it in the code and there it was, my finished web page.
As far as credits go I took both images I used from a basic Google Image search. What I typed in to get the mice picture I don’t remember.
I also used Adobe Photoshop 6