Spectrum is Adobe's design system. It provides a single source of truth for designers and engineers across the entirety of Adobe's product ecosystem.
Spectrum provides Adobe's standard colors, typography, layout rules, components, patterns and guidelines across every major platform and four color themes. Everything in Spectrum is WCAG 2.0 AA compliant, and implemented in a variety of frameworks, including React, Angular and native frameworks for MacOS, UWP, iOS and Android.
As of of mid-2018, the Spectrum team totals 15 people and incorporates a broadly diverse mix of skills and focus -- design, prototyping, engineering and product management.

The Spectrum website, showing the Dialog component

Adobe Acrobat DC (2018), an example of Spectrum in use

Styles, Elements, Patterns and Guidelines
Spectrum adheres to principles of Rationality, Humanism and Reduction. We strive to be respectful of the user's attention, to meet a high standard of accessibility and to omit any needless complexity in the design. 

Rational, Human, Reductive

Spectrum DNA
When building for scale and complexity, it's important to keep things connected to a single source of truth. This ensures that updates are applied consistently across all of the places where our design constants live, which makes Spectrum a more valuable prospect for product teams.
One way we do this is via a repository of design variables, which we call Spectrum DNA. This repository, which is co-managed by a designer and engineer on the Spectrum team, is a collection of values that define visual attributes -- colors, type styles, padding, etc. -- any attribute of the design that can be expressed as data. 
Data starts in JSON format, and can be compiled to match the needs of the various UI technologies used at Adobe. These variables are consumed (via NPM module) by the various frameworks implementing Spectrum. This allows us to ensure a fair amount of consistency for free, and when we change the value of a variable, it will propagate everywhere.
Empowering Contribution
Adobe has an immense product offering, totaling over 125 fully branded products in market. Serving the demands of such a broad and diverse ecosystem requires a broad coalition of designers, researchers, engineers and subject matter experts. 
Our goal is to open Spectrum to contribution from throughout Adobe. We started with Spectrum Precursors, a site that allows people from outside the Spectrum organization to submit their own patterns.

Spectrum Precursors, showing the Date & Date Range Picker

Adobe XD (Project Sparkler)
Adobe XD is Adobe's flagship creative tool for screen designers, available on Mac and Windows platforms with companion mobile apps for iOS and Android. The product was first announced (under the codename Project Comet) in fall of 2015 and released as a beta in 2016. 
XD originated in 2014 as a project within the Web Platform & Authoring group, with the original codename "Sparkler." I managed the design team supporting this initiative, and was involved in its early ideation and planning.

Early Sparkler demos

Efficiency Enables Play
The initial team working on Sparkler consisted of Talin Wadsworth, Narciso Jaramillo, Anirudh Sasikumar, Tom Krcha and myself. We agreed early on that design is about exploration and iteration -- i.e., playing with ideas. Our mantra became "efficiency enables play."

To deliver on this promise, XD's tools need to be streamlined and intuitive enough to allow people to quickly express, refactor and remix different ideas. So we focused our early discovery efforts on how XD could enable lightning-fast drawing, duplication and prototyping. Some of the explorations during this phase were simple keynote or HTML prototypes, as seen below.

An early prototype demonstrating modifier-key and on-canvas HUD functionality while drawing primitive objects. This eliminates the need to interact with a toolbar or properties panel to make basic modifications to an object.

Design at the Speed of Thought
As our discovery progressed, and as we began talking with other designers, it became clear that speed -- and, most importantly, workflow efficiency -- was a critically powerful aspect of modern design tools such as Sketch, Figma and, eventually, XD. From the beginning, this core value has been embodied in every aspect of the product, -- both in the codebase and the user experience itself -- from starting new projects, to drawing, prototyping and collaboration.

Early explorations of workflow principles in XD, from drawing to artboard management, to prototyping, to object properties, to symbols

A side-by-side comparison of Adobe XD vs. Adobe Illustrator, showing workflow efficiency

Adobe Stock
"Adobe Stock, the company's new marketplace for photos and illustrations, is the biggest piece of news in today's major update to the Creative Cloud."
- Fast Company
In 2015, Adobe significantly expanded the Creative Cloud ecosystem with the launch of a new marketplace of creative content, Adobe Stock. Today, this marketplace consisting of over 100 million creative assets -- royalty-free stock imagery; premium and editorial photography; templates and UI kits; video, 3D objects and more. 
I did most of the design work for the initial launch of Adobe Stock, and, for two years, I built the team that would ultimately oversee the design as the offering grew. 

