Art Direction Versus the Web #FOWD

James Fenton, Digital Art Director with Tribal Group focused on the concept of art direction in print versus the web. Constraints are put on the user on the web – constraints like usability, compliance, bandwidth… essentially it’s a more complex medium than print. Images tend to be supplementary rather than integral. The only thing you can control as far as art direction on the web is semantics. A bigger constraint on the web is bandwidth. James referenced Irish academic, journalist and writer, John Naughton, who wrote an article called ‘Graphic Designers have ruined the web’, arguing that the fact images on many websites make countless calls to the server slows the sites responsiveness and therefore ruins the whole experience. He cites Peter Norvik’s homepage as preferable to more ‘beautiful’ websites. James conceded Naughton makes some good points but his assumption is that people know the content and also that graphic design is only about pretty pictures. There are small things you can do with CSS, for example, that make a huge difference to how users interact with the content.

James reinforced the idea that art direction on the web is a curation exercise. It’s about signposting to information and creating a space to view content. It’s important to make that space as neutral and non-distracting as possible. That’s not to say you can’t direct the audience through the space by signposting and way finding. Pinterest demonstrates this way finding, providing a space to show the content. The design is minimal, but there’s clear navigation and it typifies the whole curation exercise. Personal art direction is achievable in the small scale but across large corporations it’s more difficult. Hence the use of brand guidelines. However brand guidelines have traditionally been used for print – brands that have been born on the web are much more flexible.

So how do you evolve your brand guidelines for the web? At Tribal they have created a brand toolkit to accompany the guidelines, including:

  • An icon library to provide visual signage with consistent metaphors throughout the site
  • To manage the icons and prevent duplication they use the principle of image sprites that make just one call to the server and can be shared across a number of products. Logos and other brand elements are also included to make changes easier across a number of websites
  • In sharing source assets you need design etiquette, so Tribal has created a library of UI patterns, forms, tables etc to prevent duplication
  • Code snippets – they have chunked out code snippets of the HTML and accompanying CSS shared in a central place – this creates consistency across the brand

James ended the session by defining 5 core principles for the web:

1. Define the vision through a clear brief and guidelines

2. Be flexible and ready to embrace change

3. Aim for consistency in the quality of experience

4. Share assets and ideas

5. Democratise the design

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

2 Comments So Far, what do you think?

  1. James Fenton

    Thank you Sara for such a clear, concise summary. I’m happy that despite my nervous delivery, the content came across and could be understood :)

    We can’t claim to have the complete solution, though feel we’re laying a good foundation at Tribal, on which to build and develop our identity and digital brand. It is a journey that is far from over, but is being driven through collaboration with both the design and development communities. This year’s conference left me with a real sense of optimism that we’re heading the right direction.

  2. Geoff

    Great summary Sara. James was a little shy about sharing his presentation before he left, but we tied him to his chair until he uploaded it to the web … so if anyone want to see the slides that accompanied the post, above, pop over to triballabs:

    http://www.triballabs.net/2012/05/what-does-art-direction-mean-for-the-modern-web/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>