Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

One Year

May 07, 2004

One year ago today:

With a few caveats and a bit of apprehension, I present to you my latest pet project: The CSS Zen Garden.

Since I just about missed it (I could have sworn it was May 8th, 2003, but my archives don’t lie) I don’t have anything much planned to mark the occasion. So lacking that, I’ll take you through some of my design process when I was building ‘Tranquille’, the default template.

Zen Garden title

Everything but the type in ‘Tranquille’ was hand-painted in Photoshop, similar to the process I used for design #013, ‘Coastal Breeze’. (The images for the latter were done years ago for another long-dead site of mine)

It began on a sketchpad, which I don’t have anymore unfortunately. The title text was important to me, since I was interested in a calligraphic, natural brush stroke look. A paintbrush, some india ink, and an hour spent in concentration determined that I just can’t do calligraphy. Lesson learned.

Instead I ended up using some random font I had on hand that seemed to work, ‘Calligraphic 421’ from Bitstream. I’d probably use a different choice if I were doing it again, but that’s just changing tastes for you.

Example Kanji

I spent a bit of time researching the Kanji in the ‘scroll’ that hangs down from the top left corner. Rather than pull a ‘Westerner’ and use a bunch of random characters that would quickly prove my ignorance, I tried to find something with meaning, however tenuous.

The symbols I chose represent, roughly, ‘A beginning’, ‘Complete’ or ‘Whole’, and ‘Skill’. I suppose I wanted to say something like ‘We’re trying something new’ or similar, and maybe that even works in some contexts. But if it does it’s more luck than anything.

Pagoda

The pagoda in the top right was also researched, though not heavily. I flipped through Google image search for some inspiration, and ended up finding exactly what I was looking for, completely coincidentally, in a Mozilla Lizard illustration on DMOZ. Somehow that seems appropriate. I traced the shapes with the pen tool in Photoshop and then applied some texture and shading to tie it into the Tranquille style. Stealing? Please. Let’s call it ‘creative misappropriation’.

Tree: first draft

Remember the project in grade school that had you dump some india ink onto a sheet of white paper, then blow it with a drinking straw to create a black tree-like shape, and finally paste on crumpled pieces of tissue paper as ‘blossoms’?

The tree in the bottom right corner grew out of fond memories of that project. As you can see from the above example, it had to go through a few revisions to start looking right. The simple, solid tree above just didn’t cut it, obviously. So back to my Photoshop painting techniques to flesh it out.

Tree: working drafts

As you can see, the process involves sketching a rough outline with simple colours, then building up layered detail over top. There are many different ways to achieve this, involving burns and dodges and colour/level/saturation adjustment layers.

My preference is to build every new highlight/shadow/shape/whatever on its own layer, so that I can adjust later without affecting anything else. This leads to plenty of layers of course, so the new nested layer folders in Photoshop CS are a welcome addition. (for an extreme example, Coastal Breeze ended up having well over 300 layers by the time it was done)

So there you go, Tranquille in a nutshell. Happy first year, baby.


Reader Comments

Derek says:
May 07, 01h

Like any good endeavour, the Zen Garden seems both like it just arrived and like it’s been around forever. It remains the best way to explain the capabilitieof CSS-based design to non—web people, with only a bit of background:

“See this web page? Okay, now look at this one. It’s the same web page. This one too, and this one. No really. The *same page*.”

Then they get it. It convinced me to go further with web standards than I had before (which still isn’t very far) too.

Thanks, Dave, for putting it together, and to everyone who’s kept it fresh with new stuff.

Jon Hicks says:
May 07, 01h

Happy Birthday Dave! I bet you had no idea what you were letting yourself into back then. Is it really only a year? Amazing.

AkaXakA says:
May 07, 01h

Was it that long ago? Sure doesn’t seem like it….
Then again, 100+ submissions later it just has to be!

Happy Birthday.

Mark says:
May 07, 01h

Thank you and Congratulations.

Ben says:
May 07, 01h

I’ve been following CSS Zen Garden for about two or three months now, and I just have to say that it has inspired me.

