You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Mar 31

New icons for CS5 coming

2010 at 10.36 am posted by Veerle Pieters

A few years back the Internet was going totally ballistic when Adobe introduced the new branding for CS3. Most people didn’t like the change and it was very controversial. I think I was one of the lonely few that actually liked the change. Now, a few years later another change is apparently up on us.

Stepping into a time machine

Adobe has a long history of pretty unique splash screens, some even had easter eggs hidden. Let us take a look at one of the applications that I use most.

Illustrator splash screens

Macromedia merger

When Adobe merged with Macromedia in 2005 they were faced with a problem, namely how to merge dozens of disparate product offerings from two companies into one cohesive system. This point in time was the mark of the launch of a much simpler system because Botticelli's Venus wasn't going to work anymore. Below you see the splash screen for Illustrator CS3 and CS4.

Illustrator splash screens CS3-CS4

The new system started using color as primary reference point with a two-letter mnemonic. You can re-read an interview I did with Ryan Hicks, Sr. Experience Designer at Adobe.

What to expect from CS5?

To get some information about what direction the new CS5 will go I'll let Shawn Cheris, the Lead Designer for the Desktop Brand team at Adobe do the talking.

When we began thinking about what we wanted to do for CS5, the one thing we all agreed on was that we wanted to bring back a sense of joy to the brand work. Our goal was to move beyond the monolithic expression of of the CS3 and CS4 systems and create a more dynamic language. We wanted to bring back inspirational and aspirational artistic qualities to the identity system while leveraging the successful patterns we've established with CS3 and CS4. Everyone missed the more whimsical imagery that was such a big part of Adobe's heritage and wanted to surprise and inspire our users and give them something new.

They started by defining a set of experience goals for their work:

  • PROFESSIONAL - Accomplished, skillful, sophisticated
  • EXPRESSIVE - Alluring, delightful, engaging
  • REFINED - Cultured, polished, discerning, elegant
  • INTENTIONAL - Calculated, systematic, purposeful
  • UNIFIED - Systematic, integrated, uniform, consistent
  • UNIQUE - Inventive, timeless, own-able, surprising

Adobe, being such a larger corporation means that many people need to have their say, marketing, product and suite managers. These discussions resulted in a set of business requirements:

  • VISUALLY DISTINGUISHABLE - Maintain distinction across multiple concurrent vintages of a product
  • EASILY RECOGNIZED - At small icon sizes, on file icons, and in docks and toolbars
  • FLEXIBLE - Structured to accommodate variations across the product line and file types
  • ACCESSIBLE - For the color-blind. Identities to incorporate shape letterforms, or tone
  • SYSTEMATIC - Each identity expresses a clear relationship and is the sum of a systematic kit of parts
  • CREDIBLE - Integrity of core design principals; concept, color, typography, layout
  • LEVERAGE THE RECENT PAST - Build on strengths of last two iterations of the mnemonic system

Shawn Cheris, the Lead Designer for the Desktop Brand team at Adobe continues with saying:

Additionally, we were told by the Brand Strategy team that the CS5 branding should represent "a shift"—this version needed to feel distinct, new, and "not to be missed". We had a challenge on our hands.

Design inspiration for the CS5 icons

I was a little bit surprised to find out that only two or three designers are doing all of the strategy and execution work for this. This situation was an influence to find something simplistic. They researched large-scale design problems that had been solved systematically, and in doing so found particular inspiration in the work of Otl Aicher for the 1972 Munich Olympics. You've probably seen the figurative pictograms. The icons are on an isometric grid system.

inspiration in the work of Otl Aicher

Shawn Cheris says:

Along with Aicher's work, we drew inspiration from a wide range of sources, including traditional drawing tools, machined metal surfaces, Swiss design, lithographic advertising posters of the early 1900s, and more.

An isometric grid similar to Aicher's became the foundation of the new visual CS5 system. Shawn Cheris continues talking about the grid:

