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

Welcome to the World of Tomorrow!

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

The header image is a regular illustration file (which is 100% manual vector work) and the content is typical HTML/CSS. However there is a twist: the perspective from the header is continued into the content with some simple 3D decorations, created on-demand with Canvas tags and JavaScript (highlight canvases, check out the footer).

While this perspective works perfectly near the top, the further down you go, the more vertically stretched the shapes get and it ends up looking weird. To compromise, the projection actually gets more and more isometric the further down you go. This creates an interesting effect when scrolling down.

The design also uses various CSS3 methods (@font-face, text-shadow, box-shadow) throughout, and uses sIFR 3 as a fallback for the headline font. Unfortunately CSS3 is still mostly unsupported in the browserscape, so only Safari 3.1 users get the luxury combo of pretty, fast and no Flash. Everyone else will have to suffer through hacks.

As a total surprise, the canvas-rocket-science trickery even works in IE6 thanks to Google's ExplorerCanvas library.

I'll probably be tweaking it a bit more in the days to come, but feedback is appreciated.

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.

Design presentation slides

I did my OSCMS talk Designer eye for the geek guy today. My main plan for this talk was to blast as much basic graphical design concepts into people's heads as possible and sort of teach some of the principles, vocabulary and methods that a lot of designers take for granted.

The response was great as far as I could tell. I also got the inevitable "How do we deal with Internet Explorer?" spin-off discussion in the questions round at the end ;).

Steven Peck recorded my session on video.

You can download the slides as PDF (36.5 MB), though because of all the graphics it's quite large. I think some sections will not be clear at all without the spoken explanation to go along with it though.

Announcing.... ComicJuice!

I'm proud to announce the start of ComicJuice, a web 2.0 social mashup tool that lets you create comics in your browser and share them with others.

Update: Now with Internet Explorer support! Thanks to Google's ExplorerCanvas. Viewing comics works in IE6 and 7, while editing still requires IE7.

