Published on <a href="https://blog.prototypr.io/designing-adobes-evolving-brand-system-6d243992cedd?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Sonja Hernandez <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kWQe36J26ZePfkKkx5dDsg.png">
A few weeks ago at Adobe MAX, we unveiled a few updates to the Adobe brand system. There were two significant changes: the redesign of the file type system documented in <a href="https://medium.com/@annydesign/redesigning-adobes-file-type-icon-system-language-6efa4aed1b30">Anny’s article</a>, and a new style of product logo. While the file type redesign is a slightly less prominent part of the software, users across the internet definitely noticed the new style of product logos. This article will explain the rationale for developing a different style, our design process, and what to expect in the future from the Adobe Design Brand team.
<h4>First a little background:</h4>
Adobe has a massive product offering with over a hundred fully branded products and services that are mostly split between three sides of the business: Creative Cloud (creative &amp; design tools), Document Cloud (Acrobat &amp; PDF software), and the Experience Cloud (marketing &amp; analytics). For the purpose of this article, I will focus on the Creative Cloud side of the brand system.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GDnq9CzDA_3XQaNJivwGCw.png">The Adobe Brand Architecture.
Before the launch of Creative Cloud in 2012, Adobe’s product logos changed for each release. The software was burned onto discs and shipped every 18 months to 2 years, and it was common for users to have multiple versions of a product on their machines. We needed to change the product logos for each release so that the users could easily tell the difference between CS3 and CS5 (for example).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sia8RvLUHOpNRglcC94YwQ.png">The brand system leading up to Creative Cloud in 2012.
With the launch of Creative Cloud, Adobe moved to shipping software via the cloud. It meant that users would always have the single most updated version on their machine, so there was no longer a need to change the product logos. From a brand designer’s perspective, this was fantastic. With Adobe’s large offering of more than a hundred products, it was problematic to change logos every couple of years, because it meant that at least half of our portfolio was out of date almost all of the time. We were constantly chasing down incorrect logos used in marketing material or on the web.
With the release of Creative Cloud, we could define the Adobe style and stick with it.
We wanted the new Adobe style to be beautiful, ownable, and scalable. While beautiful is subjective, and ownability can come through consistency, scalability was the most important quality to focus on, since we have such a large product offering.
We considered many options and finally decided on reducing the product brand style down to a few elements:
<ol>
<li>Desktop, mobile and web products are on a tile and have a border of some kind. Our desktop products use a square shape, and the mobile products would have rounded corners.</li>
<li>There are two types of logo styles: the two-letter mnemonic and the figurative mark.</li>
<li>The figurative marks are flat, solid shapes with a thin accent line, which uses a lighter color for contrast.</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jib9DvvGWkPlY2kGo0RMvQ.gif">
One of the most recognized parts of Adobe’s branding is the two-letter mnemonic to represent the product names. This system initially came from Macromedia and was used for all Adobe creative desktop products after the merger, starting with CS3. Over the years it has become one of the defining aspects for the brand.
The pros to using the two-letter mnemonic are big: it’s ownable by Adobe and often the most copied or referenced part of the brand. The cons of the two-letter system are the limitations to how well it can scale. There are only so many acceptable two-letter combinations within the Latin alphabet, which can affect product naming.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qNzsRrd8Tj_YmvTEFQFyLA.png">One of the matrixes we looked at while considering a two-letter-mnemonic-only system.
This system can easily be diluted when applied to fifty products or more. We knew that the average consumer would not be able to remember what every two-letter combination represented. In order to keep things simpler, we decided that this combination would just be for desktop creative products and services.
After we agreed on the visual elements of the brand style, we looked closer at color. Before this, we eyeballed the color wheel to try to get our colors to bear the same brightness and saturation levels, while also spreading out across the hue range.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EwiigR3dlYCyfffM9Gd8-g.png">CS5 and C6 color wheels.
With Adobe’s constantly growing number of products, this wasn’t the most efficient and scalable system for us. To remedy this problem, I created an optimized color matrix with a hue stop every 5 degrees. Each stop includes values for:
<ol>
<li>A bright and saturated color, used for the border and two-letter mnemonic or figurative icon;</li>
<li>A dark color, used in the background of the tile; and</li>
<li>A light color, used for the accent strokes in the figurative icons.</li>
</ol>
Now, when a new product comes along, we simply look at what is open and where it makes sense to fit it in.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9s3_k3jAxo429aK3xcNttA.png">Our current color matrix.
We started defining this style with Creative Cloud’s unveiling, but officially launched this across the entire Adobe product line in 2014. With the exception of a few minor changes and slight corrections over the years, it has remained constant.
That is, until last week at Adobe MAX.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8AtHBkJBwNA8xm44PVLb2g.jpeg">Photo of the Creative Cloud product announcements at the Adobe MAX conference. Image by <a href="https://twitter.com/ladanherovi/status/921046997737488384">Ladan Herovi</a>.
<h4>The design challenge</h4>
Working as an in-house brand designer means that our clients are within the company. We work with the Brand Strategy team, product teams, and a handful of cross-functional teams throughout the concept phases to the final design deliverables. In some ways, our designer-client relationship is typical, in that they come to us with an ask, and we deliver work. It is also atypical in the sense that unlike an agency, we get to continually return to the work and make adjustments as we see fit.
A year ago, our client came to us with a new request: to create the branding for the next generation of creative products. These products are being built differently than before, optimized to have the same features and tool sets on all devices, and use the cloud for greater functionality than ever before.
Some of these products would target new areas of focus for Adobe, like <a href="http://www.adobe.com/products/xd.html">XD</a> or <a href="http://www.adobe.com/products/dimension.html">Dimension</a>, while some would be a new take on existing products, like <a href="http://www.adobe.com/products/photoshop-lightroom.html">Lightroom CC</a>. While developing these products, we learned that rather than reducing features in the pro products for new users, sometimes it’s easier to build new, simpler products from the ground up.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*tqhSgjEZiH7EDF7u.png">
This change in product focus led to complications and a lot of questions around the branding. The logic of our initial brand system was designed for stand-alone desktop products, with at the most a companion mobile product. Now, we had to consider the possibility that there might be a family of products (under one product name) that work together across desktop, mobile and web, while also essentially sitting side-by-side with their predecessor.
How do we visually differentiate them, yet stay within our system? We recognized that there would already be confusion with the similar names.
<blockquote>We had shifted brand styles in the past for different releases, but this was different. We wouldn’t be turning over the whole system at once like before.</blockquote>
<h4>The design process</h4>
Since the launch of the brand style in 2014, we had only made small, tiny adjustments to parts of the branding. So slight that the average user probably wouldn’t notice (e.g. reduce shadows, adjust mnemonic spacing, etc). This was the first time in the three years that we needed to consider a more dramatic change, and because of the tight guardrails previously set up to the design system, it was at first a bit uncomfortable.
There was pressure for the new style to represent the Next in a bold way. But how do we do this while also maintaining coherence with the current system? We didn’t want to slap a “New!” ribbon on the logo. Modifiers on app icons tend to make them busy and don’t scale down well in size. The new style needed to work on light and dark backgrounds, and as small as 12px in size.
We looked at a large range of options from border style changes, color changes, shape changes, two-letter mnemonic shifts, background color shifts, background detail shifts, etc. The biggest challenge we faced was making the new icon style fit with the previous system. It needed to be different enough to discern the new product icon apart from the preceding version. We believed that the new icon style needed to feel like an evolution, rather than a revolution.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tE4bmehOut_NKr-sd9kBAw.png">A snapshot of the design explorations for the new icon style.
<h4>Our solution</h4>
In the end, we decided to inherit the language from our current mobile style, since these products needed to communicate that they were the same across every platform.
We rounded the corners and lightened the mnemonic. We felt that if all desktop and mobile products used the same icon, it would signify they are the same product. Lightening the two letters created more contrast to the dark background color, making it easier to read and more accessible, and have more presence than the previous darker letters.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gbzsLnL5Cm-TXu06_2YsAA.gif">The evolution of the branding style.
Our design process took almost a year — from start to product launch at MAX. These decisions are not made lightly, and require buy-in and collaboration across many teams at the company. There’s always a lot of back and forth, meetings, iterations, and presentations around the designs. And, of course, the finished product is always different from the original vision.
At MAX we launched this new style in four products: <a href="http://www.adobe.com/products/photoshop-lightroom.html">Lightroom CC</a>, <a href="http://www.adobe.com/products/dimension.html">Dimension CC</a>, <a href="http://www.adobe.com/products/xd.html">XD CC</a>, and <a href="http://www.adobe.com/products/spark.html">Spark</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*K3X9EH-yGtKyHjS8DPJlJA.png">Adobe’s new icon style.
This new icon style signifies the next generation of products for Adobe. In time, as more products are developed that meet these requirements, more product marks in this style will appear.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lLGwEK-ctRostKCG7v-VwQ.png">The new product icons in the Mac OS dock.
<h4>Shaping the system for future growth</h4>
With product offerings across a vast range of disciplines, Adobe’s product line is always evolving, and so is its branding. Although some may find the visual shifts in branding challenging at first, it is a natural part of a growing product portfolio. Working for several years on a brand system we learn that evolution of the design is inevitable, and allows us to make small adjustments over time, trimming the bonsai tree here and there, looking toward the future and shaping how the system grows.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PJ70rtzRpnO32Y-eFsC4Yg.png"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6d243992cedd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/designing-adobes-evolving-brand-system-6d243992cedd">Designing Adobe’s Evolving Brand System</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing Adobe’s Evolving Brand System

Top Stories