Using the grid, we started to form shapes that could be used as a template for creating more complex forms. These shapes became the basis for our new system—our kit of parts.

isometric grid

parts

For a moment I thought that it would be a not so smart move to walk away from the color that was introduced at CS3. Luckily they get that and they will keep it the same in CS5. The only addition color wise is using a 2-color approach to product identity. According to Shawn Cheris:

This has substantially increased the visual differentiation between product icons, making it far more usable for customer who have a multitude of Adobe applications installed on their system.

CS3/CS4/CS5

The actual designs are NOT being shown here as this is an article about the design process only. Personally I think this will not be an easy one to pull off and to convince a large bunch of very vocal users. In theory this direction sounds really promising and I am looking forward to actually seeing the finished result, but I can't deny that I'm a little skeptic because some of the time there is a difference between "the talk" and the end result. You know what I mean, high expectations are hard to meet. I thank Shawn Cheris for giving me the heads up about this and I hope to talk to him again when they are launched.


35served

gravatar

1

permalink this comment Daniel Wed Mar 31, 2010 at 01.14 pm

I’m interested to see part 2 since the original article is a little underwhelming, and it’s too easy to be critical too early.

Without seeing the final piece, I don’t see that the “two-colour” approach has made much difference, although I admit I don’t use half as many Adobe products as some probably do. I like that they want to return to the “inspirational and aspirational artistic qualities”, although I have to admit I prefer the simplified CS series icons to more illustrative ones, just because they look good on a Mac. Inspirational splash screens would be welcome though.

Looking at the newer icons, I was interested to see how the older ones looked since I probably only started using Photoshop 7.0 onwards, and I found the blog post below with links to PS icons, Splash Screens and toolbars (bottom of post):

http://blogs.adobe.com/jnack/2006/11/do_not_taunt_ha.html


gravatar

2

permalink this comment Step Schwarz Wed Mar 31, 2010 at 02.31 pm

You can see a little of this happening already in Flash Builder 4. I’m not completely sold on the app icon. At small sizes, it looks like a book icon with its 3D perspective a bit off. But the splash screen… it’s beautiful. Interesting, almost Escher-esque shapes. Really love it.


gravatar

3

permalink this comment Shawn Cheris Wed Mar 31, 2010 at 06.29 pm

Step Schwarz said:

But the splash screen… it’s beautiful.

Indeed there are a couple of apps that have been released ahead of the CS5 launch if you want to see the new shape of the application icon.

I’m glad you like the FB4 splash screen, which should give you a good hint where things are going. We actually spent quite a lot of time on the splash screens and each one is unique, as you’ll soon see.


gravatar

4

permalink this comment wbutton Thu Apr 1, 2010 at 12.36 am

It seems like a lot of corporate meeting and design-by-committee that went on to essentially add a bevel effect to the lifeless square icons.


gravatar

5

permalink this comment andy Fri Apr 2, 2010 at 02.58 am

Cant wait for cs5.  Definitely looks to be worth the upgrade.


gravatar

6

permalink this comment cheryl cassidy Sat Apr 3, 2010 at 03.27 am

I think we will just have to wait and see how it goes. I hope they do well as I like Adobe.


gravatar

7

permalink this comment Shimu Sun Apr 4, 2010 at 09.13 am

This has substantially increased the visual differentiation between product icons, making it far more usable for customer who have a multitude of Adobe applications installed on their system.

I think this maybe a little subjective as the color doesn’t give any meaning to the product. Who tells blue stand by Photoshop?


gravatar

8

permalink this comment Chris Noble Sun Apr 4, 2010 at 05.30 pm

I love that you take this much interest in splash screens :)

(I used to design software, it’s nice to know that people really do care!)
xxx


gravatar

9

permalink this comment Victor G Mon Apr 5, 2010 at 05.53 am

Man, I really liked the CS2 icons, espeically for Photoshop and Illustrator. Let’s go back to the nice feather and abstract flower icons!


gravatar

10

permalink this comment shane Mon Apr 5, 2010 at 03.21 pm

