Now Playing Colors
Now Playing is one of the key, heroic moments within the Sonos App. It serves as a celebratory area to show content artwork at a large scale, and as a practical utility where frequently used playback controls are. This page will be a light case study on explorations that led us to the ultimate customer-facing solution, and how it is woven into the design system.
Considered Options
For the Now Playing screen, we explored many options on the mild-to-wild spectrum. The ultimate goal was always to propose a treatment that would complement the artwork, functioning either as an extended canvas meant to put images front and center, or as a way of providing an art gallery-like level of focus.
Color is a natural way to extend the appearance of artwork, but a reduction of color also has a way of adding greater emphasis to the artwork.
Dynamic Treatments
Glass, blurs, moving gradients, lots of thoughts were proposed for how to make the content feel premium and differentiated.
Finding the right balance
After all the experimentation, we decided that we wanted to apply some form of single-color treatment. This was to streamline the development process, help us make sure partner service logos were well-represented and had necessary contrast to stand out, and as a communicator for states of playback and content identification on screens outside of this view.
We tried many albums on many different colors gauging what level of Saturation and Lightness felt widely applicable.
Final Proposal: Dark Muted
The ultimate solution we landed on uses an algorithmically generated color palette based off the image provided. We did manual tuning to set tolerances for what the max value of saturation and lightness would be permissible. From the most dominant derived color three colors are placed on the screen: a primary background, a secondary background, and a foreground element secondary.
Looping it into the design system
Below is a mapping of where colors are assigned to miniNowPlaying and NowPlaying views.
Example of how different colors related to playback activity map for light and dark mode, plus the calculations used to output their value when content artwork is extracted.
