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

Recently, the Belgian anti-cancer charity Kom op Tegen Kanker launched a new campaign, and used Drupal to create the website, LaatWatZien.be. While it is nice to see such a high profile site use Drupal, generally the site is not as nice as it could be, especially in the design department. This is quite a missed opportunity for a campaign in general, as well as surprising, given the number of large media companies involved.

Still, complaining doesn't get you much, so I decided to do a constructive design review of the LaatWatZien front page, and not only point out problems but also suggestions to fix them.

And because I recently started evangelising design in Drupal, I've made the PDF available for others to see and maybe learn from. I'll be forwarding this to the web masters as well, obviously.

Making such a review is easy if the you have the right tools. On Mac, I do the following:

1. Using Paparazzi! (open-source), take a PNG screenshot of the entire page.
2. Open the PNG in Apple's Preview.app, then save to a PDF. This enables the various PDF annotation features.
3. Using the text box and oval tool, annotate the document, and save it.

The only downside is that the Preview.app interface is a bit spartan and that you cannot edit your notes after saving them. Still, it's easy and relies only on readily available tools.

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.

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.

Note: Updated to work on IE6.

Dries pointed me to a nifty article which shows how to add rounded corners dynamically through JavaScript, without requiring images.

While the idea is cool, the implementation was rather limited, as the corners still had to be specified in CSS by hand.

So I modified it so the widths are calculated in the JavaScript instead. It now accepts any radius parameter and even allows elliptic corners. And once I got this far, well, adding anti-aliasing was really the obvious next step ;). So now we've got dynamic, anti-aliased and flexible corners.

The code is not very optimized, but then I've never done a real rasterizer before, and Javascript isn't the best of languages for stuff like this.

Unfortunately there's still a weird bug in the pixel coverage calculation (see nifty.js), but it's hardly noticable. If anyone figures out why, let me know.

Feel free to use this in any way you want, though please give credit where credit is due.

At FOSDEM I gave a presentation about Theme Development for the Drupal Conference in the Drupal developer's room. You can take a look at the slides. The topics I covered are:

• Overview of the Drupal theme system
• Making the FriendsElectric theme
• Clean, semantic XHTML/CSS
• Some examples of sexy Drupal sites

The presentation was filmed, the video is available through BitTorrent. For info on how to play the Ogg Theora files, check these instructions.

The other presentations are linked on drupal.org.

Read on for some useful links related to Drupal theming.