Update: check out the poster I did for the event as well.
Just like last year, my (now) ex-university, the Catholic University of Leuven, still has a theaterfestival for and by students. Friends of mine organise it and I'm the resident web monkey and designer for their site and poster. The site's domain name means "Leuven plays" and is a pun on theater and plays (it works in english too). So, every year we try to base ourself on some playful theme when coming up with the promotional material.
In the past, there's been blackjack and chess. Last year's design came out really well, so I posed myself the challenge of doing even better.
I redesigned the site from scratch, this time using a 1930's carnival/fair as the theme. A lot of Google Image researching by the organisers found lots of tents, wagons, clowns, snake ladies, acrobats and bearded women. I modelled the carnival setting in 3D Studio Max entirely from scratch, using free textures found on the web as well as custom painted textures. We also found some very nice ticket designs, which lead to the typography and framing of the page.
The renders were cut up into layers and composed into a semi-fluid CSS-based layout (no flash). Then I turned that into a Drupal theme and installed it on the site. The result is very heavy on images (with several hundred of KB's of PNGs/JPEGs), but in this case it's acceptable as the site's audience will consist 99% of students browsing through the university network or someplace close.
To make the ticket metaphor even better, I used some JavaScript and cookie magic to issue each visitor a unique ticket with a printed serial number. Each page you visit punches a hole in the paper, though of course you can still browse the site as much as you want. If you wait an hour or more and come back to the site, you'll get a fresh ticket with a new number. The serial number is in fact just a hit counter in disguise.
Just like the previous years, there are two easter eggs hidden around the site. You'll know when you've found them.
The only hiccup was getting IE6 and IE7 to play nice. In the end, there are only a few minor issues that don't damage the design overall, except for one IE7 issue left to solve. All other browsers played nice from the start.
The site can be found at LeuvenSpeelt.be (Dutch).
Next up is finishing the work on this year's poster, which uses the same overall setting.
Wow
Steven your sites always blow me away.
A website with3D rendered images
Of course. What else. (I might post more later but I am at a loss of words for now)
So happy!
Steven, you really did outdo yourself this year. The site is gorgeous and exceeds all of our expectations once again. And as you know, I have a way of expecting/wanting the impossible without the faintest sign of a blush or the flutter of an eyelid. We have been very lucky to trap you into designing our site and poster for three years in a row, I'm sure many envy us for it *grin*.
I still miss a monkey and a fair tune on the organ though :-p.
Wow, once again a
Wow, once again a masterpiece is born! I love the graphics in it, and it looks very nicely implemented too.
This is beautiful work
This is beautiful work Steven!
Steven, the site and the
Steven, the site and the poster are both amazing!!! Thank you sooooo much for putting up with our thorough nagging :) Think you're getting better every year, so hopefully you'll be in for an even bigger challenge next year 'cause we already figured out our next theme!! ;)
Stay in touch!!
xx
-- Impressive --
Steven,
I was brought here from a link found on another site, discussing the programming architecture that you've used. I must say, very impressive, my hope is to create something as powerful in use, although far less graphic.
Nicely done.
Best regards,
Scott Baetz
web developer
Love it
The 3D work is stunning and the content/graphic frame enclosing it looks nice and is very usable at the same time. The star over the visited links and the nice rss feed icon are great finishing touches. Thanks for sharing your work.
Chris
Some Very Interesting Behaviors
I must say that you have some very interesting behaviors to this site that insure its presentation while maintaining usability. When I have more time, when is that, I'll try to investigate your use of creative css and I assum jQuery methods.
Peace,
-mpare
www.paretech.com
This is amazing!
This is an amazing looking site - I was wondering if you could do a howto on drupal.org on this part -
The renders were cut up into layers and composed into a semi-fluid CSS-based layout (no flash). Then I turned that into a Drupal theme and installed it on the site.
I just can't seem to get from a site mock-up in gimp or whatever to a cut up and into a drupal theme. Any pointers? Anyways, this and last years sites are absolutely amazing!
Liveoutloud2day
Very nice!
Wow,
After two years I am at a point where I fully understand how to use drupal as a backend and seperate the visual output from that. And your design really is setting the mark for that task.
btw, can you give me a shortcut where to find some vintage ticket design I could use for some project?
Great site indeed!
Designs and theming
You can find loads of inspirational material and designs on Google Images. Just type in various keywords related to your theme. Of course, the line between inspiration and copying is thin, but you'll have to decide that for yourself.
For example, the border I used on my ticket is mostly a copy, though I did some custom variations and tried to do my own typography and layout inside. Also, I did draw the border myself, only using the old ticket as a visual reference, so my version differs in terms of spacing and line width to better suit my design.
There are two questions here: one is how to turn a site mockup into an HTML/CSS template, the other is how to turn HTML/CSS into a Drupal theme.
The first is a very difficult question to answer. Mastering CSS takes years and requires a concentrated effort to get familiar with every single aspect of it and how it is supported in the browsers. There are loads of resources online to help you out as well as many pre-made CSS layouts to adapt.
Once you have a working mockup, turning it into a working Drupal theme is a completely different task altogether. For a simple site like LeuvenSpeelt, there is only the front page, regular page and blog page (small text). The site content is pretty basic text. So all I need to do is have some simple template switching with a piece of PHP code in the theme. However, for many larger sites, the theme has to adapt intelligently to the site content and be used in a variety of layouts. In this case, you'll need custom coding and a very flexible HTML/CSS structure.
I will not pretend that any of this is easy or obvious, and I think you can clearly see that with every new yearly edition of this site, I've improved both the graphical design and site structure as well, simply due to more experience. Aside from the weeks of work to go from concept to finished site, there have been years of me generally practicing web tech (like HTML/CSS) as well as graphical design. Anyone can do it, it just takes time and effort.
hrmm... Site down?
Maybe just a temporary DB issue, but I got a bunch of Drupal errors when I tried to visit the site...
Absolutely amazing
I am so humbled. You are amazingly talented.
Very, very nice
I did not know such a thing was possible with Drupal. Seeing a site like this usually makes me think "I'm so sick of Flash," but it's not Flash and because of this automatically feels 10 times better and more useful. Very nice work!
Wow
Beautiful job Steven.... great work.
Wowzer!
Blew me away
Leen Is Sexy!!!!
Leen really blew me away! She is beautiful ;-)
I'm amazed
Hi,
Just happened on this page and I'm truly inspired. The look and feel is so much different. That gives me ideas on what I could do too. Thanks keep up the good work!
This is beautiful work
This is beautiful work Steven! Thank you :)
Hi Steven
very nice work. Cools 3D!! Thank You
Great Site
Nice site Steven. Waiting for your next design.. Cannot imagine dupal can have such design implemented.
amazing
amazing steve, can you share your knowledge about web stuff, how can i got huge rank like you got? can i know how