About My CSS Zen Garden Submission | September 29, 2003

I'm pleased to say my submission to the CSS Zen Garden has just been accepted, so following in a grand tradition, I thought I'd say a few words about how it was created.

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.

Andy

Posted at September 29, 2003 11:50 PM

Comments

Ian Main said on September 30, 2003 1:55 AM

What a great design sub:lime is Andy. Im glad my design, Erratic Blue could help with the design process. A very clean cut design, welldone.

Jon Hicks said on September 30, 2003 9:07 AM

You’re in! Hooray! Great to have another entry that expands the variety of styles. As Ian said, a clean, striking design - congrats!

Jeff Croft said on September 30, 2003 2:34 PM

Andy-

Great submission, and great write-up, as well. I saw your submission the other day, but had no idea that my site was of any inspiration to you! I’m honored. :)

We certainly seem to have similar tastes…the Zen Garden designs you refernce are all amongst my favorites (Release one was the inspiration for my color scheme). Jon Hicks’ site inspired me to use the scrolling “frame” idea, and both your message site and this personal site are places I always come for ideas and inspiration. It’s interesting how it all sort of ties together.

Perhaps someday I’ll get time to do a Zen Garden design. I mean…everyone else is doing it! Congrats on your acceptance and great work on the design — I love it.

Jeff

Krista said on September 30, 2003 2:35 PM

Thanks Andy for sharing your design process. The thought process behind such a clean, pleasing design is invaluable to a person new to the field such as myself. Truly inspirational. Bravo!

Didier Hilhorst said on September 30, 2003 3:52 PM

Sublime!

As I stated earlier I think your submission is a great addition to the CSS Zen Garden. As with most of your other work this design has that clean and fresh style, lovely use of colors and clear typography. It’s definitively one of my favourites. I am also honored that my submission was a source of inspiration (to a certain degree). In the end I’m glad to see you kept it simple. Good job!

Scrivs said on September 30, 2003 5:10 PM

These type of writeups are always helpful for anyone in the design field. Thank you for sharing the process with us Andy. Again, great submission.

Johan said on September 30, 2003 8:46 PM

Great work, Andy!

Beautiful design and a clean, intuitive structure. Btw. I guess that I’m not the only one to like drop-shadow!

lor said on October 3, 2003 2:15 PM

beautiful design and great write-up on how you went about creating it. thanks! reading these sorts of insights are truly an immense help.

Rayne said on October 9, 2003 10:27 PM

I have to say that even before reading here how you created it, when I saw it at the zen garden it immediately became one of my favorites. You did an excellent job with it. Simple, clean lines. Very nicely done.

Krista said on December 8, 2003 7:24 PM

The thought process behind such a clean, pleasing design is invaluable to a person new to the field such as myself.