Thanks to The Garden I’ve aspired to create more complex designs and implement browser-compatability. It’s taught me the true limits of design, and even those seem endless everytime a new design is added.

Oh, and my favourites are “Oceans Apart,” “Dark Industrial,” “Stormweather,” “Zunflower,” and unfortunately, “sub:lime.”

Keep up the good work.

May 07, 01h

Your garden is a gift for all webdesigners and freaks, thanks a lot

Alex

May 07, 02h

That’s approximately one new design every 3.5 days. Not bad, not bad at all. :) I’m honored to have been among such talented designers.

By the way Dave, I’ve seen that long-dead site of yours that was the basis of Coastal Breeze. I’m still impressed with the quality of the images you managed from scratch.

ACJ says:
May 07, 02h

Congrats! See my (lousy) present: http://acjs.net/weblog/2004/05/07/happy_birthday_css_zen_garden/

mac says:
May 07, 02h

thanks and congratulations!

Sjors says:
May 07, 02h

What Zeldman preached you visualized. Kind of a”What-you-see-is-what-he-says” approch. I agree with the others that it is a great source of inspiration and sets a real good example of the power of webstandards. Nice going and keep up the good work!

May 07, 02h

Man, I barely have time to design text-based websites, let alone something this intricate. Great work!

May 07, 02h

here’s to many more gardening years….cheers

Bobby says:
May 07, 03h

Congratulations Dave! It’s amazing to see how much a garden can grow in a year. I bet you didn’t know you had green fingers when you started this all!

Malarkey says:
May 07, 03h

Happy Birthday Dave! I can’t believe how fast the last year seems to have gone. I hope the next year in the garden will be just as ‘rosy’.

Terrence says:
May 07, 03h

Cheers! Dave for a year of great design using eye-opening techniques. I’m SO glad to have stumbled upon this site earlier this year and so honored to have my work planted here.

Can’t wait to see the Garden a year from now!

16
Jody Stockley says:
May 07, 04h

I just wanted to thank you for such an inspiring project. I just happened upon the CSS Zen Garden by chance. After seeing projects in the Garden, I began to take CSS (and for that matter web standards and accessibility) seriously. Bravo to everyone who contributes!

17
Jonah Cosley says:
May 07, 04h

Thank you for creating such a profound resource of web design inspiration.

I first came across CSS Zen Garden when I was just starting to learn CSS, and couldn’t figure out exactly what was going on. Then a few months later I came back, and it blew my socks off! I actually had trouble sleeping for the next week (seriously) because of the excitement it sparked for web design.

Congratulations on your first year!

Elaine says:
May 07, 04h

yay for the Zen Garden! and congratulations on such an excellent first year.

like others, I find myself showing the CZG when trying to explain some of the amazing things CSS can do, and it always brings out the “oohs” and “ahs.”

thank you.

19
Ram Yoga says:
May 07, 05h

Wow, I can’t believe it’s only been a year since you released the Garden to the public. Somehow it seem much longer… The Garden is my default site for showing people what CSS can do. There are still a lot of programmers and “non-designers” who code old-school (table-based) HTML and just don’t see the point of learning CSS. The Garden usually makes a pretty good impression. ;)

Thank you, Dave! Your efforts (along with all the people who have contributed) has made it so much easier to show people what’s possible with modern coding and separation of content and presentation. Happy birthday, Zen Garden! :-)

Luc says:
May 07, 05h

Happy b-day Dave!!!! Thanks for bringing the Garden to us :-)

Javan says:
May 07, 05h

The Garden is what first sparked my interest in CSS. I viewed it’s source and studied, studied, studied. A couple months later I landed a job because they were especially impressed with my knowledge of CSS. Thank you.

May 07, 09h

Thank you for providing the inspiration to learn more, and to challenge myself further. Countless hours have been spent trying to answer the *how the ____ did they do that?* Now if only there was a way to incorporate CSS into my dayjob, I would truly be happy.

23
Seth says:
May 07, 10h