The crazy part is that I started working on this only friday evening (that's 4 days ago). Once I had the initial idea and a rough plan, I simply couldn't not code it.

A lot of jQuery and JavaScript later, with some <canvas> wizardry (boy is that thing inconsistent across browsers), we have a fully-fledged comic creator. The best part is that all of it is rendered client-side, so no actual images need to be generated. To display a comic, we use the same code as the editing interface. The down-side is that it doesn't work in IE, but I've been thinking about maybe doing a rough canvas emulation. We'll see. For now, the latest versions of Safari, Firefox and Opera have been tested and work well.

You can also embed comics with iframes, and copy/pastable code is provided. Like this lame example:

(No longer available)

I figured a Web 2.0 mash-up would not be complete without a fitting design to go in, so I designed icons, sliders and toolbars for the editor, as well as a theme for the website. The theme is a Garland knock-off: I guess I'm proving myself wrong that it's a bad base theme. It's actually quite good as it has fluid/fixed 1-3 column layouts in it.

I'm curious to see if ComicJuice takes off and what people do with it. It was a blast to code in any case. Check it out.

Drupal's Designer Future

In the past months I've been doing a lot more graphical design, and it's caused me to think about how it relates to Drupal. This prompted me to write a rather long blog piece with some insights and a call to action. If you are interested in the future of Drupal, please read on.

The trigger was that I noticed that I'm getting less and less motivated to do graphics work for Drupal. It's not that I don't like design... I loved designing and building that LeuvenSpeelt.be site last month for example. But when it comes to Drupal graphics, the personal reward that I feel from doing it doesn't seem proportional to the effort I put in. This includes designing little banners for the Drupal.org spotlight, doing a t-shirt, making ad buttons, doing the association theme and more.

The most recent big example was the Garland theme. When Stefan Nagtegaal showed a work-in-progress version of his 'Themetastic' theme (as it was then called) in September, I was instantly charmed and knew that this was our new default theme in the making and said so clearly.

Many others were not convinced though and hammered on details, even though the basic design for the theme was rock solid. Some were not convinced of the theme's potential, or simply didn't see that we needed a theme that was graphically smashing rather than a good base to develop on.

At that point, I essentially said "screw the community, this is going to be our default theme" and started refining the theme so it was perfect for core. This took several weeks.

Until then, the rest of the community put its eggs in the wrong baskets and got a lot of useless design-by-committee done. These designs, which were in my opinion mediocre at best, were being pushed for inclusion. This may sound a bit harsh, but I honestly believe that if the most popular candidate theme, Deliciously Zen, had become the new default core theme, we'd have been ridiculed for still not 'getting' design after 6 years and Drupal 5 would not have been such a big release. Just like 4.7, most people would not stick to Drupal long enough to discover how good it is.

Now, when the Garland theme was finally done, everyone suddenly changed their opinion and congratulated the community on its excellent work. I have to admit this hit a nerve, especially after I'd been spending countless days and nights the two weeks before fixing annoying IE rendering bugs, redoing the CSS layout and adding a whole new layer of Glitz und Glanz to Drupal core.

Only three people did serious work on what became the Garland theme: Stefan Nagtegaal did the original design from scratch and worked with Adrian Rossouw to come up with a proof-of-concept of the recolorable theme. I wrote the color picker, improved the theme and coded what became the color.module based on Adrian's stuff.

Only a handful of people helped with testing of the theme during its development and only after the main theme was finished — most of the bugs were in the recoloring mechanism. How can such a vital piece of Drupal 5 have only have 3 serious contributors, when the whole release had almost 500 people submitting patches?

To me, this shows that we have a problem in the Drupal community, or rather a knowledge void. Not enough Drupal people are savvy enough about theming and design to help out with even small tasks (like a banner) or even give quality tips and feedback on other work. The result is that theming and design receives little attention. Most contributed themes and sites could look a lot better, if they just themed it some more. And getting patches into core that give the defaults a little more oomph is tough, as they are often considered to be useless embellishments.

Still, ever since Drupal started, there has been the recurring cry of doing more to attract great designers to the platform. The overall effects of this have been minimal. However, something similar did happen before.

Before Drupal 4.0 was released, the focus was mainly on features and Drupal was a highly experimental project. After a while, as more people started using it, many users complained that Drupal was too hard or confusing to use. Because of this, 4.0 was the first of many releases that contained significant usability improvements, in this case in the administration area. Many small and large usability features were added. With the menu system and tabs having been added to core by Drupal 4.5, even contributed modules started using the same UI concepts as core. Drupal's UI ended up much more consistent across configurations and it became easier to learn and document. Now with Drupal 5.0, we have undoubtedly produced the most usable release yet.

How did this happen? Over the years, the idea has popped up many times to bring usability experts on board to do a review, and the hope has lived that a usability expert or two will magically pop up in the community and solve all our problems (sound familiar?). Neither has happened so far.

What did happen is that usability became a big priority for the project, and as a result, many people started educating themselves about it. The community quickly identified those in its ranks knowledgable about usability and listened to their advice. Soon, big UI gurus were being quoted on the mailing lists and "-1 isn't usable" became a valid reason to dismiss a feature. Sure, this process took time, but it definitely happened. Plus, the combined usability knowledge and effort of the community, though individually not at expert level, had a much larger effect in the long run than any single expert could have.

The same needs to happen for design. For years now, the Drupal community has been hoping for a group of prodigy designers to magically appear and design a set of jaw dropping themes and UI. They have not shown up. Talking and maintaining a high quality of design across Drupal still often feels like swimming upstream, because most community members don't care much for design unless it is delivered in front of their noses on a silver platter. For many, design is still something to only be enjoyed, not something to be created.

Now, I really want to see this change. For one thing, the shortage of design talent means Drupal is generally perceived to be ugly. It's quite demotivating, because we put a lot of time into it. Unfortunately people illogically, but consistently, assume a relation between how something looks and how good it is built. With Drupal 5 we've done a lot to improve this, but we could still do a lot better. Drupal is no OS X (yet).

For another, when only a handful people are always doing the same jobs, the passion tends to slip out and the challenge becomes a chore. I honestly have no ideas left for a spotlight banner at the moment. That's why the scalability banner is so mind-numbingly boring, though I made plenty of cool ones before.

This is also why I'm holding that OSCMS talk about design this month: I want more people to realize that if your site and/or module is ugly, people aren't going to like it or use it. It's as simple as that. If you mess up something as basic as text formatting, your message simply doesn't get through (hello MySpace users). The only way to change that is to put in the effort to make things look clean and nice. Nice products and nice sites tend to cause happy, dedicated and long-term users.

The community not only needs to realize this, but also needs to teach itself the knowledge and skill to do something about it. Drupal has infinite potential, but it only goes where the community takes it. If the majority remains allergic to design and graphics, very little will change and only at a glacial pace.

Children of Men Fake Media

I got linked this video, which contains all the fake media created for the movie 'Children of Men' (see my earlier post).

Aside from sci-fi geek fun, I loved watching them to analyse the graphical designs they used. One of the subjects I'll be talking about in my OSCMS talk about design is branding and style. If you're going to attend, here's a great opportunity to do your homework.

Having an eye for graphical design is as important as creative skill, but luckily you can train on this. Each of these ads or clips has a different look tailored towards the product and its audience. Look at the graphical elements, such as images, colors, typography and animation and try to figure out why it's appropriate and effective. There's also some public signage in there which has a style of its own.

If you have some time, a good trick is to take a particular design, look at it for a couple minutes, then try to reproduce it in a graphical program like Photoshop or Illustrator. When you're done, compare your version with the original, and try to figure out what you did different and whether this makes it better or worse. Look for qualities like readability, alignment, typography, contrast and aesthetics. The ones in the movie are probably a bit too graphical each, but you can do this for logos or web sites too.

The clips can be viewed in QuickTime and were done by London-based design studio Foreign Office.

Tip: you can slowly move forwards or backwards in a QuickTime video by scrolling up/down.

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).