Very good article, I will stress this blog regularly because there are a quality content.


gravatar

11

permalink this comment Chuck Lasker Tue Apr 6, 2010 at 03.49 pm

I hope those CS5 icons are not what they end up with. Regardless of their statement that they are trying to accommodate the color blind, I, being color blind, cannot tell the difference between the DW and AI icons. They need to add shape differentiation to truly be usable for us.


gravatar

12

permalink this comment Nicolas Chevallier Tue Apr 6, 2010 at 05.59 pm

I had never noticed that the visually impaired may have problems with simple app icons…


gravatar

13

permalink this comment David Wed Apr 7, 2010 at 02.07 am

At a recent expo I saw a preview of PS5 and cannot wait for it to come out.  I think that with each advent of the Adobe products they become more and more useful to the likes of me, the less creative.  This is a good thing as it lets me feel creative.

I can only imagine that in your hands these tools make your life so much easier.


gravatar

14

permalink this comment Don Engel Wed Apr 7, 2010 at 07.03 am

I personally will be sad to see the colorfield/lil’ boxes go. Like the periodic table, I thought the CS3-4 icons were brilliant. Clean, simple. They make great pillows, too.


gravatar

15

permalink this comment Ryan Wed Apr 7, 2010 at 08.26 am

Every time a new version of Creative Suite comes out I don’t like the icons, but it’s only because I’m so used to the old ones. They all grow on you and I’m sure the new icons will be great.

On a separate note, how amazing does content aware fill look. I don’t even believe it’s real!


gravatar

16

permalink this comment Shawn Cheris Wed Apr 7, 2010 at 05.36 pm

Chuck Lasker said:

I hope those CS5 icons are not what they end up with. Regardless of their statement that they are trying to accommodate the color blind, I, being color blind, cannot tell the difference between the DW and AI icons. They need to add shape differentiation to truly be usable for us.

Those aren’t the actual icons, just color examples. The article actually makes a point of saying that this is not the actual work, but a hint about what it might look like. The real work will be revealed soon. You’ll also be pleased to know that we did real studies with color blind users early on with the actual icons.


gravatar

17

permalink this comment Martin Wed Apr 7, 2010 at 06.13 pm

CS3 icons were ugly, CS4 were awfull and CS5 are even worst !


gravatar

18

permalink this comment Denis Wed Apr 7, 2010 at 09.58 pm

CS is a great product and O love this blog.


gravatar

19

permalink this comment Veronica Thu Apr 8, 2010 at 12.43 am

I actually liked the drastic design change in CS3 too, and CS4 was an even better refinement. It was a much needed change. Can’t wait to see what comes next!


gravatar

20

permalink this comment Keeling Thu Apr 8, 2010 at 07.48 am

If you are on a Mac without an Intel processor, you will never see the CS5 icons on your computer.

In the Finder, choose About This Mac from the Apple menu. If you have PowerPC, then it sucks to be you.


gravatar

21

permalink this comment MJDeViant Thu Apr 8, 2010 at 12.14 pm

I stumbled upon this while googling…..they look really nice, but I’m not sure I like the old “in a bubble/marble” look. Neat though.


gravatar

22

permalink this comment MarcDL Thu Apr 8, 2010 at 06.38 pm

To be honest… I really miss that Boticelli Lady. I thought in CS2 you could bring here back as splash screen?


gravatar

23

permalink this comment Jae Xavier Thu Apr 8, 2010 at 07.01 pm

If Adobe starts going 3D on their icons… it will be trendy like the letterpress styles.

Nice post, I started getting nostalgic after seeing Illustrator in it’s oldskool days.


gravatar

24

permalink this comment Nicky Thu Apr 8, 2010 at 11.45 pm

only 4 more days and we will finaly see the new CS5, i am expecting a lot off it.


gravatar

25

permalink this comment vladyn Sat Apr 10, 2010 at 09.41 am

eh I love the first retrospective splashes of illustrator - it really turn me back years ago….


gravatar

26

