CSS Zen Garden
Hirnlego
Starting off
This photograph of one of Jamie's lego creations was the starting point for my first CSS Zen Garden submission.
Actually, the starting point was a blank piece of paper and an empty Photoshop file. I started trawling through my iPhoto library in search of inspiration and stopped on this photo. There's a mischievous, fun quality to it so I thought I'd use it as the basis for a mischievous, fun Zen Garden entry.
Colour
I began by brightening up the image and extracting the lego figure from the background. I also starting picking some of the colours in the photo as the basis for a palette. I liked the green and I came up with a nice brown to complement it. The yellows in the photograph contrast nicely with these colours.
The greens and browns are quite earthy which fits in nicely with the whole garden idea. I also liked the graduation from green to brown and how it suggested a natural landscape.
I wanted to exploit this suggestion of a landscape but I was also quite sure that I wanted the overall design to be set against a white background. I married those two ideas by using the graphic design device de jour: a gradient.
I placed a landscape-like green strip (with two shades of green divided by the golden ratio) at the top of the page followed by a light brown graduating into white. I placed the lego figure in the bottom right corner.
The canvas was ready. Now I need to decide where to place the document elements.
Page elements
After a bit of playing around, I came up with a logo that I felt suited the feel of the design: slighty retro and childish.
I used the brown end of the palette for the logo. I wanted to place it somewhere where it could break up the green strip but also associate it with the lego figure. The top right corner seemed the ideal choice.
That left the upper left corner looking quite unbalanced so that's where I decided to place the tagline: "the beauty of CSS design":
When I was deciding on the placement of the text elements, I looked to some of my favourite CSS Zen Garden entries for inspiration. I have to admit that I find many of the Zen Garden submissions to be quite cluttered: impressive in the details but overall not very readable. On the other hand, designs like This Is Cereal, Release One and Golden Mean make good use of whitespace and colour to allow for clear, readable designs.
I decided fairly quickly that I wanted the main body of text to flow down a column in the centre of the page. For the navigation elements, the left side of the page was the obvious choice. There, they could balance out quite nicely with the logo and lego figure over on the right hand side.
With a bit of Photoshopping to the original photograph, I came up with a lego flower to decorate the page headings. It's a small detail but it adds to the toy-like feeling of the design.
So far, all of the page elements had been quite "open" rather than being boxed in with clearly marked borders. I wanted to maintain that feeling with the navigation elements. I decided to turn each of the navigation lists into microcosms of the overall page design. They each begin with a two-toned green strip and the content is set against a light brown to white gradient.
This turned up an unexpected but pleasing effect near the top of the page where the larger gradient of the main content interacts with the smaller link list.
Submitting the design
After putting all the page elements together with CSS and testing on a range of browsers and platforms, I submitted the design to the Zen Garden, sat back and waited for a response.
When Dave Shea responded, it was to tell me that the design would not be making the cut. :-(
He rightly made the point that the design felt quite minimal. It was true. The design was quite sparse and open by design. Dave encouraged me to add more details to the design so that it could make the grade for the Zen Garden.
Gilding the lily
I tried. I really did. I added some more little lego creatures... with subtle, blinking eyes even. I emphasised the landscape feel of the green strip by adding a slow sunrise. I tried styling the link lists in all sorts of ways.
But none of it helped the design. Quite the opposite in fact. The more extra little details I added, the more they detracted from the overall layout. I was more concerned with making the page clean, legible and scalable at all sorts of resolutions.
It's funny but when I was first coming up with a design, I kept telling myself "make it lush! make it rich! pile stuff on!". Yet, even without the usual constraints of client work to consider, I still found myself applying the same critical eye: everything still needed a reason to be there. If something didn't add to the overall design, I just had to cut it out.
In the end I made a few small ammendments: I made the green strips at the top into gradients and added an extra little lego creature at the bottom of the page (the CSS for that was kind of tricky). These changes weren't going to be enough to get the design into the Zen Garden, but that's okay. I'm happy with the design and I can be a pretty harsh critic of my own work.
So, in the end, the design ended up amongst the "unoffical designs" where it's in some very good company. Dave even came up with a new category to fit my design into... it's called "fun".
Well, I set out to create a fun, mischievous design. I think I succeeded. I hope it brings a smile to your face.
Here's the final design. I call it "Hirnlego": it's German for "Brainlego" and also the name of an Einstürzende Neubauten song that coincidentally started playing in iTunes while I was coming up with the initial design.