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.
(Via Inspiration series: Package Design | Veerle’s blog.)