In all sincerity, I can’t thank you enough. The garden was not only THE catalyst in my learning of CSS, but it has proven a priceless tool for teaching others the possibilties of CSS.

Thanks, Dave!

Warren says:
May 07, 11h

Very interesting peek into your design process here, Dave.

I’ve always liked the look of Tranquille, but to be honest it doesn’t give the immediate impression of a complex creation process (from a visual standpoint).

In my own work, I’ve been trying to move steadily toward more subtle use of visuals, and I think it’s given me a greater appreciation for how much work goes into making something look easy.

Thanks for this, and for a whole year’s worth of inspiration!

Ryan says:
May 07, 11h

You are an inspiration to us all Dave. Thanks for all your time, work and effort that has made the Garden what it is today :)

Keith says:
May 07, 11h

Thanks Dave, and here is to another year of innovation. Geez, alot can happen in a year, eh?

I have to say that this project was what “put me over the hump” with CSS. I’d be dabbling for quite awhile and was on the cusp of really “getting” CSS and what it was capable of when I tried my had at a Zen Garden entry (I was the first one outside of Dave) and I found it, well, easy, thus reinforcing the benefits of CSS in my mind.

I look back now and really wish I’d spent a bit more time on the design and I’m constantly amazed at the creativity of the Zen Garden entries. There is so much that puts mine quite to shame! That’s a good thing!

Thanks again Dave.

blakems says:
May 07, 11h

Great Resource and place of inspiration. One year later and over 100 designs, Congratulations. It truly is a Zen Garden. I still need to submit my own zengarden design one of these days.

Mike P. says:
May 07, 11h

Wow, only a year? I vaguely remember you posting in the CSS-discuss list sometime prior to going live, and it seems like so long ago!

Interesting to see how you put the original design together.

Happy birthday, ZG!

May 07, 11h

Well, I guess one word sums it up: Thanks.

Looking through the Zen Garden is a continuous source of inspiration, and I appreciate the amount of work that Dave puts into it.

I second Warren’s comment that tranquillity doesn’t show the effort that has been put into it, but I guess it takes a lot of work to make something simple.

Here’s to one more year, and hopefully another 100 designs.

Oh, and I have to point out Wiggles the Wonderworm (design number 99) which is the funniest use of CSS I have seen to date.

May 07, 11h

Happy Birthday CSS Zen Garden.

As a trainer and educator in markup and CSS, nothing - simply nothing - has helped me more in demonstrating both the potential beauty of CSS-driven layouts, the practicality of structured markup, and the ease with which sites can be made accessible than the CSS Zen Garden.

As a Web standards evangelist, I’m also 100% confident that we’d be battling a much harder battle had the CSS Zen Garden not bloomed.

So Happy Birthday CSS Zen Garden, congrats to the many contributing designers, and most especially, thank you Dave Shea for making the web even more wonderful than I ever dreamed it could be.

Jewel says:
May 08, 03h

Happy Birthday Zen Garden!
I came here only a couple of months ago, through a link from a web help group, and was suitably amazed and awed at what can be done with css. I had never done any before then, and am currently in the process of converting my own “nested tables and spacer gifs” site into one using css and web standards. It is a bit of a slog but will definitely be well worth it.
Thank you for the inspiration to make a start.
It will be quite some time before I am up to Zen Garden standards, but at least you convinced me to try!

AmyO says:
May 08, 04h

Hi! Happy Birthday Zen Garden!

Like so many who have posted here, I too have been inspired to dig deeper into what can be done with CSS. I am not a web designer, but I have a personal site that I use as an electronic newsletter of sorts for friends and family. I am also in the process of putting together an online portfolio for my editing work, and came across CZG when looking for CSS tutorials. What a great concept! And everyone’s work is excellent. I am redesigning my personal site, and re-working my portfolio concept to take advantage of some of the more unique ideas presented in some of the designs.

Thanks for putting this great resource together! More and more people are “seeing the light” of CSS design.

May 08, 05h

Happy birthday CZG. It’s the best case study I ever saw.