permalink this comment Jackie Sun Apr 11, 2010 at 06.16 pm

I agree - I miss the illustrative icons and splash screens.  I don’t see why they couldn’t combine the letter abbreviations, with something like the small orange flower that they used for Illustrator CS 2 - which was just enough, but not too much in my opinion.  Maybe that was on a splash screen, but it still adds some interest to the blandness of the abbreviation icons, even if they are now going to be placed on different colored backgrounds. The color coding is a nice idea, but they definitely need something else that would be specific to identify each of the different programs, and not the uniformity, or sameness of just blocks and letters.  Just my opinion!


gravatar

27

permalink this comment Fabien Mon Apr 12, 2010 at 01.33 pm

New icons are out on Adobe’s website: http://www.adobe.com/products/

Better than CS4 IMHO, but change are very small since CS3.


gravatar

28

permalink this comment Henk Mon Apr 12, 2010 at 05.19 pm

I’ve just looked at the new CS5 icons, but I’m a little disappointed. I liked the CS4 icons better.


gravatar

29

permalink this comment Jackie Tue Apr 13, 2010 at 01.15 am

This is really interesting, though. I guess it’s what’s “inside the box” and the program, that counts!

http://www.adobe.com/products/photoshop/photoshopextended/?promoid=DTENB


gravatar

30

permalink this comment agtrier Tue Apr 13, 2010 at 02.44 pm

Let’s hope that they have a few more new features in store (apart from the new artwork) that are worth the big bucks that we probably need to spend for this update…


gravatar

31

permalink this comment MJDeViant Tue Apr 13, 2010 at 11.54 pm

Wow…..I personally think those actual icons are terrible compared to the fakes out there. I would gladly take the lasso tool and delete them using the content aware feature to make them like they never existed. BUT, this gives me the motivation to put up or shut up and I am going to take a stab at an icon set. We all know it’s not that important what the icons look like, but I’ll be damned if I’m having those monstrosities on my Win 7 taskbar. To the pen and paper! I shall post my results by Friday (I have classes)


gravatar

32

permalink this comment Jeremy Schultz Thu Apr 15, 2010 at 05.07 pm

I am a beta tester for Adobe and also a software reviewer, so I’ve been working with the CS5 Master Collection for months now. My impression of the icons are not much different from CS4, they look more three-dimensional and some of the text color has been revised so the contrast is more consistent between icons, but if you didn’t like the CS3/CS4 icons you will probably not like CS5 much either.

The splash screens are a different story, they are irregularly-shaped (none are actual rectangles) and unique. I am glad they broke out of the very minimalist design of CS4. Sometimes the irregular shapes make placement of credits and text a little funky or tight. Some will like them, some won’t, but they are an improvement IMHO on CS3/CS4.


gravatar

33

permalink this comment Tim Sun Apr 18, 2010 at 05.06 am

I thought it would’ve been interesting if Adobe took the Macromedia MX style of their glyph approach on lettering for their icons. Then merge those with the simpler square icon that they’ve been using for the CS suites.
I don’t really like the lowercase second letter in the CS icons, particularly in the Illustrator icon. I know .ai is the file extension, but the icon should be Il not Ai.

Having a single glyph would have attempted to created more of a logo for each application, which, in addition to the colors, would help to differentiate them more in my opinion. Overall, I think Macromedia did a better job at branding themselves.


gravatar

34

permalink this comment Daniel Gasco Tue Apr 20, 2010 at 10.36 pm

I hoped to see the macromedia-style icons again(just a wish) but….

I designed 2 years ago this icons for the adobe suite,
maybe, maybe, I´ll just re-design those.

Anyway, you have been working a lot!
so Congrats!


gravatar

35

permalink this comment Kent Tue Apr 27, 2010 at 02.27 pm

Is this really a great deal of progress though? Actually, what the product does rather than the design should be more important but adobe is iconic and its design moves have reverberations throughout thw industry worldwide. Personally, I don’t see it as groundbreaking, just current!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist