Future of Web Design 2011

Last week’s Future of Web Design conference in London was a real breath of fresh air, helping to blow away a few cobwebs that had started to gather. There were several clear themes running through many of the speakers presentations:

  • User experience
  • Responsive & mobile first design
  • Content

This was quite a contrast from last year’s event, which was all about shiny new toys like HTML5 and CSS3. The focus had shifted. To borrow from Elliot Jay Stocks presentation title and Spiderman quote: with great power comes great responsibility. Are we, as web people, going to use these tools for good – to enhance the online experience for users of the web – or will we squander our riches, making beautifully useless (virtual) artifacts…? The verdict from stage was unanimous in calling for good, for putting the user experience first.

The scope of FOWD didn’t end there though, with excellent talks on subjects ranging from business to accessibility, and inspiration and design to developing a lexicon for the web.

What follows are my (chronological) potted highlights:

We make stuff

Aarron Walter kicked off proceedings by encouraging us to take time out to work on independent projects. His motto, to have ’1,000 things on a shelf’. The aim is to cultivate creativity by getting an idea down on paper, push it as far as you can, then put it away for a rainy day. And repeat.

  1. Ideate (rapid, high volume)
  2. Incubate (step back, passively evaluate)
  3. Evaluation

Failure here is okay – you may be able to reuse the idea later. Twitter is a fantastic example of this.

Sketch > Prototype > Shelf … Refine > Fork

Designing for humans

Mike Kus reminded us that we should be creating experiences that people connect to and enjoy. He warned against the sidelining of aethetics, as it results in missed opportunities to communicate personality and brand. And suggested that visual design is as important as function.

The point that resonated most with me was: ‘don’t confuse clarity of information with getting the message across’

I felt this is an important distinction to be made – too often we distill a design down to a point where it is purely functional and no longer has any soul. At this point any chance of an emotional connection with the user is lost.

IF, THEN, ELSE

Rachel Andrew bought us designers up on our neglect of the ELSE condition – these states aren’t always so easy to illustrate on a static mock up, but if we don’t define it, then who will and what will be the result?

Keep pushing an idea

As a fellow virgo and a bit of a perfectionist, the following quote from Sarah Parmenter’s talk on designing for iOS struck a chord:

‘Perfectionism makes you your own worst enemy, prompting you to give up on a design before it matures. Keep working. Reworking. Patience.’

Something to keep in mind when curating that shelf of 1000 ideas.

Making the new everyday things

Aral Balkan delivered a whirlwind tour of experience design, highlighting how the best designed things make you feel like SUPERMAN, while the worst renders us as helpless as a baby.

You have emotional reactions to the things that you interact with: this is why it is so important to focus on UX.

And as a designer, to respond to this, it is important to stay naive.

Aral introduced the idea of affordances – these are the qualities of an object that allow an individual to easily perform an action.

‘The age of features is dead, welcome to the age of UX.’

There were numerous tips for the budding UX designer:

  • Don’t expose your systems inner complexity
  • Do simplify, don’t over-simplify
  • Be consistent
  • Use layers
  • Consider context and ergonomics
  • Respect user effort and remember what the user tells you
  • Don’t make the user repeat themselves
  • Speak human
  • Warning signs are not a design solution
  • Usable is where UX begins
  • Empathy: objects have character
  • Details are everything
  • Great design is about saying no more that saying yes
  • Don’t be mediocre, don’t be evil

Responsive web design

This was a talk that I had been looking forward to seeing ever since reading Ethan Marcotte’s A List Apart article of the same name. Ethan spoke about how he was looking a unified solution to delivering sites across multiple platforms – a design that could be deployed once and serve many devices. The result, responsive web design, which he described as consisting of three elements:

  1. Flexible grids
  2. Flexible images and media
  3. CSS3 Media queries

Ethan acknowledged how others have picked the idea up and run with it, including Hicksdesign and Carsonified. He then went on to demonstrate how responsive web design is being used in the forthcoming redesign of the Boston Globe website, dropping in a number of tips, stats and pearls of wisdom along the way:

  • Design is not just layout, there’s more to responsive web design than a flexible grid.
  • 80% of mobile access to the web is during miscellaneous downtime.
  • 84% of mobile access to the web happens at home.
  • Mobile first = content first.
  • Identify common breakpoints rather than design for every device.
  • Tools such as respond.js and responsive-images.js are useful
  • Design > Build > Fail > Refine > Repeat
  • Responsive design demands that the design and development phases of a project are cyclical, feeding into one another.

I am looking forward to reading about the subject in more detail when Ethan’s book arrives.

Designing for mobile

Steve Fisher posed the question of what is mobile – the answer, (nearly) everything. He suggested mobile is a lifestyle not a device, and that we design for mobile first. Again the idea cropped up that mobile is not always a rushed experience.

Steve reminded us that when designing for the web we need to remember why the user is on the site in the first place. What is really needed? Forget the rest!

Our aim is to make the complex simple: be simple, look simple.

With great power comes great responsibility

This self-styled rant from Elliot Jay Stocks aimed to discourage us from the overuse of new toys when designing for the web – to avoid any repeat of the ubiquity of the web 2.0 look.

Instead we need to consider why we are using tools such as rounded corners or drop shadows, and what they bring to the design.

Mark Boulton has said that we should design from the ‘content out, not the canvas in.’ This places typography at the centre of the design. In how we handle type and build our design out from this point, there is a lot that we can learn from print design.

Elliot also described design as a constant journey of learning: trying, failing and then trying again.

Content

Having stated how focus on content was a clear theme to this year’s conference, I must confess to not attending any of the sessions explicitly about content and content strategy, as this isn’t my primary area of focus. After repeatedly hearing of its importance during many of the other speakers presentations, I will make a point of watching these back when the videos become available.

Rounding up

The guys at Carsonified put on a fantastic show. Again. This was my second time at Future of Web Design, and it didn’t disappoint. I’ve come away feeling enthused and inspired.

I must also mention friends, old and new, who help give the conference such a great buzz. These are the guys and girls to spark ideas off following a talk, exchange war stories, seek advice from, and to drink a beer or three with at the after party (though sadly I couldn’t stick around for the tequila…) @richardwiggins, @sophkirk, @iamtyce, @htmlboy, @martuishere@internuts, @BMatWork, @danb_zzo, Joe, and fellow HE compatriots Maura and Dave.