Mayu says:
May 08, 08h

Happy first year, indeed!
What an awsome place css zen garden has become … thanks to you Dave, as well as to all the contributors.

Can’t imagine life without the Garden no more :)

May 08, 11h

I was very inspired by the gathered ideas on CSS Zen Garden too, an i love it.

But there is one thing I think is sad about CSS Zen Garden. The most designs are not fluid with all the disadvantages. I would like to see much more fluid CSS Zen Garden designs where is no matter how big your window is.

May 08, 12h

Thank you so very much. I learned to build webpages because my partner is a web designer. I have only ever built CSS based pages, as this was the direction my partner pushed me in when I expressed an interest in designing my own site. He didn’t actually teahc me web design but instead showed me several useful sites, starting with this one.

After I had finished I went out into the big wide world (actually it was where I work) and showed people my new site, and explained CSS to them, badly. After watching their confused faces for a while I gave up explaining and pointed them to CSS Zen Garden. Your work here has demonstrated CSS to so many in a way that is far more elegant than mine.

It has also served to dispell the myth that the only sites you can design using CSS are small green bordered boxes.

May 09, 02h

Happy Birthday Zen Garden and Thanks Dave, for keeping us all on track for CSS. Many of us were lost before you came along and shared your thoughts and inspirations.

Paul

NyXen says:
May 09, 03h

Thanks for all the things you’re doing, I think you’re a major actor in making people move from tables to CSS, in a word, in the future of internet ! You can be very proud of you !

Rune says:
May 09, 07h

I also have to thank you. The whole concept is just great, and i have been using the many designs as a big, if not the biggest, source of inspiration.

Thanks for the great work, and happy birthday ;-)

40
Mr. Hyde says:
May 09, 07h

- qq[Stealing? Please. Let’s call it ˜creative misappropriation.”]

um? why isn’t that stealing?

Virginia says:
May 09, 07h

Congratulations! People have been reading and hearing for years that CSS could do wonders. You showed us the wonders. Seeing is believing, and you made believers out of a lot the previously unconvinced.

Paul says:
May 09, 12h

Thank you and congrats! I just recently learned about the Zen Garden as I get started getting deeper into CSS. It’s been a great help! :)

43
Ronald van der Wijden says:
May 10, 06h

Congrats, Dave!
Not only did the Garden grow out to be THE place to show and say “I told you so” when people ask if you can design beautiful sites with CSS, just this morning I referred to a couple of the great designs as such as a source of design inspiration.

Terrence says:
May 10, 07h

Hey Dave:
Now that the Garden has had it’s first anniversary, will you be implementing the “Favorites” list soon?

Trent says:
May 10, 09h

The Garden is an excellent resource. It’s very inspiring.

While it is very good at demonstrating CSS, it’s also a powerful example of design skills. It has inspired me to research graphic design to “spice up” my own graphic skills.

For anyone looking for a place to start, I recommend the book “Non-Designer’s Design Book” by Robin Williams (not the actor).

46
Moirin Tierce says:
May 12, 12h

Perhaps the one best way to get people to stop laughing at CSS and, indeed, want to learn it. And, undoubtedly, inspiration, this excellent showcase of design calibre with CSS. Happy Birthday to the Zen Garden.

47
NP says:
May 13, 02h

Apparently, your design sense is getting predictable.

http://www.nimbupani.com/2004/05/10/at_bloggerheads.php

May 13, 11h

CSS Zengarden is the reason I’m now bothering to teach myself CSS, with the ultimate goal being a submission to the site. Thanks for easing my Flash addiction.

May 14, 03h

For me too, csszengarden is an inspiration and confirmation that standards are the way forward.

I thank the people who submit for the inspiration and one day hope to submit my design.

50
Derek Pennycuff says:
May 17, 11h

It’s only been a year? Man, I must have stumbled across it within a couple of weeks of launch, then. It’s one of the greatest resources on the web (as far as design goes) and it’s URL is always my answer when anyone asks me “Why use CSS?”