Today Adobe is opening up new resources for designers and developers with the launch of an official website for its company-wide design system, Spectrum. From the new Creative Cloud desktop app for Macs to the upcoming Photoshop on iPad, Spectrum is what gives Adobe’s apps their distinct look and feel.
Ahead of Adobe MAX next month, we learned a little more about Spectrum from Shawn Cheris, Director of Experience Design at Adobe. As apps like Lightroom, Fresco, and soon, Photoshop become key products in Adobe’s line of mobile tools, having one consistent experience across platforms is more important than ever.
The Spectrum project began in 2013, long before Adobe formally introduced the design system to the public with a blog post in May 2018. As Cheris’s team refined the principles behind Spectrum, new products and existing teams inside Adobe began to embrace the system.
“The central tenets of Spectrum are to be ‘rational, human, and focused.’ In practice, this means trying to reduce the user experience down to its simplest possible state,” Cheris says. Adobe’s teams embrace the famous Dieter Rams idea of good design being “as little design as possible.”
Lightroom features a similar design and workflow across Macs, iPads, and iPhones.
A drive for simplicity brings new challenges when trying to reinterpret decades of desktop app design — built with keyboards and mice in mind — to newer platforms like iPad OS. Spectrum is the starting point. “Where platforms have a strong point of view about certain interactions, we use the convention that users are likely to expect,” Cheris says. “The ideal is to try to follow the best practices on every platform while making those experiences familiar to users who use our products on multiple platforms. It’s a tough balance that we’re always working on.”
Adobe’s designers try to support cross-platform design for every component in the Spectrum library, like buttons and icons. The best ideas created by Adobe’s teams outside of the system are folded back in. Spectrum also afforded Adobe the opportunity to make a core investment in accessible design. Every component in the system meets WCAG (Web Content Accessibility Guidelines) 2.0 standards, and Adobe is working on 2.1 compliance.
Adobe Fresco and Photoshop on iPad’s prerelease interface (foreground) are cut from the same cloth.
You may have noticed that Adobe’s most recent apps on iPadOS all share a similar user interface. Fresco borrows from Lightroom. Photoshop and Fresco both feature a customizable Touch Shortcut. This isn’t by accident. “Spectrum provided answers to many UI and UX questions [in Photoshop on iPad] from interface components to color systems, and helped unify and coordinate those answers across many simultaneous app design efforts,” says Ryan Hicks, Photoshop on iPad’s Lead Designer. Adobe tried to balance Photoshop’s heritage with fresh ideas for modern touch devices to create a product both familiar and new.
“Part of what Spectrum is meant to accomplish is, in fact, to provide a more modern experience,” Cheris adds. “And ‘modern’ almost always means you have to be a little different than whatever came before.”
Now, the system over 400 designers inside Adobe are already using is becoming accessible to designers and developers who integrate with Adobe products and build plugins for tools like Adobe XD. UI kits, fonts, and icons resources are free to download on the new Adobe Spectrum website, along with comprehensive documentation on Spectrum’s Principles and Best Practices.
“Spectrum is a repository of Adobe’s best thinking to date at any given point in time,” Cheris says. “All of our components are documented here, which represent all of our lessons around usability, accessibility, and cross-platform design.”
You can learn more about Spectrum and download resources for Adobe XD on macOS at the official website. Stay tuned for more coverage from Adobe MAX, starting November 4.