Adobe Icons (and Robert Slimbach)

Reed Reibstein's picture

Photoshop project manager John Nack released a picture of the new Adobe branding system for its software icons on his blog. He did this because of the many criticisms that erupted when he revealed that the Photoshop CS3 and Bridge 2.0 icons were not placeholders, but rather the planned icons.

In the post, guest writer Ryan Hicks mentions that Robert Slimbach was heavily involved in the design of the icons, lending a custom version of his upcoming typeface Gauge for the lettering. While the icons are not an ideal place to get a feel for the typeface, I thought that some around here would like what I presume is a "sneak peek" at Gauge.

Here's the color wheel of new Adobe icons (partial key: Ps=Photoshop, Ai=Illustrator, ID=InDesign, Dw=Dreamweaver, AE=After Effects, Br=Bridge, LR=Lightroom):

I'm not sure yet if I like them or not. I'm tending toward appreciating the simplicity and emphasis on type, but I did like the feathers/flowers/butterflies of yesteryear.

Si_Daniels's picture

What does the "black hole" in the middle represent? ;-)

Linda Cunningham's picture

The amount of money it will take to buy all of it? ;-)

Spire's picture

I, too, assumed that the new Photoshop and Bridge icons were placeholders.

I think this is a big mistake. To use text as the primary element in the design of an icon betrays a fundamental misunderstanding of what an icon is.

Quincunx's picture

Well, I'm actually glad the feathers/flowers/butterflies are replaced by something comprehensive.
Since the main goal of icons is to convey a message in a quick and easy way, the last icons didn't really do their job too well, in my opinion. There was no réal way of telling the difference between the programs, other then learn which icon is which program. But that defeats the whole purpose of an icon, I would say.
I do think the new icons do that a lot better. These almost work like file-extentions, thus making them easier to recognise. And of course that all programs are now integrated in a more uniform shape, also contributes to recognition.

If I like the icons, easthetically speaking, I'm not sure yet.

nicholasgross's picture

I like 'em, they're streamlined, I've never found myself wishing that an icon was more detailed, I assume too there's a bit of a joke in there about the different 'elements' of the creative suite being as essential to a PC as the scientific elements are to the known world. I like that too.

--N

blank's picture

I totally dig the new system; I thought the old icons were cool, but never could figure out the whole shell/feather system. That said, the new ones going to look really lame if the whole web 2.0 design trend implodes next fall and Adobe's icons are just Myriad over squares that somebody hit with “Render Lighting.”

And in the long run, I don't care what the icons look like, I just want a version of Indesign where my font sizes don't suddenly switch to 9.8797565574.

Reed Reibstein's picture

Nicholas, actually, the guest writer on John Nack's blog denied that the icons are supposed to be like the periodic table, saying that if they wanted to make the connection, they would have made it more explicit (and not used a mixture of lowercase and small caps for the second letter). Although Wikipedia's Adobe Bridge article makes the reference to bromine.

nicholasgross's picture

Ah, that's a shame, thanks for the info though.

However, for something that is not meant to remind of the periodic table, the two letter designations, and the plain colour-coded boxes seem to do a good job of doing just that. Perhaps it's subconcious.

--N

Mark Simonson's picture

I immediately thought "periodic table," but I like the simplicity of it. I was never a fan of the more abstract recent icons. Pretty, but not very helpful in identifying the application in the dock. The old icons (Botticelli Venus for AI, eye for PS) were okay. The new scheme seems like a variation on Macromedia's scheme (round, single color icons with a letter or two). Come to think of it, Microsoft has been using the letter icon idea forever for Office (though they are consistently unattractive, in my opinion).

I find that I look for color first when looking for an icon in the dock. I've had trouble finding the iTunes icon since it went from green to blue. There are a lot of blue icons in my dock. Having a nice, big, easy to read letter helps a lot for me, more so than shape or other details. So, I think I am going to like the new Adobe icons, even though they are rather plain.

Bert Vanderveen's picture

