Tags: illustration

4

sparkline

Building the dConstruct 2015 site

I remember when I first saw Paddy’s illustration for this year’s dConstruct site, I thought “Well, that’s a design direction, but there’s no way that Graham will be able to implement all of it.” There was a tight deadline for getting the site out, and let’s face it, there was so much going on in the design that we’d just have to prioritise.

I underestimated Graham’s sheer bloody-mindedness.

At the next front-end pow-wow at Clearleft, Graham showed the dConstruct site in all its glory …in Lynx.

http://2015.dconstruct.org in Lynx.

I love that. Even with the focus on the gorgeous illustration and futuristic atmosphere of the design, Graham took the time to think about the absolute basics: marking up the content in a logical structured way. Everything after that—the imagery, the fonts, the skewed style—all of it was built on a solid foundation.

One site, two browsers.

It would’ve been easy to go crazy with the fonts and images, but Graham made sure to optimise everything to within an inch of its life. The biggest bottleneck comes from a third party provider—the map tiles and associated JavaScript …so that’s loaded in after the initial content is loaded. It turns out that the site build was a matter of prioritisation after all.

http://2015.dconstruct.org/

There’s plenty of CSS trickery going on: transforms, transitions, and opacity. But for the icing on the cake, Graham reached for canvas and programmed space elevator traffic with randomly seeded velocity and size.

Oh, and of course it’s all responsive.

So, putting that all together…

The dConstruct 2015 site is gorgeous, semantic, responsive, and performant. Conventional wisdom dictates that you have to choose, but this little site—built on a really tight schedule—shows otherwise.

One hundred and seven

The word “awesome” is over-used. I’m about to over-use it some more.

The internet is mostly awesome. Some human beings are also awesome. When you combine the two, you get awesome things. Here are just two such awesome things:

  1. Anton Peck is a brilliant illustrator. He’s currently executing a project called 100 Little Robots. Anton will craft postcards for 100 people, each postcard displaying a unique hand-drawn robot. If you want to be one of those 100 people, order your robot card now. I got mine and it is, well …awesome.
  2. James Bridle is a brilliant writer. He just finished a series of articles called Seven posts about the future. Read them all. Seriously. They are all wonderful and the final story reads like a Nerdpunk copulation of Salman Rushdie and William Gibson.

Awesome.

A drawing of a robot

Understanding Huffduffer

Take a look at the line-up and schedule for UX London next May. It’s going to be fan-bloody-tastic.

I’m particularly excited about seeing Scott McCloud. When Kai found out that I had never read , he very kindly sent me a copy. Now I understand what all the fuss is about. It’s a superb book and extremely relevant to interaction design …hence my excitement about Scott McCloud’s appearance at UX London.

Before reading Understanding Comics, the only Scott McCloud work I had seen was . It was quite an achievement—there’s no way I would have read through forty pages of documentation for a web browser if it weren’t for the format it was in. It convinced me that comics could be a very powerful way of communicating online (just ask the CSS Squirrel).

Speaking of online comics, if you don’t think 2D Goggles is one of the best things on the web, your geek credentials are hereby revoked. Oh, and if you’ve never read The Spiders, do yourself a favour and track it down.

When Brad Colbow approached me about reformatting my post Misunderstanding Markup into an online comic, I thought it was a great idea—an excellent way of spreading the message of the post in a more enjoyable format. I didn’t expect the finished result to be quite so excellent. It was a smash hit. Scott McCloud liked it too.

I asked Brad if he could help me out with something else. For a while now, I’ve wanted to do something with the “about” page on Huffduffer. Don’t get me wrong; I think the copy is pretty good. It’s just a little …flat. I thought that illustrations would really help to bring it to life. Brad very kindly agreed.

We discussed various ideas. There were two possible narrative strands: we could use the wartime story of or we could choose a more literal but abstract approach in explaining how the site works. Brad came up with some sketches for both and they were so good, I just couldn’t decide between them. So we opted to go with a kind of split-screen parallel story.

The finished results exceeded my expectations. Brad’s ability to come up creative solutions is matched only by his ability to execute them brilliantly.

Don’t take my word for it. Take a look at the final result for yourself.

Comical

I’ve been turned into a caricature. Again.

First there was my Happy Webby, now it’s Smashing Magazine (and that’s not even counting CSS Squirrel).

Happy Webby illustration by Brad Colbow

The very talented Brad Colbow created a comic version of my post Misunderstanding Markup. Not a bad likeness, eh? Mind you, I think Eva-Lotta Lamm really managed to capture my essence at dConstruct last year.

Jeremy Keith @ d.construct 2008: The System of the World

There’s no denying it; I’m much more likely to read something from start to finish when it’s in comic form. Scott McCloud’s Google Chrome comic is the perfect example—it’s unlikely that I would have read the entire technical documentation for a web browser if it hadn’t been presented as . Now take a look at the “about” page on Huffduffer—wouldn’t you be more likely to digest that content if it were illustrated?