Drupal can be pretty!

By Steven on 19 Feb 2007 at 11:51 UTC

I recently finished renewing the website for a local event (a theater festival) at my ex-university. The site serves as brochure and blog around the event. Because the festival is mostly a promotional thing, a lot of work was put into the style and branding for each year's edition.

This year's design is centered around a 1930's carnival. The site is entirely powered by Drupal and uses a PHPTemplate theme with a CSS based layout that's heavy on images. There is also some JavaScript to make the ticket act like a real ticket (with punch holes and serial numbers) and 2 funny easter eggs hidden around the site.

The site features all the typical Drupal bells and whistles, like clean URLs. Every year, I clone the current site into another multi-site instance, run under a path with year the in it (/2005, /2006). The main site switches themes, while all the content is updated. The existing paths have the year in it already, so they don't change.

Whenever people ask me why all Drupal sites seem to look boxy and bland, I show them the sites for this event. Both this year's and last year's site are entirely Drupal powered. You do not need voodoo magic to pull this off, just a lot of effort into the theming and HTML/CSS.

Check out my blog entry about the site for more info or take a look yourself (also last year's edition). The site's content is in Dutch though.

Comments

Woha!

Chill35 commented 19 February 2007 at 12:43

Indeed the punched card that becomes part of the navigation menu is a thing of beauty. You would never guess that Drupal is behind the curtain. Not only a designer's object of proud, but really serves its purpose.

Congratulation Steven,

Caroline
Who am I | Where are we
11 heavens

Title of article says it all

treksler commented 20 February 2007 at 17:29

Title of article says it all really
Drupal can be pretty ... but most of the time it isn't :(

...

sepeck commented 20 February 2007 at 18:14

Certainly not the fault of the entity known as Drupal. Web design is challenging and the best designs match and compliment the content and the architecture of the site it helps present.

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide -|- Black Mountain}

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide}

can't blame drupal

drupal-is-OK commented 27 February 2007 at 20:57

I agree. With CSS you can't really blame drupal for a designer's lack of creativity. BTW, that site creator could make a fortune selling themes.

thomas blog

Very cool

dman commented 19 February 2007 at 13:56

I love the punches on the visited links.
Very intuative!

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

Wow!

RdN commented 19 February 2007 at 14:16

That is impressive, it is great to see a different metaphor used for web design, wish I understood Dutch :)

pretty?

pasqualle

🇭🇺 Budapest

commented 19 February 2007 at 16:43

it is magic drupal!

can we change the default garland theme to this one?

i like the poker table from 2005..

Thats a really nice site!

nicholasthompson

English

commented 19 February 2007 at 16:57

I'm trying to get involved with theming as it tends to look a little "lazy" if you just put a site live using a template. The two designs I'm currently most please with (of my own) are:
http://www.thingy-ma-jig.co.uk/
http://kasha.therapper.co.uk/

At Electric Word plc we've just relaunched http://www.pponline.co.uk as a Drupal - however we need to redo the theme as its a little 90's looking. We've also launched:
http://www.teachingexpertise.com/
and
http://www.sportbusiness.com/

All as Drupal sites - but none as "revolutionary" looking as that site - I'd never have guessed it was drupal - even the /user page looks fairly non-drupalish!

Nice work.

Beautiful work. I think this

notarealperson commented 19 February 2007 at 19:40

Beautiful work. I think this kind of thing really helps Drupal in the sense that Drupal doesn't need to have any visual associations - it is a powerful backend, first and foremost.

It's a nice simple design. I

philipk commented 19 February 2007 at 21:23

It's a nice simple design.

I like: www.fuk.co.uk

Have a look!

nicely done steven.

vm commented 19 February 2007 at 21:28

nicely done steven. Congratulations.

Mystery meets navigation =P

sigveio commented 19 February 2007 at 22:30

This years version is alright, index looks good. Good work. :)

