The new Adobe icons and branding
2006 at 12.26 pm posted by Veerle Pieters
So many voices have expressed their thoughts on Adobe’s new icons so far and one of the more noticeable one from users is that they all thought it was some temporary place holder art. When I first saw the splash screen and application icon of Adobe Photoshop CS3 my thinking pattern was that Macromedia had its influence in the branding process: the idea of using different colors for each application and the way the splash screen is organized.
Adobe chooses to go with a two-letter mnemonic
The color association that is carried throughout the product's desktop brand and primary imagery makes total sense to me. The absence of illustrative elements as we saw in previous versions needs really getting use to. If you look in the Dock, most icons are like pictures and visually very detailed so it's like they are all shouting "choose me, me". Adobe's new icons are so basic and stand out instantly even in a crowded Dock. That's a thing Macromedia always had with their icons, you could immediately tell they belong together. Jason Santa Maria said:
"Plus, baking in the action of having to read the icon just to decipher it adds an unnecessary step."
As much as I respect Jason I'm not agreeing with him, because it's only two letters and I personally immediately see the "Ai" just by looking and not by a literal read. It was much harder to differentiate the previous ones, in fact I more than once confused ImageReady with Photoshop. The natural look didn't have any meaning other then being pretty to use as marketing collateral.
Talking about typography, the font used in the icons was created by Robert Slimbach, known from typefaces like Adobe Garamond, Adobe Jenson, Myriad (co-designed with Carol Twombly) ...
You might wonder why Acrobat Reader hasn't "Ar" as icon or "Pd" or something, just to take the same line with the rest of the products. The curvy triangle is so well known that it's obvious they kept using it for the icon. I think if the other applications had a similar icon over the years, they would have done the same. Since there are none they decided to use a two-letter mnemonic 'nickname' system as their primary identifier.
Why the re-branding was such a big challenge
While this color-wheel beautifully presents the approach in the entire re-branding, I think it fails in bringing the message across on how it will tie together as a whole. The idea is great though but the color-wheel is very overwhelming, taking away all the attention and the icons are scattered over the place. People seems to fail to grasp the bigger picture. It seems that most just want to make it look pretty because the app is giving these possibilities, but it's more than that, it's about problem-solving too. It's a major undertaking to revamp and re-brand both Adobe's and Macromedia's apps as one brand, we're talking thousands of icons.
1) Did you had any idea in what direction the response to the new icon would go?
The debate that has risen up around iconography and the merits of what we've done taken in a broader context is impressive. The new direction is a bigger change than I think anyone in the public would have expected from us, change on that scale is going to be hard and of course there are those who will rise up and scream heresy. Honestly, we have been living with the icon system internally on our own machines for so long now that it's a bit hard to remember what the big deal is. We're as varied and hardcore a user group as will be found anywhere, we've found the stuff just works. Done.
2) The horizontal folders is that a hint of what is coming in Leopard :D, or what was the thinking behind that?
Hints of Leopard? Not exactly. The "flat" folder is reflexive of the overall approach we've taken in the iconography throughout the desktop (document icons, module icons, etc), which is driven by the work in our application UI's (check out Acrobat 8 in particular). Simple and clear, though you can definitely see that approach in Apple's UI work as well. It's a focus on function, but executed with an exquisite elegance
What we had in the CS2 days were elaborate 3d-rendered icons for documents and things which looked nice at really huge views but reduced to little puddles of pixel mud at the small sizes. Arguably it's the 16px and maybe 32px icon view that are the most prevalent, so it's those sizes that we focused on in creating our technique for rendering the figures. The new bits look simple, and in contrast to the 3d-style work out there they are, but there's a lot of nuance to give them richness that scales to the larger sizes.
3) Not sure if you can reveal this yet but I wonder if the minimal look will also be reflected in the package design?
Yeah, I can't give anything away here. The desktop icons are tiny extractions – you could call them "pixels" if you like – from the much larger packaging art.
Well I hope Adobe will let me show packaging for the suite when the time is right because I strongly believe it will help people understand. So I'm going against what most people think here, Adobe's design team has created a concise and coherent unified language. The new style is very contemporary and it's more solid and refined in my opinion.
In the end major changes always takes getting used to, it's so different from previous versions. There will always be people thinking "what have they done now?". I didn't have a "whoa!" reaction myself the first time but it grows on you.
I just learned that my thinking was right, the design was done by the design team of the former Macromedia. I knew it :p
Want to learn more?
A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.