Adobe Stock - Home page

Early wireframes

Millions of Assets - Right at Users' Fingertips
One of the most powerful aspects of Adobe Stock is its integrations into Creative Cloud applications. From day one, in-app integration was a critical aspect of Adobe Stock's user experience strategy, and this was manifested via multiple service integrations in Photoshop, Illustrator, Premiere, Powerpoint, Google Slides and other products.

Adobe Stock integration into "New Document" dialog in Photoshop

The Power of Great Imagery
Adobe Stock relies on a community of brilliant contributors to continuously create and upload beautiful assets. Therefore, our "customer" included both sides of the marketplace -- buyers and sellers. 
Over time, the team became tireless advocates for the power of the image to tell stories. We pushed to elevate the presence of contributors throughout the site, to improve the economics and experience of selling creative assets, to have more diverse representation within our library of images, and, across the entire product organization, to foster a culture that is deeply in love with great imagery. 

Adobe Stock - Premium Collections

Creative Cloud Libraries (Project Central)
"Adobe’s October 2014 releases display a more focused company intent on changing the way designers will work in the future. Free from the shackles of the desktop, inspiration can now come from nearly anywhere."
- MacWorld
Creative Cloud Libraries allow users to store, organize, share and sync creative assets from directly within Adobe applications. 
The service is the central to many of Adobe's modern workflows, enabling users to work seamlessly from mobile to desktop and across teams and geographies. It also powers Adobe's marketplace strategy, as seen in the Adobe Stock workflows that allow users to buy and contribute creative assets directly from the workspace.
Early Days
In 2014, a cross-organizational effort began to emerge at Adobe, aiming to address this fundamental question: 
How can we reduce friction in the creative process? 
We recognized that creative professionals are working in ever-sophisticated ways. From atomic design trends to increasingly sophisticated collaboration patterns, the methods that support modern-day workflows are becoming more complex. We figured Adobe is uniquely positioned to do something about that complexity. 
This initiative became known internally as “Project Central."
From the beginning, Adobe followed a design-centered approach to solving this problem. Many hours of customer research, conversations with users, whiteboard sketching and prototyping were invested into this effort. 
Clockwise from top left: Mental model sketching (credit: Jonathan Prandato); Design workshop with Character and Creative Dash; Architecture whiteboard sketch (credit: Paul Dorian); Brooke Francesci at a brainstorming session.
Collections of things. From left to right: Mood Board, New York Transit Authority Standards Manual, Mobile UI Kit.
Everyone's a Collector
Users are working in increasingly interconnected ways. 
More and more, users are beginning their process with preexisting content -- from previous projects, from elsewhere within their team, from the community and from the marketplace -- as opposed to starting from scratch.
Supporting customers who work this way necessitates a method for easily storing and managing content that might be useful in the future. And in order for this to be easy, it has to be immediately accessible from within the workspace, allow users to organize and find previously stored content, and sync instantly across all devices.

An early schematic showing intended Library behavior (credit: Nayoung Kim)

Libraries Everywhere
One of the biggest benefits of Libraries are their ability to seamlessly transport content between mobile, web and desktop environments.
Because of this, Libraries have been the cornerstone of Adobe's mobile strategy since moment one. The ability to go out into the world, capture something inspiring or start a project, and have that content be immediately accessible on your desktop is a truly game-changing moment in the world of digital creativity.
Libraries in Adobe Color and Shape (credit: Dave Alonzo & Eric Snowden)
A Big, Beautiful World of Creative Elements
There are many, many things you can create using Adobe's toolset. From imagery, video and layouts to atomic ingredients such as colors, typographic styles, shapes, 3D elements, patterns and looks -- the world of creative elements is truly expansive.
These elements take many forms, and show up in all kinds of places -- web, mobile and desktop. But this incredible range presented a substantial challenge for the design team working on CC Libraries. How do we portray these elements usefully across all of these environments? How do we imbue this system with a voice that is consistent, trustworthy and inspiring?
This is a challenge Adobe continues to take seriously. By investing in design patterns and frameworks that encourage consistency -- yet are flexible enough to adapt to a wide array of contexts -- we are paving the way for a powerful platform for creativity.
Just some of the things that can be put into a library. (credit: Paul Dorian & Ainsley Wagoner)
Back to Top