Inspire header

how we made a conference website

By Bram van Rijen, former Creative Director at Mangrove
T

To keep up with all the developments in our industry we attend a lot of conferences. And we even speak there sometimes. So when we got the chance to help an incredible event held in Holland, we didn’t hesitate. Robert Eerhart is organizing an event called Ready to Inspire, featuring the absolute top notch of our industry, including the likes of Jeffrey Zeldman, Simon Collison and Cindy Chastain. And we offered him to give the event an online identity.

The cool thing was that this time we we’re given carte blanche. So we decided to do something different. Something that would stand out and make you smile. And, of course, give you a good idea of what to expect during the event.

Illustration

We wanted to create a nice metaphor to express the theme of the event: craftsmanship. And what better way to illustrate that with the noble art of woodcutting? So we could have chosen a beaver, but went for the lumberjack instead.

Since I’m an illustrator myself, we could do the visuals in-house and really stretch the way those visuals would be used in the website. We didn’t just want to make a boring, static header. We wanted the site AND the illustrations to become fully responsive.

Responsive Design

As this is a web design conference aimed at web designers, we took the freedom to use CSS3 code that is unsupported by older browsers. We decided to make the website as responsive as possible (in the short time frame, a small week).

To be able to do this, code and visuals had to be developed simultaneously. For example, Ruben who coded the website, asked to keep the illustrations in separate layers so he could do awesome stuff with CSS. If you resize the browser, trees start sliding passed each other, the lumberjack starts moving and parts of the illustration appear or disappear depending on what suits the screen size best. Apart from the header, we also made the speaker list and the location fully responsive.

As an experiment we didn’t only work on a horizontally responsive design, but also vertically. We wanted the header illustration to be large on big screens, but not get in the way on smaller screens. If you’re using a webkit browser on your 13” laptop or tablet the illustration will resize to suit your screen resolution.

Look & feel

The illustrations were the basis of the look & feel of all the design elements used in the site. This combination of graphical elements and illustrations make the website really stand out and all the elements feel connected in their common visual concept: wood. Or, more specifically: woodcutting.

Creating the visuals

All of my illustrations start on paper. This is how it evolves from there into a the final design:

  1. First it’s trying to get a global sense of the layout: what goes where? This is mostly really rough stuff. Done in pencil.
  2.  A more detailed sketch of how all the elements are interacting. Also done in pencil.
  3. Inking: turning the pencil drawing into a final ink-version. This is done with a Pentell fineliner.
  4. Scanning: I scan all the drawings in black and white at 600 DPI.
  5. Corrections: find and erase all the little mistakes I made
  6. Coloring in Photoshop: in this specific style no outlines are used, so I have to color all the lines and make solid shapes out of ‘em. That takes some time.
  7. Special effects: creating shades and textures
  8. Deliver: in this case I made sure the front-enders would be able to extract every separate element from the illustration to create the parallax effects and make it fully responsive.

Below you can see how the initial sketch developed into the final design. Hope you like it and don’t forget to get your tickets for Inspire Conference 2012

The first rough sketch

Some more detail

The different steps from inking to final

The actual header

Lees nu dit
Search Terms Report