‹ See more on design systems

How Adobe's design system is driving the next generation of creative tools

by Patrick Faller

Spectrum: The design system driving the next generation of creative tools

Hoyle Wang
Patrick Faller is an award-winning writer, editor, and content strategist, creating and coordinating content and community for Adobe and other clients in the technology and video game industries. He is passionate about design and design journalism.

Adobe’s Spectrum creates a common framework for creating consistent, collaborative, and cloud-centric experiences that put the user first.

Adobe’s products have been cornerstones of the digital creative’s workflow for many decades. Powerful tools, like Adobe Photoshop and Illustrator, have empowered designers and artists to create and innovate in ways only limited by their own imaginations. As the world of digital creativity has changed, so have we. Last year, we revealed Spectrum, our design system, and now, the time has come to showcase its power. Spectrum is the next stage in our user experience, and its implementation, rooted in Adobe’s traditions, is already revolutionizing how users interact with our apps and services.

Spectrum is more than a set of consistent visual elements to be used by our teams when building Adobe apps and services; it is a new set of experience guidelines. These guidelines will ensure our apps remain powerful creative tools while also becoming more intuitive, more approachable, more cloud-based, and more collaborative. Adobe’s Spectrum effort aims to redefine our apps’ user experiences to help 21st century creatives discover their true potential.




Design consistency across apps and across platforms

There’s a lot to Spectrum, and we’ll explore Adobe’s new design system and its many facets across this series of blog posts coming up. But at its heart, Spectrum is a set of principles that defines common experiences across Adobe’s family of current and next-generation apps. If you learn one Adobe tool, you’ll be able to easily pick up a second and have a pretty good idea of how to navigate the UI and get things done, allowing you to quickly amplify your creative output. The same goes for platforms; if you begin a project on your iPad, you should be able to finish it on your desktop or phone. It’s about working where you want, how you want, and always having the opportunity to tap into new tools.

“One of the main benefits of a consistent user experience across our products is skills transfer. We want the time and energy you put into learning one of our tools to pay off when you move to your second or third Adobe tool” said Eric Snowden, Adobe’s senior director of design for Creative Cloud and Document Cloud. If you find a tool in a specific place in one app, you’ll find the equivalent tool in the same place in another app. They’ll look and behave similarly, as well.



Creating a familiar experience across products reduces friction when switching tools.

Creating a familiar experience across products reduces friction when switching tools.


“We pioneered the family of applications, years ago with Creative Suite and now with Creative Cloud. We care deeply about familiarity and interoperability and are pushing both of these ideas further than ever in our next generation apps” said Eric, who leads a large team of designers pushing this initiative forward. Over this blog series, we’ll talk more about the common experience and UI elements you’ll see in Adobe’s next generation of apps, so stay tuned.




Cross-platform, collaborative, cloud-optimized is the future

Spectrum is also about establishing a level of consistency for our products across devices. Adobe is putting a new emphasis on multi-platform systems: creating solutions that will give users the same powerful tools of our flagship apps, like Photoshop for example, in a ‘touch-first’ environment like a tablet or mobile device. Doing this means harnessing the full power of Adobe’s clouds; users are no longer content to work in one place, on one device. Instead, they want to take their work with them, using a variety of platforms and devices to get the job done in different environments and situations.

You’re already seeing the first generation of apps with Spectrum design principles follow this approach. With the launch of the new Adobe Lightroom, for example, all your images are stored completely in the cloud. You can access your images across all your devices, and any edits you make appear instantly on your other devices.



In Adobe Lightroom, images are stored entirely in the cloud. Edits made to an image appear automatically on all other synced devices.

In Adobe Lightroom, images are stored entirely in the cloud. Edits made to an image appear automatically on all other synced devices.


“Expectations of users have changed. Users expect products to be on any device at any time. They expect cross-platform, collaborative, cloud-optimized tools. This demands an entirely different kind of software, so if you’re going to build that and have systems that conform to these expectations and come together as a coherent system, you really have to have a good plan and vision for how that these things are all going to be coherent,” said Khoi Vinh, Adobe’s principal designer.

A new design system for a new generation of user

The software industry has matured and so have its users, who rely on creative tools to get the job done. People now have access to more devices, tools (like the Apple Pencil), and applications than ever before. Spectrum is Adobe’s way of future-proofing its apps, but you can already see these principles rolling out today. There’s Lightroom, mentioned above, which taps into Cloud technology, and Adobe XD, Adobe Dimension, and Adobe Premiere Rush, which make use of new design principles to make them easier to pick up for new users.

With a common design and experience language, these apps are easier to understand for users who already have a base knowledge of Adobe’s apps. For example, a fashion designer that is not trained in graphic and UX design but needs to create images and app and web concepts for their new fashion startup.

“That is a kind of mid-tier customer that isn’t in just one of our desktop applications all day long, but instead is jumping between multiple applications and platforms for a lot of different creative requirements. The Spectrum work is focused on enabling a broad audience to get started more easily, achieve creative success sooner, and easily navigate between creative tasks and applications,” said Khoi.

Consistent visual experiences make it easy for users to use multiple products

Much of the Spectrum consistency effort revolves around defining a design system that optimizes elements and patterns to be used across applications and devices. “Probably close to a hundred percent of the people that use Photoshop also use Acrobat at some point. Even though you might be most familiar with one corner of the Adobe universe or another, the reality is that there are crossover points that users of many products will experience,” said Shawn Cheris, Adobe’s director of experience design, responsible for Spectrum.

“Spectrum’s intent is to create an experiential throughline by repeating a consistent visual system that is like a pattern. We’re thinking about interactions in a generalized way to create a consistency between a variety of Adobe products that did not have consistency before.”




Spectrum Design Principles


This is by no means a one-way street; Adobe’s product design teams are feeding their own experiences and UI creations back into the Spectrum system, which is constantly evolving to be the absolute best set of guidelines and elements it can be. Our series will explore why now is the time for this design shift, and how it will result in better outcomes for all users.




Watch Spectrum unfold

What you’re seeing now is the evolution of Adobe’s products, with input from designers, design leaders, product teams, and engineers. While consistency of experience is our goal, we are constantly seeking feedback from others and allowing flexibility for individual products, to make sure they can offer their services with the best possible user experiences.  

“It’s never about consistency for the sake of consistency. There are real benefits to Adobe but also customer benefits in working this new way. We’ve come a long way,” said Eric Snowden.

As this blog series unfolds, we’ll share the how’s and why’s of this process with the goal of helping our readers implement their own design systems in their own organizations. Follow along to learn about the future of Adobe’s apps and see how Spectrum will revolutionize the way users tap into our technology to fulfil their creative potential.


You might also like

image

Guide

Design systems: The language of scalable design

By Hoyle Wang

image

Adobe Spectrum

Design your team to design products of the future

By Lindsay Munro

image

Adobe Spectrum

Getting buy-in for your design system across your organization

By Lindsay Munro