Noir meets web

After 4 years of LeuvenSpeelt.be aka the Interfacultair Theaterfestival at my old university, the organisers are calling it quits. I was their resident web monkey, and designed a new site and poster every year. I always saw these designs as an opportunity to explore unconventional web design, as the sites were low on content and high on marketing — essentially being fancy brochures with a news feed.

With a track record of originality, I figured we should end it in style, so I whipped up a new page which explains the reasons for quitting (i.e. the politics) and highlights the work done with a timeline and some photos.

I wanted the reader to get a sense of ambiguity and dread that comes with ending big projects, so for inspiration I looked to Film Noir, known for its mystery and shady morals. The scene is meant to look like the desk of the typical private detective, who is trying to make sense of a case.

The end result was pretty close to how I imagined it, though the limitations of the web as a medium required me to tone down the contrast quite a bit for readability. This makes it lose some of the noir-ness, but overall the cohesion of the piece is still right. Because it's just a good-bye page, it probably won't get as much exposure as the previous editions, but it's the thought that counts.

I think it's a fitting end to a project that, more than anything else, has taught me about graphical design and style.

Tools used: 3D Studio Max (with Mental Ray), Photoshop, TextMate

Poster design for Interfacultair Theaterfestival 2008

The design is meant to look like the cover of a board game box and accompanies the web site's design.

Because there are too many serious websites around

I finished designing and building this year's edition of LeuvenSpeelt.be, a site that promotes student theater at my old university. You can read about the background in my previous blog posts.

The site is a simple Drupal installation with heavy content and theme work. The design is heavy on graphics and built as an experimental semi-fluid layout that adapts to different screen resolutions. Peripheral design elements are shifted in or out of the browser frame to make more space for content as needed.

Tools used: Photoshop, Illustrator, 3D Studio Max, TextMate. Uses the beautiful Fontin font available freely from Jos Buivenga's exljbris foundry.

And no, no easter eggs this year.

Poster for Interfacultair Theaterfestival done

I just finished designing the poster for this year's theaterfestival at my ex-university. I already blogged about the websites for the event which I made.

The poster follows the same carnival theme as the website and reuses several elements from the 3D scene. It's rendered in a flatter composition and looks more like a mini-tent or puppet show.

The challenge every year is finding an aesthetic way of cramming the information for up to 8 events on a single poster. The festival's branding is important (which explains the large title and website address), but these posters are going to be used for over 2 months. So, I chose to focus the design around the dangling labels for the events, with the floating ducks as decoration. In Belgium at least, there is a game at fairs where kids have to fish out rubber ducks from a steady stream using a small fishing rod, so it's a recognizable setting.

The 3D render was exported to a PNG and decorated in Illustrator. All the text and print on the design is vector art, so it will print crisply. For the 3D rendering, it is unpractical to go beyond 250 dpi as it takes too much time and memory to produce the image. Still, 250 dpi is sufficient for posters like this, as the final print will be 70 x 50 cm large (7000x5000 pixels @ 254 dpi).

I made an effort to paint and collect high quality textures for all the objects, so there is plenty of detail to look at up close. Every element looks realistic. Check out this high resolution version (3.5 MB) to see. The final PDF however is 2.5x more detailed, even.

More info about the event can found in this blog entry, or on the event's website (if you read Dutch).

LeuvenSpeelt another year

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.

Leuvenspeelt.be: Theater and Drupal

Every year at my university, various student organisations perform one or more plays on stage. Though these are very small productions, they always manage to attract a good audience from the local student population. To give these individual groups a better chance, some friends of mine are organising a theaterfestival. It bundles the individual efforts in a nice event to provide more visibility and helps out with logistics and funding.

Obviously there needs to be a website to go along with this. I was asked to make it, so this year I decided to build it with Drupal.

The reason is that, aside from serving as a brochure for the event, the website needs to lobby to improve the state of theater at our university. For example, there is no dedicated theater for performing plays. The board has promised to look into this, but so far nothing concrete has happened. The students want to see change, so to provide more visibility to these issues, a theater blog has been started. It will keep its finger on the pulse of theater at and around our university and foster discussion.

So, a plain set up of Drupal? Not exactly. Part of the festival's charm and success is a witty style and branding. This year's poster, which I also designed, looks like this:

To carry this look over to the website, I had to design a fancy PHPTemplate theme to accommodate. The result is heavy on graphics and has a dash of Javascript. No AJAX though ;).

The website is in Dutch, but if you want to take a look (and hunt for some funny easter eggs), it can be found at LeuvenSpeelt.be.