Mark, If you prefer the green icon for iTunes, just find an older version (backup'd somewhere, presumably…), do a Get Info, select the small icon in the left upper corner of the Info-window, and copy. Paste into same spot of the new iTunes Info-window. Voila: a green iTunes icon in your dock (after logging out and in, I guess).

Miss Tiffany's picture

I have actually grown to like the new iTunes icon. But, at first I hated it and went searching for a something I thought was better.

Via Interfacelift:
iTunes Variations
VinylTunes

speter's picture

Somebody's already taken this to its logical extreme:

http://img392.imageshack.us/img392/2789/cs3toolbarop4.gif

Reed Reibstein's picture

That revision of the toolbox is just cruel. It does make you wonder if Adobe made the right design decision here.

blank's picture

The big difference is that most designers really won't see most of the logos together in one place. And if there are only six or maybe ten Adobe apps in my dock, I think that I'll have an easier time telling them apart than I did when I had to look at an antenna, a butterfly, feathers, flowers, etc.

I do wonder how much of this is the influence of the Macromedia designers who came into Adobe. This new set of icons bears much more similarity to Macromedia's simple circle and letter icons than it does to anything Adobe has ever done.

dezcom's picture

I just hate the flower-feather-butterfly nonsense. They make no sense in distinguishing the programs. If you already bought the program, you don't need senseless eye candy to resell it to yourself. You just want to know which damn program is which! I still have to mouseover and wait for the text to pop up to tell me what I am picking. I would far rather have the letters "PS", AI", and "ID" than that rainbow razzmatazz of unintelligable schmaltz they use now. If you can't come up with an icon that communicates instantly then use acronyms. The old Pen, Brush, Book thing was way better anyway. Take icon design out of the marketing department and give it to Human Interface Design professionals who might actually do it right!

Merry Christmas,

ChrisL

PS: Bah, Humbug :-)

offonoff's picture

I actually like the icons. Got the periodic chart thing right off and like that they are color-grouped according to function.

I was never fond of the butterfly, feather, flower thing and when they swapped color/hue on the butterfly and flower from CS to CS2 I wanted to string someone up by their toes. I can't tell you how many times I opened up Illustrator instead of ID and vice versa.

BTW, new functions in Ps are great and I can't wait to see the new Is and Ai. ;)

Miguel Sousa's picture

> I can’t tell you how many times I opened up Illustrator instead of ID and vice versa.

Same here. Currently I think twice before hitting any of the icons.

Reed Reibstein's picture

Because people have been mentioning how much they'd love to know what's new in InDesign CS3, I thought I'd remind everyone that when Quark 7 was released, Adobe revealed several of ID CS3's features, which are summarized at QuarkVsInDesign.com. It is assumed that ID CS3 will have a similar interface to PS CS3. I would personally guess that Adobe will also add even more Photoshop-like functionality to ID, past the "Photoshop Effects" mentioned in the article, but that's just a guess. Of course, I'm sure that they saved the whizbangiest features for closer to the release date, so I'm still very excited to see what ID CS3 will offer (along with the new AI).

mjpatrick's picture

My impressions:

I have tried to keep an open mind, but I immediately thought of the periodic table when I first saw this, and can't get it out of my head.

I have to admit I am not crazy about the icons. I understand they are parts of a whole with the color wheel concept, but individually there's really nothing to them other than type over differently colored gradations. They do nothing to tell me what the software does, and although now I have that understanding, it's confusing to the new kid on the block. Also, I have at times up to 6 Adobe icons in line across my dock, and I really don't want them to be quite so uniform and text-based.

I do like the concept from a simplicity standpoint, also because it's a complete 180 from what they have been doing for the icons in the past, but it's too far removed. Adobe is well known for its polished, user-friendly interfaces. This just seems like a step backwards to me.

I would at least work in some simple art that somehow gives a slight hint at what the program actually does.

TBiddy's picture

I think they're boring. I'd prefer icons over type, but as far as functionality goes, they are an improvement. Most of you all have echoed my same problems with the arbitrary shape system. Nice on a box, not so nice on your dock.

marcox's picture

Miguel, your avatar/icon is genius.

Miguel Sousa's picture

Thanks. I felt the old one needed a bit of re-branding too.

Si_Daniels's picture

Can't wait to see more of Gauge as some of the glyphs shown in the chart are intriguing, kind of bringing Myriad into the nineties! Having an almost vertical final stroke in a splayed cap 'M' is unconventional.

paul d hunt's picture

kind of bringing Myrad into the nineties!

the nineties? too bad he didn't bring it all the way up to the naughties!

Si_Daniels's picture

>the nineties? too bad he didn’t bring it all the way up to the naughties!

I don't think that's possible as I couldn't find his MySpace site ;-)

Miguel Sousa's picture

The right-most stem of the M is not that upright. Here's a better look.

dezcom's picture

I don't know Miguel, I think your avatar would have looked mighty fine in Calouste :-)

ChrisL

Miguel Sousa's picture

I'll change it to Calouste as soon as I design a Bold weight of it ;^)

dezcom's picture

NOW You're TALKIN' :-)

ChrisL

brampitoyo's picture

I think we could simply place the feather, flower and butterfly icon on the color square as a sort of middle-way. Dead simple yet true to the concept of icon.