Personally I do not like last years version at all though, classic 'mystery meets navigation' which is generally a bad idea. I.e. needing to hoover over every single navigation item in order to find out its function... It's just not a good way of designing navigation imo.

As for "www.fuk.co.uk" mentioned in a comment above, not bad - but it doesnt seem to have been properly tested in above 1024x resolution - at least not after that skyscraper banner has been added... It does not look as good in 1600x1200 or above resolution. 1024x seems to be the ideal width regardless, having it fixed width could be worth considering.

Term

Steven commented 20 February 2007 at 04:27

Actually I believe the correct term is "mystery meat navigation", referring to mystery meat often found in cafeterias where you can only tell what it is by tasting it :).

I know the navigation on the front page last year was somewhat vague, but the most important parts of the navigation (about the event, and the blog) were visible and labeled. Because the site is mostly a brochure, the organisers want the visitors to have fun exploring. I felt it was an acceptable compromise in the design. Plus, the idea of going out and touching each chess piece is fun :).

--
If you have a problem, please search before posting a question.

Great site! &

1kenthomas commented 19 February 2007 at 23:17

Mijn Vlamingen zijn goed genoeg begrijpen de ' site content' te degrijpen, :), and I hope I'll make it over the pond again for part of the Festival and to pick up some more Dutch/Flemish-- and to bring some of the Ghent crowd.

The graphics and layout are indeed wonderful: some questions:

1) The most obvious use of Drupal is the blog; from the source, what else you're making use of isn't clear... so, what else is at the backend?

2) "How does using Drupal make this different that a standard 'LAMP' implementation?"

3) For the jealous: are your source files available? (Drupal is rarely "customized" or "themed" to this degree...)

4) Do you know... oh, no, I'll play the name game with my favorite Lleuvenites another time, and go back to MySQL calls.

Great site!

kwt

Cracking look

DocMartin commented 20 February 2007 at 02:32

Had quick look at the site, and indeed very impressive: a great change from the typical Drupal look (when I first looked at Drupal, I was put off partly as didn't see it would readily make site as I'd wish; used Mambo then Joomla, now having a go with Drupal).

To me, it deserves being prominent in Drupal screenshots, say.

____________________________
DocMartin and Hong Kong Outdoors

Responses

Steven commented 20 February 2007 at 04:07

1) The most obvious use of Drupal is the blog; from the source, what else you're making use of isn't clear... so, what else is at the backend?

Well as I said, the multi-site feature is great for maintaining every edition's separate site. And every page on the site is Drupal powered, which means it's easy to make changes. Drupal also allows me to insert markup automatically. For example, the smallcaps at the beginning of every paragraph on the event pages are all applied transparently. It does not clutter up the HTML in the edit page, which stays semantic.

2) "How does using Drupal make this different that a standard 'LAMP' implementation?"

It's vastly different because it takes me a fraction of the time I would need to do everything from scratch. Even on a 'simple' site like this (it really is not), you need user login, statistics, cookies, localization, themability, caching, unicode, commenting, RSS, etc.

Drupal takes care of all that. All I need to do is make the PHPTemplate and update the site content... I did not use features such as blocks or primary links for the nav because it's too custom and graphical (and isn't going to change), but it would not be impossible to make a scalable version of the menu (just a lot more work, and unnecessary for this site).

Most of the headache was getting the floating layout and links to work in IE6. It is very picky about what you can click in absolute positioned elements.

I spent a lot of work in making sure the layout scales well without becoming too wide at high resolutions. It's basically a combination of percentage offsets (relative to the page) and fixed offsets like positive or negative margins.

3) For the jealous: are your source files available? (Drupal is rarely "customized" or "themed" to this degree...)

You do not need my source files to figure out how this works. The only complex web parts are all accessible: namely the JavaScript, CSS and HTML. All the work that went into the images is a matter of 3D modelling and 2D painting: in the end, it's still only a bunch of pixels.

