Designing the dConstruct 2007 website

To say we at Clearleft are busy at the moment would be somewhat of an understatement. There’s only a handful of us in the office, but we’re so busy that we’ve recently had to take on a studio manager to keep track of just how busy we are. Sophie started last week. I’ve checked with her, and it seems I was right: we are busy.

Which, in retrospect, is why deciding to create four seperate designs for this year’s dConstruct conference website was possibly a foolish decision. Nevertheless, now that it’s complete and live, it’s a one that I’m glad we made, and I’m very proud of the result.

This year’s conference is about the process of Designing the User Experience, and I tried to illustrate that process with the concept for the website. We obviously wanted to retain the branding that has been built up over the last two years, so I re-used the same basic layout from last year’s site. But this year, instead of presenting one finished design the site will evolve in the lead-up to the conference. We launched it last week with a sketchy wireframe look. Next month some illustrated design ideas will get added, followed by a rough design, and as the big day approaches the site design will become complete.

The audience for the site consists largely of web designers, so hopefully the self-referential concept will be appreciated. At the very least, the unfinished look should definitely be “different” and possibly unexpected! I hope you enjoy it.

This wasn’t the first concept for the site. I was originally tentatively playing around with a technique I came up with a while ago, which uses basic CSS and HTML to create quite an unusual visual effect. Most people who saw it were intrigued as to how it worked, or indeed what exactly was going on. Unfortunately this made us realise that it was causing more of a distraction than it was providing anything of real value. Whilst that would be fine on some sites, it wouldn’t be appropriate on a site about usability! I won’t put the details here just yet, but I do plan to use it when I finally get around to designing this blog (sometime soon).
From the point of view of the web designer, the process of creating the new dConstruct site was quite a breath of fresh air. I enjoyed getting to work with a pencil and paper and taking photos of Post-Its and their shadows. I wrote and scanned fake notes to myself, deliberately spilt some old coffee on our new desks (don’t tell the boss!), and smeared a licked thumb across my pad to create some horrible pencil-smudges. It was a nice change from the rounded corners and reflections seen all to often these days.

However, while the site may look unfinished, there’s still a lot going on under the hood. The markup is semantically correct, the CSS valid even though in places it deliberately makes the layout look slightly broken. Although I hate the additional bugfixing which often accompanies it, the width is semi-liquid, with elements spreading to a comfortable max-width when you resize the browser. Jeremy was right to convince me that the extra work would be worth it for the satisfaction when the end result works so well. Naturally, the text scales without breaking the design. And, thanks to Rich’s PHP wizardry and progressive enhancement, the secret hidden Easter-egg doesn’t rely on Javascript to work.

Oops… did I say something I shouldn’t have? Ok, forget you read that last sentence. And if anyone asks, I was never here.

I will be at dConstruct in Brighton on 7th September, and I hope you will be too.

(Andy has written much more about the conference itself, which looks like it’ll be the best ever!)

http://2007.dconstruct.org/

2 thoughts on “Designing the dConstruct 2007 website

  1. Really great as usual! Haven’t found the easter egg yet , but like the :focus states (I’ve gone TAB happy recently).

  2. Thanks James :-) The dConstruct easter egg has now been revealed publicly anyway. As the months have passed the final design has been revealed in stages, and when you click on the stages in the timeline at the top you can flip back and forth between designs. A nice surprise to the user experience of those lucky enough to come across it! Enjoy!

Comments are closed.