Adobe's New "Periodic Table" Icons

by Joey deVilla on December 22, 2006

The beta versions of Adobe's Illustrator CS3 or Photoshop CS3 have simplified icons — a gold square with the white letters “Ai” for Illustrator, and a blue square with the white letters “Ps” for Photoshop:

Adobe's new icons for Illustrator CS3, Photoshop CS3, Bridge and Adobe Reader.

It was generally assumed that these were interim icons for the CS3 beta period, but that's not the case. As part of the rebranding effort following the merger with Macromedia, they came up with a new white-letters-in-colored-squares icon design that will be applied across most of their suite of products. The end result, which is based on a color wheel, looks like one of those modern reinventions of the periodic table when viewed as a group:

All of Adobe's new product icons, placed on a color wheel.
Adobe's Wheel-O-Products. Click the picture to see an annotated version of Flickr.

Note that a few applications with very well-known icons that haven't changed much through their lifecycle will retain them. Acrobat, for instance, will retain its familiar “triangle” icon.

These new icons stand out, given the current design trends towards a more complex, rendered, 3D look with a “rotated slightly counterclockwise, seen from above and to the left” viewing angle. They'd be easy to pick out from the Mac OS X Dock, Windows XP's Start menu or Windows Vista's Windows menu.

For more on the design rationale behind the new icons, here's Adobe Senior Exoerience Designer Ryan Hicks:

Taken in isolation, the individual icons are in no way spectacular – that was never their role. 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.

(I don't know about you, but I don't buy lots of software from a vendor with the intent of making their branding system work better.)

The general reaction seems to be negative. Here's what Jason Santa Maria has to say:

When making icons, you usually try to design something simple and recognizable to identify things. At the expense of creating a family of icons, you’ve watered them down so much as to be unrecognizable at a glance. The variety of color, while great in theory, does little to help matters because of the sheer number of icons. The plain facts that monitor variations kill the subtle differences, and there are quite a few color blind people out there who can’t distinguish certain shades from one another, should have led you towards a backup plan. That may be what the periodic letters are for, but in choosing to go with one font, and one orientation, you’ve created enough noise that none of them would be recognizable among the others. Plus, baking in the action of having to read the icon just to decipher it adds an unnecessary step.

This is an utter design failure.

Veerle Pieters seems to like them:

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.

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.

Here's what Scoble has to say:

Using ASCII characters in an icon? Come on Adobe. You’re the king of using graphics and photos. Put a freaking photo onto the icon. It’s “Photoshop” remember?

But, icons are branding opportunities and tell me one thing. Will this “brand” do well in, say, China? How about Japan?

I remember when I was in China at a computer show and I needed to demonstrate NetMeeting. I could do it cause I knew what the icons looked like.

But, even better, look at how Firefox uses its icon to market itself. It’s on Tshirts. Stickers. Posters (one was hanging in a company I interviewed at yesterday).

For the final word, take a look at Dave Shea's mockups to show how the new Adobe icons would look on the Mac OS X Dock and the Windows XP Quick Start bar:

Mockups of new Adobe icons in the Mac OS X Dock and the Win XP Quick Start bar

In the article that accompanies these mockups, he writes:

Hey, they probably looked great through a projector’s lens during the meetings. And placing them on top of the ultimate designer’s emblem, a colour wheel… maybe that Kool Aid wasn’t too hard to swallow. I just can’t imagine an actual icon designer was involved in those meetings, or maybe they simply got voted down.

Because when you actually look at them in situ, it strikes me as glaringly obvious how poorly these work in the view that designers will be seeing every single day. I wasn’t overly impressed with the new Office 2007 icons, but they’re a world apart from these paint chips.

Leave a Comment

Previous post:

Next post: