About My CSS Zen Garden Submission | September 29, 2003
I've been meaning to do a submission for a while, but work, skillswap, my photo site and new blog have been keeping me busy. However my girlfriend was away a few weekends back, so in between sessions of Neverwinter Nights, I had some free time on my hands.
I started off with a layout pretty much in mind. I wanted a centered panel that stretched from the top to the bottom of the page and was surrounded by a drop shadow on both sides. The design would have a header block and then blocks for the content. Usually I'd sketch these initial ideas out on paper but in this case I didn't feel the need.
Not being a naturally talented visual designer, I get a lot of inspiration from other well designed sites. I have a big bookmarks folder of great looking sites, and for most projects this is one of my first destinations. Two sites I kept referring to were hicksdesign and jeffcroft.com. When I first saw these sites I really liked their colour schemes and decided I wanted to use an orange and green colour pallette on my submission. The CSS Zen Garden already had a very nice submission using a strong orange and green pallette so I wanted to make sure that the colour pallet I used was a lot more muted.
Layout wise, there were two regular sites and two other Zen Garden Submissions I kept coming back to. I liked the header layout of mckendall.net, especially the thin white lines between blocks (something that also appeared on jeffcroft.com ) and the block at the top of the page that bled to the edge. Indesain Studios was another beautiful site that used a general layout similar to what I wanted to achieve. The other two zen garden designs that most influenced me were Not So Minimal and Erratic Blue. I liked the overall content layout of both these designs and borrowed heavily from Dan Rubin's headline treatment. Finally I liked the logo Didier had created on his Release One submission and wanted create something with a similarly modern feel.
So with all these sites to inspire and influence me, I opened up photoshop and started working on the design. Everything took shape fairly quickly and I had my first draft ready in just a couple of hours. The main focal point of the design was a central image. After looking though my own pictures and not finding anything suitable, I did some searches on stock xchng and came across this picture. I actually didn't think the picture would be suitable for what I had in mind, but the colours were right and I didn't want to spend hours looking for an image. I decided to use this image for now and possibly think about alternatives later.
I bought the image into photoshop and immediately pixelated it to help create the colour palette. I really liked the pixelated image and after playing with a few variations (smaller pixels, fading from pixelated to solid etc) decided to settle on the original big pixelated version.
From here I came up with the idea of calling the design either sublime or subliminal. I liked subliminal because I thought the pixelated image of the limes was quite subliminal. However I ended up choosing sublime, because of the meaning of the word and also because I thought the image was no longer a picture of limes, it was somehow below or preceding being an image of limes, or sub-lime (wankey bit now over).
Once the design was finished, I chopped it up in fireworks, which I find much more intuitive than image ready and then started thinking about building the CSS. At first I thought I'd probably want to see how other people had built their CSS files. However once I started coding, I realized that I probably didn't need to. The design I'd come up with was pretty simple and I ended bashing out about 95% of the code in around an hour.
Like most CSS I do, I take a progressive enhancement approach, slowly building up figurative layers of style, step by step. I started by laying out the container, then moving on to the header, main copy and nav areas. On my next iteration I started styling the text, adding font size, spacing and padding. Finally I added the headline images and sorted out the styling of the nav area.
I tested this on Safari (My browser of choice), Explorer, Netscape and Opera on my Mac and was relieved that everything worked fine. I'd normally fire up Virtual PC to test on windows, but had stupidly deleted all my disk images the day before when trying to clear space on my hard drive. So I ended up having to wait a few days before I could test the template on a PC. Luckily, while there were a few IE problems, they were mostly related to the box model and were easily (if a little inelegantly) fixed. There was also one weird issue, which I won't bore you with now, but is documented in the CSS, that kept me stumped for an hour or so.
In total the design and template build probably took me less that 10 hours. Basically 2 evenings work. This was something I was particularly please about as I rarely spend less than a couple of days on a design and a good week or more building and then testing/debugging a CSS template. However in this case I think having the HTML already built and not being able to touch it was a big help.
Considering the speed at which I did my submission I'm pretty happy with it. I like the colour scheme, and the simple blocky layout works well I feel. I had some really positive feedback last week when I posted it up for testing/feedback, but am always interested to hear what others have to say.
Posted at September 29, 2003 11:50 PM