My second entry for the CSS Zen Garden, 'Red, Yellow and Blue' has been accepted! As my other entry, 'Mondriaan Zen', I designed this very much with Mondriaan in mind.
Sadly, the design didn't get accepted into the main list of 'official' designs, or get in a book (as far as I know). However, this design is my favourite CSS Zen Garden design. It's clear, crisp and compartmentalised in a way which isn't just reminiscent of Mondriaan's paintings but also supports the information on the page.
Who knows if I'll ever do another CSS Zen Garden design—the challenge is always a pleasure!
Date: 2004.
Placement:
In the CSS Zen Garden category 'minimal'.
Site: Red, Yellow and Blue.
Tech involved: Just CSS, as is the objective of the exercise.
Tools used: Photoshop and Programmers Notepad.
The Goede Herder site was a nice challenge. Not in any technical sense, but design wise. As the target audience for the site isn't going to be web-savvy at all, the site needed to be extremely easy to navigate.
That made the choice for a very clean layout easy and with a few buttons added for increasing text size (and returning it to normal but not, of course, to decrease it) and extra spacing and padding, the design was ready to go in a few days.
To keep site maintenance as simple as possible I went with Lucid CMS, as it empowered me to lock down all unneeded possibilities. Later a simple gallery was needed, so I went with Singapore, as it makes navigating galleries nice and easy.
Client: De Goede Herder Parochie Amsterdam.
Date: 2005 (design updated november 2007).
Site: GoedeHerderAmsterdam.nl
Tech involved: xhtml, css, js and php.
Tools used: Photoshop, Programmers Notepad, Shortstat , Singapore and Lucid CMS.
gameover.com has been postponed indefinitely. Which is too bad, as the design had been fully coded and implemented. In fact, it was one of my best scaling and elaborately designed sites too date.
You can see a bit of the design in the thumbnail to the right.
The pre-launch site was up though, hosting all the map packs for Counter-Strike: Source you'd ever want.
Client: gameover.com.
Date: 2005.
Site: gameover.com.
Tech involved: xhtml, css, js, php and mysql.
Tools used: Photoshop, Programmers Notepad and Xaraya.
My very first try for the CSS Zen Garden, so I immediately set myself very strict rules to adhere to, of course. First off I wanted to build a design that would not only scale with the window size, it would also have to scale well when the user made the text bigger or smaller.
Secondly, I wanted not to use any css hacks to make the design look good in all browsers. I'd love to tell you that the reason behind that was to preserve forward compatibility, as the hacks might break when browsers get updated. My real reason however is that I'm quite a perfectionist and take great pride in the cleanness of my code (as if anyone will read and judge me by it).
Lastly, it had to look like a page Mondriaan would have made, had he been a website builder. Now the design isn't actually based on a certain painting of his, but it just borrows some style elements, most notably the black bars linking the swatches of colour. This might have given me freedom, but now I had to come up with a design that not only matched up with Piet Mondriaans' work, but be more dynamic than his, as I had to deal with browsers. Because unlike paper, which the designer can choose and acts the same every time, browsers all act slightly different, ruining your layout. (Can you sense the built up frustration?)
With those rules it wouldn't be very easy for anyone. So, of course, I came up with a design that stayed mostly true to Piet Mondriaan's style, but I did make one fatal mistake. I designed it originally on a canvas of 1024 by 768. Where this print, that'd been fine, but on the web, where a third of surfers still use 800x600, it's an horrible mistake. In fact, this made actually building the design about 3 times harder. But I guess that in the end it just all came together, and worked out for the best.
After I'd submitted it, this design even got included in a Japanese book on CSS by Arisaka Yoko.
Date: 2003.
Placement:
In the CSS Zen Garden category 'themes'.
Site: Mondriaan Zen.
Tech involved: pure css, no hacks.
Tools used: Photoshop and Programmers Notepad.
This is the website I coded for my (now defunct) Counter-Strike clan, Team AEK, Another Easy Kill.
The design was done by another clan member called Link. I built the basic layout in just over
two days, but have been tweaking it after that to make it look pixel perfect in all major browsers.
Originally Link designed the website for 800x600 sized screens, so I adjusted the design a tad to make it completely scalable. It now looks good on practically any screen, be it 800x600 or 1600x1200, on any major browser.
The trick I used to make that possible is having the AEK Dragon logo fixed above the rest on the left, whilst having the other half of the top bar fixed on the right. That way, when the browser window becomes smaller, the right half slides under the logo on the left (See the detail on your right).
Client: Team AEK.
Date: 2003.
Site: AEK.gameover.com (now defunct).
Tech used: xhtml, css, php and mysql.
Tools used: Photoshop, Notepad, Wordpress, Invision PowerBoard.