Aside from the topic, Chris, I think you might fancy this.

k.l.'s picture

Steve Peter wrote:
Somebody’s already taken this to its logical extreme:
http://img392.imageshack.us/img392/2789/cs3toolbarop4.gif

The question is: Does an icon, or do icons, convey the message? Thinking of Illustrator's OpenType icons, I am happy that a written explanation pops up when I touch them with the mouse ... As to the logical extreme -- indeed. Funny that you present a PhotoShop toolbar. Still I haven't internalized the meaning of each toolbar icon and find myself searching for a particular function quite often.
"A picture is worth a thousand words" is a myth. Whether highly simplified icon or two-letter identifier -- you have to learn what their meaning is.

The only thing I don't understand about the Adobe icons is why it is sometimes UC+SC and sometimes UC+LC.

Miguel -- who is your employer? Maybe you should change your name.  :))

brampitoyo's picture

Touché.

Miguel Sousa's picture

> The only thing I don’t understand about the Adobe icons is why it is sometimes UC+SC and sometimes UC+LC.

The logic behind it is more or less simple and consistent: UC+SC is used in compound names — FreeHand (FH), PageMaker (PM), ColdFusion (CF), InDesign (ID), etc. —, and UC+LC is used in single word names — Flash (Fl), Director (Di), Flex (Fx), Premiere (Pr), Photoshop (Ps). Of course, there are exceptions like Illustrator (Ai) and GoLive (Gl), for example. And the rocket-arrow icon is Apollo.

> Miguel — who is your employer? Maybe you should change your name. :))

Unfortunately I can't. The HB-1 Visa is under my "old" name ;^P

ebensorkin's picture

Wait, I didn't get that it's just squares & letters... I thought that was a visual shorthard to help you see the color scheme - not an actual full blown icon model. I don't mean to be retrograde but that is just too simple for me. I don't love it. I mean, your selling to creatives... and you tell them that Myriad is enough? What kind of message is that? I hope something more comes along. Soon. I would settle for the feathers & so on. At least let them have different shapes! Color & letters is not enough.

k.l.'s picture

The logic behind it is more or less simple and consistent

Ah, I see.
Thanks for the Apollo link, I haven't noticed this so far!

Reed Reibstein's picture

Eben, in case you missed it in my first post, the typeface used for all the icons is actually Slimbach's work-in-progress Gauge, which is partly why I posted about the icons here. I would have assumed that they were in Myriad if Ryan Davis' [EDIT: Make that Ryan Hicks'] post didn't mention it. But the typographic features won't placate you or many other disgruntled people. From what I can tell, the Adobe team is sticking to their guns on this one, so I wouldn't expect any major changes for CS3.

ebensorkin's picture

Thanks for the correction!

And about the icons: I could be wrong! Looking down at my Mac menu the icons are all small - I have lots of apps in the doc. Maybe this method will sort these icons from the clutter. But I do think that not availling yourself of shape might be a mistake in icon design. And it will punish people who use too many of the Adobe apps because the distinctiveness of the approach will be diluted. 3-4 icons like this if they are in contrasting colors might be fine but if you had 10... maybe not so good. They may know that the average user has 5 or something. And you know - we can change the icon in OSX if we want to.

Gague looks super spiff.

aluminum's picture

"Of course, there are exceptions "

Hence the goofiness of it all.

Has anyone figured out if the colors mean anything at all? I can't figure out why FH is opposite Ai and Gl is opposite DW.

William Berkson's picture

>rather plain

Mark's observation I think pinpoints what is the weakness in an otherwise an excellent design. Just a bit too plain, too cold for the brief. Given that the programs are for visual creativity, it seems to me they ought to have a little more 'juice'.

Maybe Carl's new Beorcana would help for the font :)

dezcom's picture

I'll gladly take the plain look any day because now thw icons will actually function instead of just be glitz.

ChrisL

ebensorkin's picture

So Chris- you think they will be functional for ya. You are a fan. Is that right?

Won't you get lost in all the colored squares? How many apps will you have?

What about the color blind? They have only the letters to distinguish the icons... Then again, maybe they will be unlikely to be using design apps anyway... Well, that's a bit hasty too. But I suppose from a marketing point of view that's probably not their core audience to say the least!

I would still have preffered some shape divergence too. Maybe I should start mocking something up. I even have a few ideas... If I only had a copy of Beorcana I could start making alternative icons with PANACHE right away! :-) Anybody interested in alt icons here?

blank's picture

What about the color blind? They have only the letters to distinguish the icons… Then again, maybe they will be unlikely to be using design apps anyway…

