About the project
In 2016, the design team at Adobe embarked on an ambitious plan to unify and modernize the appearance and functionality of the core product offering within Creative Cloud. This included established products such as Photoshop, Illustrator, Premiere, After Effects, Lightroom and InDesign, along with emerging products such as Adobe XD and the mobile/tablet application line.
This led to a unified design language, which we called Spectrum.
A bold new vision for professional creative tools
Later on, my focus at Adobe shifted to helping the company build the first version of Spectrum, Adobe’s design system.
This was a fun challenge, working outward at a level of abstraction that would ultimately impact all Adobe products. My team’s first goal, however, was to modernize the look and feel of the super dense and confusing UI found throughout Creative Cloud (fig. 05.01 ).
This all came together in a series of UI studies where we applied Spectrum’s principles (Rational, Human, Focused) – along with the detailed thinking the team had done on color, scale, layout, UI controls and panel designs – into complete visions for each product in Creative Cloud (fig. 05.02 ).
This was an immense vision, encompassing everything from photo editing, illustration, videography, print design, 3D design and interactive design tools, such as Adobe XD . Spectrum wasn’t just about how things look; it was also about how the workspace is organized, and how to make the creative toolset feel calm, spacious and inviting.
Working on Spectrum taught me that every pixel really matters, especially in dense workspaces. Where earlier versions of Adobe software had needless bevels, inner shadows and other decoration, Spectrum UI was simple and streamlined. We also ruthlessly stripped back the various colors and type styles and made everything a lot more accessible and easier to parse.
The evolution of Spectrum – looking beyond the creative toolset
Adobe’s products serve a diverse array of customers: creative individuals (novice and expert), design studios, document services teams, marketing/analytics organizations, and many others. Despite this diversity, these products are all part of an increasingly integrated ecosystem, so a big part of Spectrum’s job is to bring it all together.
Ultimately, Spectrum grew to encompass a wide array of products and solutions – not just Creative Cloud, but also Acrobat (fig. 05.03 ), Marketing Cloud and Adobe’s various web interfaces.
Spectrum’s design language eventually evolved into a mature design system with multiple implementations – from its highly tokenized Spectrum DNA, to Spectrum CSS and Spectrum React. This also included React Aria, a library of unstyled React components and hooks that facilitates the creation of accessible, high-quality UI components for web applications and design systems. My experience working on Spectrum made me a much more well-rounded and technical designer, paving the way for my eventual focus on platform experiences.
Close
