FOWD day 2: Art Direction Vs The Web – James Fenton

May 15, 2012 Jonathan Berger

James has an fascinating and insightful take on how Art Direction—a concept from the print world—works in new ways on the web. He shares his thoughts about how to manage a brand across large groups of independent teams, as well as several really interesting implementation ideas and hacks. Head past the jump for the full notes.

Intro

  • Art Director at Tribal Group, an education services & technology co with ~2500 people.
  • Used to be UI Designer, was promoted to Art Director after a shake-up.
  • Now his brief is to tend to the brand across an agency split into hundreds of small agile projects.
  • His predecessors were from the worlds of Print or Marketing.
  • He didn’t want to hover or reduce his team to pixel pushers. http://hoveringartdirectors.tumblr.com/
  • He wanted briefs to be more defined and guided rather than saying “make it pop”.
  • He didn’t want Art Direction to be another level of management.
  • “Art Direction” is a traditional term from advertising and branding. We also have it in film, publishing, etc.
  • Print seems to be the most aligned with Art Direction on the web. Writing is coupled with visual content.
  • [VENN DIAGRAM]: Written content <=> Art Direction <=> Visual Content
  • In the Print world, constraints are all on the cost of production: printing costs, design time.
  • In the Web world, constraints are all on user: usability, different browsers, accessibility.

Affordances

Looking at the same article in AFAR magazine in both Print and Web.

  • In print, the first page is a huge photo with a hed and a lead paragraph.
  • On the web, its a single column of text.
  • On the web, images tend to be supplementary rather than complementary.
  • The only thing we can control on the web is based on semantic information
  • rather than working most closely with photographers and producers, we have to work most closely with developers.
  • John Naughtton wrote Graphic designers are ruining the web, complaining that ~300 HTTP calls for a single article because of images and other junk.
  • JN prefers http://norvig.com/ because its raw and suggests a return to basic HTML, a la Craigslist.
  • Flaws in his argument: he already knows this content. This won’t work for discovery.
  • Another flaw: he thinks graphic design is just pretty pictures and decoration.
  • http://rainfall-daffinson.com/ is a counter-example: minimal, light, but easy to read.

  • Veroique Vienne: “The role of art direction is literally to direct attention.”

  • This is curation: it’s a space to view content. Make the space as neutral, non-distracting, as possible. Let the focus be on the content.
  • That’s not to say that we don’t direct the user through the space. We do that with signposts and wayfinding.
  • Pinterest typifies this notion of curation on the web.
  • It’s very literal (photos) with minimal navigation
  • is similar to pinterest
  • This sort of personal Art Direction is possible on a small scale: portfolios or small projects. How to do it at scale?
  • At Tribal, many agile teams are focused on their individual projects at all times; not focused on the brand.
  • Traditionally, Brand Guidelines have tried to serve this role.
  • Tools: colors, fonts, backgrounds, use of imagery preferences (e.g. “no posed photos” rule).
  • Also collateral: business cards, stationary, annual reports.

Static Brand Guidelines

  • Created a web color palate. When he got there, they only had RGB and CMYK. He added hex.
  • The ugly side to Brand Guidelines: brand police.
  • Brand Guidelines are static documents.
  • Often the Brand Police are charged with enforcing the guidelines even if they don’t understand the motivations for the guidelines.
  • Companies born on the web tend to have more fluid brands, e.g. Google’s whimsical logos, the MIT Media lab (”in NY”!) has a generative logo with 40k variations.
    MIT
  • He started looking at more flexible approaches: creating different logos as brushes in Illustrator, which could then be used in different ways.

Making Brands Dynamic

Brand Toolkit

  • Created a Brand Toolkit rather than Brand Guidelines.
  • A consistent look can be achieved across sites by focusing on the plumbing: common elements most sites require. Therefore, JF create a Brand Toolki Collection of Icons (for common activities like wayfinding, sharing, etc.).
  • This allows for a consistent experience across sites without heavy-handing top-down brand-policing.
  • Started w/ 25 icons, and it’s grown over time. Icons for globe, window, chart, document, trash, youtube, paper clip, linked in, test tube, ruler, etc. etc.

Sprites

  • To manage this duplication of work, they started using image sprites for logos and brand elements like the icon set. This is really useful for the product suite because they can share the sprite across projects.
  • If they re-brand or tweak the icons or even change the logo, they can change them everywhere as long as they keep the sprite coordinates constant.

Design Etiquette

  • Started with Photoshop Etiquette.
  • How to share source files in a way that lets others use them easily?
  • These are editable, living documents that will be repurposed.

UI Pattern Library

  • Dev teams work in silos and then need to share more, so they started using Yammer to facilitate communication among the teams. 2500 people in Tribal(!)
  • Pattern library helped share.

Code Snippets

  • Sharing HTML and CSS snippets across the brand.
  • Don’t have to re-invent the wheel.

Tribal Design Principles

1. Define a vision, through clear guidance and a brief.

They created a structured brief, which evolves over time, but allows them to have a common starting point.

2. Be flexible, and embrace the change that comes.

Don’t set rigid structures; as technology and media changes, we can adapt.

3. Aim for consistency in the quality of experience.

Rather than uniformity across all products and platforms, aim for consistency for the user.

4. Share the assets, patterns, and ideas

They use Sharepoint (which is kind of clumsy) and are looking for something better.

5. Democratize the design process.

Involve all the people and get their input. This isn’t design-by-committee, this is inclusion of the team: client, product owners, everyone.

About the Author

Biography

Previous
Executable Documentation
Executable Documentation

I try to avoid writing static documentation. It gets old and out of date as soon as the next person comes a...

Next
The Data Science Summit 2012: Staging Ground for the Future
The Data Science Summit 2012: Staging Ground for the Future

At the Data Science Summit 2012, practitioners and thought leaders shared broad visions and deep discipline...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!