I run into a lot of color-impaired guys at design school, and once had to fix all of a guy's colors the night before a project was due. Given how many designers who can see color suck at using it, I doubt that even being totally color-blind is a big deal.

If I only had a copy of Beorcana I could start making alternative icons with PANACHE right away! :-) Anybody interested in alt icons here?

Get me a copy of Beorcana and I'll help ;) Hell, I'll do it just to stay busy for the next three weeks—I was planning to do nothing but read over break, but trying to read all these big crazy design books I got for x-mas is killing my neck because I have to sit them on a desk or table and hang my head over to read them! Maybe I should just tilt my drawing table way up and clamp them to it...

dezcom's picture

The marketing battle is long over at the point of using icons. The color blind could not "read" the prior incarnation of feather butterfly stuff either--nobody could. I have a string of apps that cover the entire width of my dock on my 23" screen. That is why I want something that quickly reads instead of a parade of panache putzery. Put all the marketing pizazz on the packaging and ads if it sells for you, but once I have already bought the damn thing, I don't want runnaway rainbow madness, explosion in an icon factory, visual pollution getting in the way of just using the software. Maybe some third party will come up with "Skins" for those who really can't live without the bling--for me, I'll take the plain letters over the present system any time.

ChrisL

William Berkson's picture

>glitz

Hey, Chris, I said 'a bit' too plain. I wasn't asking for Las Vegas, but just a bit more differentiation, a bit more complexity.

'Guage' looks terrific, but just a few of its letters on a colored square, even with the gradient, seems a bit bland, and to beg for just a bit more spice, IMHO.

By the way the MS Office icons work better in respect of striking a good balance between simplicity and variety--though they are a bit clunky, as Mark noted.

Edit: Looking again, I think maybe the feeling of bareness comes from putting two letters in a square, which puts a lot of space above and below. If the background were instead a slightly shorter than square rectangle in 'landscape' orientation it might help. I think there may be some optical illusion effect going on here that needs correcting. The perfect square with the gradient may look taller than it is, and need to be slightly shortened to look right--look less bare a frame for the text.

Paul Cutler's picture

I agree with dezcom - I like this system and have hated the icons since CS1 - I don't need symbols, just clarity.

Once they changed the venerable Venus, etc. icons I couldn't tell these things apart.

peace

pattyfab's picture

Jumping on the bandwagon to agree that I could never tell the feather from the butterfly from the flower and this will make it simpler, a la Microsoft Office.

I of course thought of the periodic table and think they're being a bit disingenuous to deny that connection/inspiration. My only beef is I don't really get the icons positioning on the color wheel - and how they connect to one another. I had no idea they had this many products to begin with.

Are they really gonna stick with Golive now that they bought Dreamweaver? Does anybody use it? Also, I'm a bit bothered by Ai for Illustrator. Of course I get it - that's the file appendage, but it seems inconsistent with the others. Shouldn't it be Il? Or would that be confusing in a sans serif?

Font looks a lot like Meta to me.

And all this said, I wish they'd come up with one thing and stick with it!

Miss Tiffany's picture

Rumor has it GoLive is going to become PageMaker to Dreamweaver.

dezcom's picture

Actually, it reminds me much more of the old Munsell Color System model that I remember from design school. This is a better fit than the periodic table visually but the abreviations give it that element like feel.

ChrisL

brampitoyo's picture

Lose the photo-surrealism of CS2 but keep the feather, flower, butterfly, etc. symbols, done in white over colored background. What do you think?

Nice compromise between both point of views, IMO.

blank's picture

My only beef is I don’t really get the icons positioning on the color wheel - and how they connect to one another.

Agreed.

Are they really gonna stick with Golive now that they bought Dreamweaver? Does anybody use it?

The only people who used GoLive were either not competent enough at web design to realize what a turd GoLive is, or just too cheap to buy Dreamweaver after getting GoLive as a freebie when they paid for Illustrator, Indesign, and Photoshop.

Also, I’m a bit bothered by Ai for Illustrator.

I think that they did that because it's a common abbreviation used outside of Adobe already. I see it here and there in print and online.

Rumor has it GoLive is going to become PageMaker to Dreamweaver.

Care to elaborate? I've never used Pagemaker, so I don't get the reference.

I really can't understand why Adobe wouldn't just ditch GoLive. When I've tried using it GoLive felt more obtuse than XHTML/CSS is to begin with, and the code it generates is even nastier than the mess Dreamweaver turns out. Adobe should just buy Rapidweaver and re-brand it as GoLive CS3 so that CS users who don't want to mess with web coding can still have a nice app for churning out simple pages for hosting photos, portfolios, etc.

Syndicate content Syndicate content