Apr 14
The new CS5 branding
2010 at 12.39 pm posted by Veerle Pieters
A few days ago Adobe announced CS5, I say announced because nothing is actually shipping yet. From our previous endeavor we already knew that something new was coming. The cat is now out of the bag and we get to see what the design team at Adobe has been up to. In this follow up of our previous article we will also let Shawn Cheris, the lead designer for Adobe’s Desktop Brand team do most of the talking.
The legacy of splash screens
In our previous article you could read about the goals that they set out for the branding update. You'll also notice that Adobe wanted to put some of the expression back into the splash screens. The old ones, prior to CS3, all had their own personality. Shawn Cheris says:
One of our first decisions was that the splash screens needed to be the hero again. Prior to CS3, the splash screens for Adobe products were much more illustrative and tended to be the visual focus in our product, while the accompanying icons tended to be a simplified interpretation of that imagery—the "Photoshop Eye", for example:
That all changed with CS3. From that point forward, the icons became the branding focus for Adobe, which was an interesting switch. There are plenty of software products where the product mark is used in some form on the application icon, but it's less common to use the application icons themselves as the product marks, and less common still to make those such a core part of the brand. Since their introduction, the mnemonic and color system have come to represent our brand as much as the corporate logo. At the same time, the splash screen became a natural extension of that system, taking on the same utilitarianism as the icons:
Aicher's Angles
You've also seen in the previous article that an isometric grid similar to Otl Aicher's work for the 1972 Munich Olympics became the foundation of the new visual CS5 system. Let's dig a little deeper into that with Shawn:
We didn't start with the grid, but ended up there as a result of the themes we were exploring: geometry, dimension, and translucency. Here are some early prototypes we experimented with:
From that grid, we developed a kit of parts that would be used as the rough building blocks of our new splash screens:
And those bits were combined to get the final shapes. After a lot of experimentation, we discovered that five pieces would give the shapes exactly the right amount of complexity. That this was also the fifth CS release was merely a happy coincidence.
From there, we added color and spent a lot of time getting the gradients just so. Below are a couple examples of the final result. Our intent was to reference dimensionality without making the forms overtly three-dimensional. The pieces merely form a tangram and never overlap each other, using just the light and shadow to suggest form and depth. We wanted the results to be mostly unresolvable abstract shapes that played subtle tricks with the eyes.
Influences
I'm interested in finding out a little more about the design influences for this. When I first saw the splash screens they reminded my a bit of Escher's work, you know the impossible reality you'll find in it. You get the feeling that he creates a perception of a 4th dimension. Let's hear what Shawn Cheris tells us about that:
One our broader goals for CS5 was to try to have the visual language tie together at every level—marketing, packaging, installation, desktop branding, and UI. For that reason, we first took inspiration from the more metallic feel of the CS5 UI:
In terms of dimensionality, the sculptures of Richard Serra came to mind as did some of the work of M.C. Escher, and each influenced us a bit in their own ways. Light and shadow played a big role in our concept. We were interested in the ways light falls across metallic surfaces and found particular inspiration in BMW's Project Gina. The more we played with light and gradients, the more we started thinking of old lithographic advertising posters, and they certainly were something we looked at:
It's easy to see now, looking back, how all of these influences came to bear on our work for CS5.
The CS5 Icons
With all what I had read in the previous article I must confess that I had pretty high expectations. Seeing Otl Aicher's work for the 1972 Munich Olympics has influenced my mind and I expected something more visual and iconic. When a reader of this blog called Martin linked to icons in the previous article comments I really thought this can't be it. Much to my own surprise he was right! My thoughts with the previous article in mind were that they would re-introduce an iconic something that represents each application. Like a bezier curve with point and handles for Illustrator for example. So I was very curious how they would do that for each application. I'm eager to find out the thinking behind it so let's listen to Shawn:
Our system is built on color, but there are only so many easily differentiable colors, especially as we start to work on smaller scales. There are a number of our products, for instance, that carry a blueish identity, and we wanted to separate them out a bit more.
To that end, the first big change to the icons was the introduction of a second color, which allowed us to separate the applications a little more when there are more than a few sitting in a row in the OS.
We thought of the splash screens as a series of folded planes, so the icons took on some of that language, along with the same metallic sheen and translucency. The shape has reminded some people of a book, which wasn't our intention, per se. We tried dozens of options, but this arrangement just felt right. The splash screens reminded us of folded planes, so the icons took on some of that language, along with the same metallic sheen and translucency. The shape has reminded some people of a book, which wasn't our intention, per se. We tried dozens of options, but this arrangement just felt right.
From CS3 to CS4 and CS5
While looking at the splash screens my creative mind wandered off to think of a possibility to reflect the beautiful splash screens in these icons. I even did some quick sketching but quickly came to realize that you need several different pieces to convey that Escher like effect. Hard to replicate that in such tiny space, while keeping in mind that it needs to work in small size too. The splash screens also use different planes and angles so you would need to apply that in the icons as well. Would destroy the simplicity and accessibility of these icons I think. Like in many cases easier said than done!
All CS5 icons
Bits and Pieces
If you missed the previous article I will come back to the fact the only two or three designers are doing all of the strategy and execution work for this. I always assumed there were more people working on this. Each CS release produces thousands of assets. I wanted to hear a little more about that from Shawn:
I did a file count on our production folders when we were just about finished with the last products and there were almost 6,000 files. All-in-all, two of us created well over 10,000 individual assets in just under six months. I gathered some of the assets for Flash® Professional to give you an idea of the range of assets we create. You can see that the angular language from the splash screens was carried through to banners and other assets, albeit in a very subtle way.
For every icon (including all of the file type icons that live in the file system), we create nine optimized versions at various sizes and transparency support (some OSes don't fully support transparency), an effort that really adds up. Flash® is on the easier side for file icons, but some applications have quite a lot. Photoshop, for instance, has well over 100 associated file types.
A couple of our icon sheets
The type on the second smallest size is actually a custom cut of our proprietary typeface, Clean, that was tweaked so that it would mostly pixel-snap and be highly legible at that size. We love our talented type team.
Final Thoughts
My final thoughts are that if you see everything together it makes senses. The icons are a small improvement over the previous ones. I like them, but not in a way that they make me really enthusiastic. They just fit within the branding package. Regular readers of this blog will know that I love geometric shapes, I've used them in some of my tutorials and in the backgrounds of duoh.com. I'm also a huge fan of Maurits Cornelis Escher work. The splash screens are my favorite part in all this. Really clever to use the grid for that and come up with all the different splash screens. The art behind the launch event was also of great quality. I didn't see the package in real life yet so I can only judge from what I've seen on the site. Didn't find anything big so far. But from what I can see it has that Escher like effect going as well.
CS5 was a massive challenge that took almost a year and a half to complete and we're really excited to finally present it to you. There's more great CS5 design to be revealed by way of packaging. We collaborated early on with Tolleson, and shared some of our early prototypes. They've done some truly lovely packaging and all of our work fits together very well. We look forward to hearing the community reaction.
The CS5 Branding work was conceived and executed by Ryan Hicks (lead), Shawn Cheris and Dave Nelson. I like to thank Shawn Cheris for giving me the heads up again.
70served
1
Hmm, that’s quite an interesting look at the evolution of the icons. I am not sure if I like them though . . . they look . . . interesting.
I’m pretty sure they’ll grow on me eventually though.
2
Reading about the whole branding process it’ so interesting! Though, I have to say, the new cs5 icons look a little bit too thick and clumsy.
3
I see a lot of people who see the icons and aren’t impressed because they think it’s just a bunch of gradients put together. But the attention that’s given to the tiniest details is just brilliant and it’s great to see where they draw inspiration from.
Reminds me of the Charles Mingus quote
4
I have a bad feeling about the new icons and splashscreens. The colors are really awkward.
5
I’ve been running the Photoshop CS5 pre-release for a while now and the one thing that struck me about the new splash screens was that I liked the idea, but the execution was clumsy.
It seems that the Photoshop splash is the smallest of all of them (unfortunately you’re not showing it here) and once the author credits are thrown in, it starts becoming very cramped and awkward.
It seems odd that their flagship product would be the one that looks the worst.
6
I love the insider’s view of the assets. It’s a great example of all the hard work it takes to even create an icon sheet.
7
I think you need to mention Max Bill’s 1972 Munich Olympics poster as well, especially with it’s colours.
The old lithographic posters advertising posters remind me of the old Adobe Streamline (3.0?) branding, but I don’t see the connection with the new branding.
8
Great article. It’s always nice to get a little inside information on how such impressive products come up with their branding.
9
Nice article, but the question we really need answered is ‘will CS5 splash screens insist on staying on top when starting up in OSX?’...
10
I don’t mind the icons, they’re still close enough to what I see now that I won’t have to reprogram my brain with a whole new look.
I absolutely HATE the new splash screens though. If I upgrade from CS4 I will be leaving my apps open so I don’t have to see those horrible things much.
11
Excellent article! I’m eager to test the new PS5 soon!
12
interesting, i prefer the CS4 designs. simple and classy!
13
Interesting post, enjoyed reading it. Thanks
I think the icons for CS3 worked the best, simplicity always works best.
14
I don’t really understand why all the criticism to the CS5 general artwork. I like it, it’s new and different. It seems to me that now everything Adobe-related deserves to be insulted. What a shame.
15
Interesting background - but i’m afraid the work and details won’t be much appreciated. Luckily the designers could follow their vision but usually the client’s spouse steps in and says sth like “Why don’t they look like little books?” ;)
16
Interesting read, thanks Veerle!
As a kid I always liked the early Photoshop splash screens, but I thought that the CS3 redesign was superb. I loved the complete minimalistic approach. I thought it symbolized some kind of esotericism. It was just cool to see the program boot.
I think these splash screens are even more interesting! Although I can imagine what Andrew says in these comments.
But the icons…
The double color logic makes sense, but they’re just kinda ugly.
17
Looking good. If only those screens would be good citizens and not sit over every other open program for half a minute, that alone would be a good reason to upgrade.
18
Can’t say I’m a fan of the new splash screens. I guess it’ll be one of those things that I will grow to accept.
19
I actually really like what I’m seeing. My only criticism about the whole set is the Flash program icon - the orange “Fl” looks like it’s getting lost. Feels like more contrast is needed there.
I would have liked it if they kept the text white as in the CS3 edition.
But otherwise, I really like the minimalist approach. It’s clean and professional. We’re long past the complicated collages. I think the minimal approach leaves me with the feeling of being presented with a nice blank canvas to work with each time I open the program.
Just my two cents. :)
20
That was a fantastic read. Great to see how much thought and enthusiasm that has clearly gone into the final products.
Great to see the splash screens coming back to their former glory, I can’t wait to be running CS5!
21
What a very interesting and all round complete post!
I absolutely love the new isometric branding, it has a visual consistency yet each splash screen is unique. Really great work Adobe.
I cant wait to start using CS5.
22
Hello, it’s my first comment… According to me the design is better in Cs5, it’s more unobtrusive; it’s a trivial but meaningful reason.
23
Its interesting adobes branding is one of the first things you might see when your on a creative wave.
24
Nice article! Beautifully illustrated and fun to read
25
The gray “Xx” splash concept shape and the Dreamweaver splash shape look like either fish or boxing gloves. Since they are for “splash” screens, I think I’ll go with fish.
26
I think the colors are mostly fine and close enought to the CS4 alternatives that its not a big shift which is good. However those splash screens really got to go, they just look aesthetically challenged, clumsy, and unbalanced. It would be nice to see some curves lightly overlaid over the main forms but overall I dont really like them at all.
I suppose you only have to see it for a few seconds when booting up so not too bad but still - UGLY.
27
Thanks, Veerle—this was a very interesting read!
Also, I might add one other tiny (but also interesting) detail—the splash screens were not also conceived and executed by Ryan Hicks, but also handily crafted in Adobe Fireworks (mentioning this fact here because I am sure Adobe will never publicly avow they used Fireworks to make the artwork! they like Fireworks in the shadow…). Fireworks really excels with any kind of design work for screen—one of the reasons why I love it so much!
Overall, I can say that actually like the new splash screens, icons and logos for CS5. They breath some fresh air! :)
28
Am i the only one thinking that CS3’s white text in the icons is much more readable?
29
Lots of comments about it, but most ppl here already made them…
.
._ Of all, CS3 icons still gets me by the balls, the black transparency on CS4 is cool, but you gotta luve white…
.
._ I just keep thinking to myself, wouldn’t it all look a lot nicer without all the gradients?
.
._ And the splash screens, why must they point downwards? Why aren’t the lines ascendents? Should we get depressed just by opening the programs? Couse it surely points that way…
.
._ Course I’m being a little extremist here, the color compositions are lovely, and the gradient is a trend,so, if you want to communicate you’re selling trendy software, the should look trendy…
.
._ The Macromedia MX (2002) look still appeals to me, while Adobe was all about illustrations that said nothing about their products, Macromedia was all about branding!
30
Awesome post, thank you for compiling it!
31
Sometimes designing stuff is like comedy. If you have to explain the joke, it ain’t funny.
32
I am loving the new concept. The splash screens, the icons and specially the colours look great. Great work!
33
Why does the Bridge icon have dark text compared to all the others?
34
I prefer and miss the “old” icons and splash screens. They were miniature works of art that, in the few seconds they appeared onscreen, helped put me in the artistic mood.
35
I didn’t know that the CS5 packaging was Escher-inspired. Makes sense though. I love the geometric angles and how they pushed 3D in a new direction.
36
They went through all of that and that’s the best they could come up with. I mean they aren’t bad but to go through such a rigorous design process and end up with average looking icons just doesn’t seem worth the effort.
I know plenty of designers who can fire up photoshop and design better looking icons in far less time. KISS!
37
great article. knowing the inspiration behind the CS5 design makes me appreciate the work so much more.
38
I love the Splash screens! Interesting to look at.
Great write up!
39
Beautiful article, even if I do have to say I preferred the simplicity of CS4.
My only gripe with the Adobe loading screens is the lack of a “Cancel” button for when you accidentally launch one and have to wait 5 minutes to close it again!
40
For me CS3 is better and as I like its interface.
41
They do just look like little books. How did then not see that? And one of the best new features about CS5 (which I doubt I’ll get), is that you’re not forced to have the splash screen in your face throughout the launch process anymore on Mac.
42
Great article, thanx. I personally love CS3 style the best. The color branding is fresh, modern and beautiful. CS3 has better contrast in icons than CS4. Black letters kinda blend with the icons mostly. CS5 is interesting, but after that beautiful simplicity, it seems a bit over-complicated, than I’m used to. And the splash screens? I don’t know. I will have to get use to it I guess.
43
We just upgraded to the CS4 Production Premium with a free upgrade to CS5 when its launched. We are genuinly excited about the new features such as rotoscoping enhancements, content aware fill, puppet warp and the rotobrush.
But those new icons do look a little less classy than the CS4 version.
Good to see where they sourced their inspiration from too! Good work overall! :)
44
Amazing. Thanks for posting. As a beta tester for Flash I have grown very fond of the new look and feel - now if I go back to previous versions, the splash screens seem so…flat and antiquated. Kudos for taking the design chance and pushing the envelope. Love it.
45
Samoo said:
I agree that the new CS5 icons look rather thick. However, after thinking about this I decided I like it. I feel that it subtly creates the feeling that this suite is more substantial than its predictors.
46
Its funny how conservative all the responses are on this site. This evolution is miles ahead of the jump they made from CS3 to CS4.
My favorite is actually the orange Fl which looks very hot while remaining completely readable.
I am wondering what the demographic of this website is; most of the negative response sounds like the type of response I’d expect from senior citizens.
47
I’m all for the new splash screens, the varying 3-dimensional effect makes for a solid “next step” in the visual evolution of the suite.
To me, the icons have less punch and could have easily been left as is. But that’s just an opinion—Far be it for me to tell Adobe how to brand their products.
Great post.
48
I was hoping we’d be past splash screens already. Even the original Mac OS X 10.0 guidelines (what, 10 years ago) recommended getting rid of those workflow disrupting, pointless boxes and leaving launch feedback to the bouncing icons in the Dock.
At the least they should be smart and hide when switching apps, please.
49
I have never been a fan of 3d perspective illusion art, seems a bit tacky to me, so I’m not excited by the splash screens. This was however a really interesting read, thanks for posting it.
50
I think the freshest set of Creative Suite splash screens and Icons are a good evolution from the previous one, The broken 3D room looks nice along with the 3D book-like icon set, even though the previous one that had the semi transparent letters was pretty nice too. The evolution chart is really nicely made! I wonder what cs6 will turn out to be.
51
They look great. I;ve been liking these icons since CS3.
I think the splash screen of Fireworks does not look abstract enough though. It just looks like an opened box.
Though I have to question about certain icons, like that of Bridge and Adobe Story. They look strange with the text darker than the front square’s color.
For some reason I think the app icons are edible. They look like they taste sweet.
52
Nice, thats it. I dont care much about the branding of the suite. This software is a tool for me and as I dont care much about the branding of a drill, it is not important to me that they create a whole new branding for every single release. I just need a proper software to do my job and in this point adobe has something to do.
53
I don’t mind the new splash screens. They add some dimension and interest for your eye while you’re sitting there waiting for Adobe’s bloated programs to open. I remember when they used to launch fairly quickly… in the 90s.
I don’t like the new icons. The CS3 icons were best, as others have stated here. Also, as someone else stated, why is the Bridge icon a different color? Maybe Adobe wanted to make it stick out from the rest? But, the darker text makes it harder to read than the others. Since InDesign’s app icon now looks like a book, I am curious to see what they make an InDesign book icon look like. I do like the colors Adobe uses for the different apps, but I think they should’ve put some thought into a logo for each app the way Macromedia did with their MX product line.
54
Take down memory lane. Love the new designs
55
Interesting background, but I wish Adobe had spent as much effort on making their apps less bloated and taking less than minutes to start up.
And fix the bloody Updater for crying out loud.
56
Great post. Thanks for the all the informations accumulated here. Ya, really, waiting for the CS5. Just want to see is it light with loads of weights or weight with lighter things!
57
very interesting article about what happens behind the scenes of such huge projects..anyway, in my opinion CS3 icons were much better than these last ones
58
Really like the new designs - enough of the old CS3 / CS4 but with a twist of new stuff.
I may not like all of the colour combinations, but you have to admit they are unique and look good together.
59
Obviously a lot of thought has gone into this. But what is the reasoning for the different mixture of cases? InDesign has a cap I and a small cap D, but most of the others have the initial character in upper case followed by a lower case letter.
60
Beautiful blog tones. Lime green in particular.
61
The splash screens looks so interseting so far…though the icons seem off to me :\
62
It would be interesting to know how many people work on this, and how all these ideas evolved. we only see final result here. They could have much better product killed in the process.
63
Hmm… interesting to see, but I like the CS4 design much better. It’s clear and simple.
64
Really, I hate these new icons, they look like clunky old 3 ring binders. its like my new clean sophisticated os is not cluttered up with these chunky old boxy folder icons, I really don’t want to see these every day.
65
I will have to agree and say that I like the cs4 design better, also. It’s interesting to see the historical side by side comparison.
66
I just installed Production Premium CS5 and was putting all the icons up into the RocketDock app I use for quick access.
I was running the programs to check the startup and was very surprised (and impressed) with the splash screen.
The icons, yeah, you have size limitations to worry about, so I can see how they are just modified versions of the previous 2 suites, but with a depth that is conveyed with the splash.
But those splash screens; magnificent. I kinda wish they were attached to the welcome screens as well. I don’t want them to go away! :)
67
I like the three dimensional idea behind the new CS5 icons. But perhaps if they added a slight drop shadow behind the cut out text, it would be more dynamic, creating more of a 3D effect and making the text slightly more readable.
A better idea:
What about adding a slight translucency to the front square face, with a mild “polished glass” appearance. And with an ever so slight internal illuminated glow.
That would be stylish, elegant and minimal.
What monkeys have they got designing these icons?
vlado
68
Thanks, Veerle—this was a very interesting read! I like it.
Keep it up.
69
the splash screens simply suck big time, very very very ugly, I liked the minimalistic of cs4, elegant but the new ones just make me… eww.
70
The new Dreamweaver splash screen looks like a fish. Kinda weird.