For example, somebody mentioned above that the '/user' page looks very different from a typical Drupal site. This is in fact an illusion: the only difference is the typography. The title, labels and colors give it an old look, but all the form elements are 100% untouched. Compare: http://drupal.org/user (when logged out) with http://leuvenspeelt.be/user .

However, I won't put up any sort of source material for work like this. Experience has taught me that there is always at least one jerk out there who thinks it's okay to steal graphical design to compensate for a lack of skill or effort. You are free to look and study, but not to copy pieces of CSS or code literally.

The only link I can share is the resource where I found the wood textures. The quality is amazing (though most textures do not tile cleanly and had to be edited):
http://www.mayang.com/textures/Wood/html/Flat%20Wood%20Textures/index.html

PS: As a Belgian abroad, I ask you to not use "Flemish" to refer to the language of North Belgium. For one thing, it's actually linguistically incorrect (Wikipedia can tell you all about it), but more importantly: nobody ever gets it right. I've heard the weirdest suggestions (that we speak some bizarro version of of German even), but I don't think I've ever heard anyone say "Belgium. Oh, so do you speak Dutch or French?" here in Vancouver :P. Let's keep the confusion to a minimum.

--
If you have a problem, please search before posting a question.

Steven, Thanks for the great

1kenthomas commented 20 February 2007 at 04:55

Steven,

Thanks for the great answers-- I was sort of asking leading questions, and wanted to hear how you saw and approached the design. (I'll likely wind up using this as whitepaper example, if I ever get the time free).

Re: source: again, I was more interested in the Drupal integration process than your (wonderful) design, graphics and textures, ie, the templates and anything they may call. A good deal of this, yes, can be seen from the HTML output, but a great deal cannot.

Re: (OT:) language: my 'Flemish' friends seem quite proud of the dialects, and tend to refer to their language as such (and 'Dutch' as something different). Wikipedia's (and your) explanation noted: "However, using Flemish to refer to a specific dialectic language may be confusing as there are many different Flemish dialects that are sometimes mutually incomprehensible." (Of which I'm quite aware-- I'd 'edit' the above but the link doesn't work!). I'll ask more questions when I'm next in Belgium :), and listen to the different dubbings of Pixar films a little more closely...

Check My Website

hanief84 commented 20 February 2007 at 05:10

Check My Website too and tell me what do you think of it? Vista look?

"Hello from Malaysia! ^^ "
Website: www.indiecom.net
Skype: ga1984

Background gradients

Steven commented 20 February 2007 at 05:37

Web design is about more than background gradients. Sure, you copied those from Vista, but other than that the design is very messy. The combination of black and white text is very bad for reading and the use of fluorescent yellow and green just makes it worse. Plus, the Vista look goes for clarity, yet your layout is very cramped and lacks clear, hierarchical spacing to delimit the separate portions of the site.

Sorry, but you should try coming up with something creative rather than stealing elements from another design and using them without understanding or purpose.

--
If you have a problem, please search before posting a question.

Pretty indeed

Coupon Code Swap commented 11 June 2013 at 15:50

Incredible! We know the power to create some awesome looking sites is in there with Drupal. Just takes some digging in to produce wonderful results. Site looks so cool I don't mind that I can't read any of it :)

Nice eastereggs there!

dartrax commented 20 February 2007 at 18:27

Nice eastereggs there! Especially the ghost.

www.dartrax.de

Yea, I liked the easter eggs

rcross commented 21 February 2007 at 05:03

Yea, I liked the easter eggs too! Good job

--Ryan
www.ryancross.com
www.jamescrossinc.com

--Ryan
Ryan Cross
James Cross Construction Services
Project Management Software

ghost

bertboerland commented 21 February 2007 at 10:04

me thinks the ghost is to reflect the loss of belgiums most popular linerider movie maker, drupal god and leuvenspeelt member?

--
groets
bert boerland

Great!

sun

German

Karlsruhe

commented 21 February 2007 at 01:02

Great work, Steven!

Very nice and detailed graphics, those were certainly many hours of hard work - I especially like the #flosj stuff! :)

Daniel F. Kudwien
unleashed mind

Daniel 'sun' Kudwien
makers99

Drupal is what you make it...

GripMediaDotNet commented 21 February 2007 at 21:06

We just delivered a 1500 page web site to the University of Washington for Black History month...

This was our first Drupal project and we took to it like ducks to water.

Drupal is what you make it, and it's intended to be that way. I often describe Drupal as a giant box of database and web design legos. When you open the box, it's not much... it's what you build with it that is the magic...

Here is the Drupal site we built...

http://www.blackpast.org

gripmedia.net

Excellent African American history web site!

Walt Esquivel commented 25 February 2007 at 14:23

I would never have guessed that it was run on Drupal.

As an aside, thanks for bringing us this excellent material! I particularly enjoyed reading the full text of MLK's "I have a dream." Is there any way you could, wherever possible, include the audios? Although the audio of many earlier writings are not available, I know, for example, that MLK's audio is out there somewhere.

Walt Esquivel, MBA; MA; President, Wellness Corps; Captain, USMC (Veteran)
$50 Hosting Discount Helps Projects Needing Financing

Very nice stuff! One can

terraj commented 22 February 2007 at 12:44

Very nice stuff! One can barely tell that it's a Drupal site at all!

Check my Drupal site out too if you have some time. It's a heavily modded zen theme. Actually the design existed more than a year before zen but I ported my design to zen because I preferred the way css was organised in the latter.

http://psyche.terrapolis.org

Nice work

emackn commented 22 February 2007 at 16:53

New maclife site uses drupal,

http://maclife.com/

Showcase your own site - for Dummies

heine commented 22 February 2007 at 17:09

You need to mentally insert the :rollseyes: smiley here.

If you wish to showcase your own Drupal site do so by creating a new forum post in the Drupal showcase forum (not as a reply to Steven's post).

While the forum module is allegedly underpowered, it does manage multiple threads.

edit: spelling, added a little bit in () as not to confuse some good souls.
--
The Manual | Troubleshooting FAQ | Tips for posting | How to report a security issue.

Say what? Dummies?

carnevaledesign commented 22 February 2007 at 20:43

You apparently have no clue who Steven is do you?

( mentally insert the :rollseyes: smiley here )

edit: That sounds much better. Thank you.

erm

sepeck commented 22 February 2007 at 21:46

I suspect that was for This comment one up and not Steven. Heine is the Security Team lead.

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide -|- Black Mountain}

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide}

Very nice site, Steven. Good

Anonymous (not verified) commented 26 February 2007 at 09:13

Very nice site, Steven. Good graphic metaphore. I don't think it's mistery meat as it has clear labels saying what they are 'before' you use them (and I think I grabbed their concept in spite of not being a speaker of Dutch ;) ).

I don't like very much the right side of the site when deploying content (I',m in W2K - IE6 right now). The scrolling bars are too evident (noisy?). Kinda they disagree/lower the tone of the site.

But that's just my opinion.

IE6 is broken

Steven commented 27 February 2007 at 01:36

The site does not display 100% correctly in IE6, including the border for the main content. I tried fixing this as much as possible, but IE6 is just crap.

Also, the mystery meat comment was about last year's edition I think.

--
If you have a problem, please search before posting a question.

Very happy to see a theater design

jonathanwinn commented 26 February 2007 at 15:50

Steven,

As a Drupal beginner, I am in awe of how elegant your site design is. Do I understand correctly that you're working out of Vancouver? A few years ago, some theatre artists in LA, with me at the helm, adapted Del Surjik's See Seven idea, which has been a popular theatrical mainstay in Vancouver for years. I'm currently trying to revamp our ASP website as a Drupal site. I'd like to center the content on the events, allow theater companies to post their own show information and promotions, have show listings expire on closing dates, promote discussion with forums, comments, blogs etc. But I'd like to maintain the kind of design elegance you were able to achieve. If you have any pointers for the uninitiated, I'd be very grateful.

Jonathan Winn
http://jonathanwinn.com

Come to OSCMS

Steven commented 27 February 2007 at 01:40

I do work out of Vancouver (for Bryght), but all my graphical design is strictly non professional. I plan on giving an extensive session at OSCMS about design though:

http://acko.net/blog/oscms-talk-designer-eye-for-the-geek-guy-gal

Slides will be made available afterwards.

--
If you have a problem, please search before posting a question.

I'm in beta

jonathanwinn commented 31 July 2007 at 20:45

I wasn't able to attend OSCMS, but as a full-time graphic designer, my topic would need to be something more like "geek-guy for the designer eye" anyway. I hope it went well.

My site is in beta now at http://www.PLAY7.com, and I'd love to get your comments on my showcase post: http://drupal.org/node/161810

Thanks,

Jonathan

For peer review...

Walt Esquivel commented 12 August 2007 at 14:25

...you might want to also consider this site:
http://groups.drupal.org/peer-review

Walt Esquivel, MBA; MA; President, Wellness Corps; Captain, USMC (Veteran)
$50 Hosting Discount Helps Projects Needing Financing

Beautiful Site!!!!

Drupal Dummie commented 27 February 2007 at 07:28

Hi Steven. The first thoughts that came to my mind was i want my drupal site to look that good! i am brand spanking new to drupal, and i must say i had questions as far as customizing (and i still do) but you answered the main question in my mind. i will be creating an online magazine with drupal. do you have any suggestions as far as .... anything! im new remember! i know i want it to be a little more interactive. is it possible to incorporate flash? thanks for any suggestions and thanks for the hope!

Gorgeous

jeb-1 commented 27 February 2007 at 15:03

I love the whole circus look and the punching holes in the ticket navigation concept is brilliant.

I'm still curious about how Drupal helped you. You said that it saved a lot of HTML coding - but wouldn't you get the same effect that work with PHP and a simple templating system (like Smarty)?

Also, since most of your functionality is in the javascript, (not in drupal or the database) couldn't you deploy your site as static text for super-fast load time?

e.g.

php -f index.php?q=/about > static/about
php -f index.php?q=/historia > static/historia
# etc.
# note: and to get clean urls, you can drop the .html extension if you create an .htaccess with:
# DefaultType text/html

I see there is a blog, so that makes sense to be in drupal - but i'm curious if there are any other benefits behind the scenes?

Not at all

Steven commented 27 February 2007 at 19:32

I don't think I explicitly said that Drupal saved time in the HTML department. The bulk of the work was getting the layout to work. Most of the time savings are in the things you usually don't think about, but end up taking a lot of time.

But, actually I can cite one specific example: we can leverage Drupal's text processing/filter system when writing content for the pages. This means I don't have to put in explicit paragraphs or line breaks and that I can easily apply automatic text transforms, for example the special first-word typography in last year's edition (which can not be done reliably through CSS alone). Drupal's filter system also caches these transformations for me, so there is no noticable speed hit.

In short, even for cases where I have to write custom code (e.g. the typography regexps), I can leverage Drupal's foundation so I only have to do the code that is unique to my problem. Everything else is reused. Bare bones PHP simply does not compare. I'd need to do my own clean URLs, my own storage / database handling, deal with PHP's quirks (like magic quotes), etc. And, none of it would be editable through a clean, accessible, localizable UI unless I put in weeks of work.

Of course I could scrounge together relevant snippets of code online, but even that takes time and testing. Why bother?

By the way, the site is so small that static file caching offers no benefit over normal Drupal caching (besides, you can plug-in a file based cache in Drupal core if you like to; there is a module for it even).

--
If you have a problem, please search before posting a question.

>You do not need voodoo

pamphile commented 9 March 2007 at 16:35

>You do not need voodoo magic to pull this off, just a lot of effort into the theming and HTML/CSS

Well done.
Marcel
http://www.bigvertiser.com
http://www.computingnews.com

Great Work

mrbert commented 10 March 2007 at 13:11

This design is just great.

Griffonia | Voacanga Africana

That design is absolutely

SSHGuy commented 11 March 2007 at 15:08

That design is absolutely awsome. I wonder if there is a site, that sells drupal templates like this?
________________
My SEO Blog - My Directory

see mine... I finally

tqm_z commented 13 March 2007 at 04:37

see mine...
I finally hardcoded all images inside main template file

http://www.aifa.com.my/

This is cool. Also check out

CHEETAH commented 30 April 2007 at 22:16

This is cool. Also check out http://www.stylepl.us

Wow

SimonV commented 22 May 2007 at 19:34

bnmgh

Fantastic.

Dabitch commented 23 May 2007 at 12:05

Drupal can indeed be pretty - that's a very nice design job. Kudos!

Modern Design!

nimazuk commented 1 August 2007 at 06:15

that really nice with a modern design!

N.Mehrabany
Baruzh web design & programming

Nima

nice

cush commented 1 August 2007 at 20:56

nice done design. as others said before i also don't like to have to hover each element to find its use or destination. that said you've got some nice ideas to break out of the boxed and blant monotony.

regards
cush

--
serving bits since ever!

Outstanding!

BobH-1 commented 2 August 2007 at 21:01

Along with everyone else I must say outstanding work!

Although I have been doing web development since before Netscape 1.0 I am brand new to CMS tools and looking for the best match to my needs. I am starting by looking at the home sites and the free templates and the sites they point to to get at least some sense of what they can be expected to do.

The typical initial impression I tend to see so far with Drupal is pretty drab uninteresting looks (others will certainly disagree of course - just my take). The Joomla home site gives a much better initial impression for example even though it is not really all that different.

Your site is the first to give me hope Drupal can, at least with enough effort, do good things.

BTW - I sure hope somewhere in all this there are better tools for posting content - the idea of non-programmers being told to manually embed HTML tags, and having to work pretty hard to include an image, and not being able to find spelling correction seem to me to be way out of touch with much of the rest of this paradigm.

Thanks.

Nice site

cachemony commented 20 September 2007 at 21:02

Thanks for sharing this new site design. I did not realize you could
make this type of site using just Drupal. I especially like that fact that
it is a Theatre related site, because I help a lady named Connor Snyder with her
theatre website. Ms. Snyder formally starred in the TV series MASH as
"Nurse Able." She now runs a Theatre Seminar that specializes in
Children's Plays. I would love to convert her website to something like this.
Best,
Noah

I know I am coming in way

Gman commented 23 September 2007 at 05:16

I know I am coming in way late on this, but I haven't been through the showcase in a really long time. This site is amazing. Something that a technical backend guy like me could never create. I applaud your effort. A great example of how Drupal can be dressed up.

----------
Drupal Blog
Dog Parks via Drupal

In agreement

bobaggio commented 7 October 2007 at 22:52

I agree with everything you say.

Drupal Site

mooreti@groups.drupal.org commented 24 September 2007 at 20:27

This an absolutely brilliant insight into how a Drupal site should be created. I am truly impressed! Keep up all the great work.

Mooreti

Kudos.

battlebot commented 2 October 2007 at 00:43

I have to second the notion of the "ticket hole punch" being crafty. Indeed, the design is very, very crafty. I will probably have questions for the designer after I spend time poking around the site. Very nice work.

Oh damn! That's ... wow!

CouchSurfingOri commented 4 October 2007 at 06:46

That's an awesome design and execution!
I would love to execute something that sweet. It takes a lot of thinking just to visualize drupal as something SO different.

2 thumbs up.

Have you adventured today? I probably have - read about it at: www.couchsurfingori.com