December 19, 2006

What’s up with the new Photoshop icon & branding?

"Taken in isolation, the individual icons are in no way spectacular – that was never their role," writes Ryan Hicks, Sr. Experience Designer at Adobe.  "Their elegance comes from how the entire desktop brand system works as a whole. The more Adobe apps you have, the better the system works. Adobe’s icons stand out instantly in the visually-dense world of user desktops because of their simplicity; complexity ≠ information."

The crisp, simple imagery of the Photoshop CS3 Beta icon and splash screen has drawn both rants and raves on the Labs forum, so I thought I’d invite the folks behind this effort to share their perspective here.  Ryan’s thoughts follow.   –J.
[Update: See also the other CS3 icons.]



—————

Adobe’s desktop brand system is a pragmatic & systematic approach to creating a cohesive functional visual language carried across our hundred products and their thousands of branded icons and screens. With a specific emphasis on clarity and legibility, this system expresses a singular focus of better enabling our customers and their work.

The merging of Adobe and Macromedia product families posed an interesting challenge and a unique opportunity to reconsider the role of brand and product identity as applied to the desktop. Adobe’s mission is to make our customer’s work easier, more efficient, and their time spent with our products as effective as possible. This focus is driving a fundamental shift in our interface design, product architecture, as well as the role desktop iconography plays in the overall user experience.

As Adobe’s products have grown deeper and broader in their capabilities, the effort to visually represent what they can do in a literal icon has become increasingly difficult. This challenge became particularly evident when the legacy of eyeballs on beaches, prancing horses and Venus De Milo was replaced with nature imagery in the current Suite era. While the CS1/CS2 feathers and butterflies were aesthetically beautiful and made for gorgeous marketing collateral, they broke down in terms of a practical and functional desktop identity system. For CS3 we’re doing something radically different.

Our approach is pragmatic and utilitarian, literally "less is more". We have created a concise and coherent unified language in a deceivingly simple and highly distinctive visual system – from the branded desktop work through to interface and product design. Top-level point products (authoring environments eg. Photoshop, Illustrator, etc) follow a two-letter mnemonic ‘nickname’ system as their primary identifier.  ‘Feature’ and supporting-technology products use a more descriptive figurative icon in a similar style as in-product ‘workflow’ icons. At every icon size, a specific emphasis has been placed on legibility. The icon illustrations have been carefully optimized at each size to best take advantage of the available level of detail. Specific drawings have been done for each icon size to leverage every available pixel to the fullest.

A product’s icons are paired with a specific color, usually based on historical color association (Flash is red, Dreamweaver is green) and familied within a particular vertical. This color association is carried throughout the product’s desktop brand in lieu of ‘primary imagery’, from install screens through app icons and reinforced through details on document and supporting icons. Critically, the use of an assigned color frees the desktop system from creative-agency artwork timelines as well as future-proofing the product’s desktop identity.

Overseen by small internal group gathered from Brand, Marketing, and Experience Design, the core members on the team executing the desktop brand work are comprised of a project manager, production coordinator, two designers – one acting as creative and art director for the experience design – and a full-time production specialist. Together we work with each product team and all technology efforts to assess requirements and define improvements to the existing desktop experience. Then we set out drawing, producing, and delivering every branded asset for the desktop; hundreds of products, thousands of icons and screens… a massive effort executed with exacting detail and consistency.

One last point: if we wanted to design a ‘Periodic Table of the Elements’ we certainly have the capabilities to have done so. Our desktop brand system isn’t a marketing or advertising gimmick that we will toss out on the next rev, it’s a solution to real usability and identity problems and is something we can call wholly our own.


PS–Bonus bit for type geeks: The lettering on the new icons was designed by modern type legend Robert Slimbach. According to Ryan, “The mnemonics use a custom cut of Gauge, a typeface Robert has currently in development. It was his recommendation that the type work the way it does, mixing upper/lower and cap/small cap based on both phonetics and aesthetics. He breathed a bit of life into the system for sure.”

Posted by John Nack at 1:26 PM on December 19, 2006
Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)