OSCMS Talk: Designer Eye for the Geek Guy/Gal

Update: I've posted the presentation slides and a video is available as well.

I'll be attending the OSCMS conference in Sunnyvale CA at Yahoo next month. Aside from a repeat of my DrupalCon jQuery talk, (though with a bit more examples) I just submitted another proposal for a talk. It's something that I've wanted to do for a while now:

In meetings and lectures across the globe, people are made to endure hideous presentation slides featuring some of the wildest colors, clip art and typography. Many websites are so confusingly laid out, that you get dizzy from the overload of boxes, images or links. And every day, people receive resumés, invoices and ads ... *cue lightning and thunder* set in the Comic Sans font.

It's enough to make the average designer's hair turn blue, fall out, morph into a ninja and stab him/her in the eyes.

But, all hope is not lost! Contrary to popular belief, graphical design is not some arcane voodoo magic, but a straightforward discipline that values experience, reusability, elegance and good tools just like programming. Just like code, there are plenty of objective ways to measure the quality of a design. However, just like art is subjective, so may two programmers disagree on which implementation is the best. No designer is born with a genetic sense of proportion... it's just that while you were busy writing BASIC code on your C64, they were busy drawing superheroes.

I myself am an engineering geek who's never had any sort of formal design or art training, but has earned the title of "design nazi" on numerous occasions.

This session will teach geeks some basic principles about graphical design (especially on the web), from a geek perspective. This means we won't talk about "visually balanced design" but "here's a good approach to spacing". Soon, you'll be hearing the oooh's and aaah's when you don your designer hat.

You can vote on the session page if you're interested.

Wordpress.com copies Drupal theme

I just found out that Wordpress.com has launched a port of the Drupal Garland theme for their users. It didn't take long for some questions to rise up, so I'd like to clear up my side of the story.

I received a mail about a month ago by Bryan Veloso at Automattic where he praised the theme and was asking for permission to port it to Wordpress for Wordpress.com.

I replied with the clear fact that the theme is technically GPL'd and thus only subject to the restrictions in that license, but that there were a variety of other factors to consider:

The Garland theme is the result of a concentrated effort of a few dedicated Drupal folks to make a new default theme for the upcoming Drupal 5. Drupal has always been better on the technical side than the design side, and this is an important step to get rid of our 'clunky geek software' image.

We'd also like to use it to establish a better Drupal branding. The default Garland look is very blue and matches our visual identity. However, the recoloring feature of Garland ensures that people aren't stuck with all blues, and can change everything to match their tastes. So, more Drupal sites will now stick to using the default (Garland) theme. If website visitors keep seeing the same design on multiple sites, they might start to wonder why that is and what CMS is running behind it. This is especially important because, unlike Wordpress, our themes are typically built to be used both for the front-end and back-end (there really is no hard distinction).

From this point of view, if Wordpress or Wordpress.com were to make the Garland theme available, it would be a direct hit to our goals, especially because it's going to take us a couple of weeks to get our final Drupal 5.0 release out the door and really get the buzz flowing. And then, weeks or even months to see the spread of Garland-themed Drupal sites. (emphasis added for clarity)

I never got a reply or any sort of news about it, until Gerhard pasted me the link to the Wordpress.com announcement. My immediate reaction was disappointment. If Wordpress.com serves up Garland before we do, all hope of promoting it as an original Drupal style is pretty much flushed down the drain.

I'm also disappointed that they did such a poor job: Elements are missing or badly styled, the positioning and spacing is off too and they didn't even credit Stefan Nagtegaal in the footer.

Of course, technically, Wordpress.com didn't do anything wrong. But the fact that they asked first, and then still copied it and released it early feels like a stab in the back for me.

New Design for Acko.net

If you're not reading this through an aggregator, you will have already noticed: I've redesigned my website.

The last theme lasted about 2.5 years, so it was time for something new and fresh.

Now, I don't know about you, but honestly I'm a bit tired of all the pastelly rounded corners and soft shadows that are all the rage today. Sure, it looks nice and neutral, but I'd prefer something with a little more oomph. So, after a day of fun with vectors tools, a highly saturated color palette and some browser-fighting, my geometric theme (uncreatively called Acko8) is completed.

The result is, as you'd expect, tableless and semantic XHTML/CSS. The theme should work from 800x600 up without scrolling (though at higher resolutions, more eye candy sticks out on the sides). Whether it is aesthetically pleasing depends of course on your own tastes. But I sure love the way it turned out!

What's cool is that I specifically crafted the underlying CSS skeleton to allow images to 'break out' of the text flow. The previous design tried this as well, but had several nasty issues with it. The effect is quite nice.

Aside from the looks I already reorganised the site a bit. The front door page was removed in favor of a more direct approach. I put my side projects a bit more in the spotlight as well. Finally, I emphasised the personal aspect, with a clear explanation of the site's purpose in the upper-right corner on every page.

Comments welcome!