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

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.

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.

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.

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.

Jonathan Berger is a designer, developer and technologist who has been active in the NYC technology scene since around 2005, helping to organize events like the Agile Experience Design Meetup, the Pivotal Labs Tech Talk series in NY, Startup Weekend, Barcamp, Fashioncamp, and IgniteNYC. He spends his days building software with Pivotal Labs and his nights and weekends working on Market Publique. Prior to that, he earned a Bachelors in Philosophy at Vassar College and a Masters in Media Studies at the New School(where he also spent quite a bit of time at Parson’s Design + Technology program). He has worked as a designer, developer, video editor, animator, and technology consultant for institutions as diverse as Eyebeam, MTV Networks, Yahoo!, Ogilvy, and the American Museum of Natural History.
He speaks about startups and technology at events like the Future of Web Design, O’Reilly’s Web 2.0 Expo, New York Tech Meetup, Fashion 2.0 Startup Showcase, Startup Weekend, North Brooklyn Breakfast Club, The Product Group, and others.
He makes it a point of honor to include Comic Sans in every design project.
Find him on twitter, github, flickr, etc. as @jonathanpberger.