Cadence Music is a music player concept based on prominent color extraction. The color of the interface changes based on the album cover of the currently playing song.
It was inspired by two demos shown during the release of Material Design at Google I/O 2014.
A Music Player Concept
This design appealed to me because it was simple, clean and expressed personality through colors.
Prominent Color Extraction
This was powerful stuff - being able to create a palette programmatically meant a dynamic color palette.
Defining the Visual Style
At the time I was learning how to design interfaces for Android applications. After seeing these demos it struck me that I could design a music player which embodied these ideas - an interface which changed colors based on the currently playing song. Immersion and connection to music were the most important factors for me while designing.
Over the next few months, I used countless music apps across Android and Windows OS. I created a list of interface features that I liked and disliked about each app. I had an affinity for clean and utilitarian design with bold colors and subtle animations. These traits created the foundation for my designs which began with pencil sketches.
With the pencil sketches, I created a visual information architecture for the Now Playing screen.
The information architecture and reference sketches guided my experiments with visual style. I tried numerous styles inspired Material Design, highly rated music player apps, Windows Metro UI and more. The following layouts were created during these trails.
While creating these layouts I became increasingly aware of the design principles of balance, proximity, alignment, contrast and space. I wanted color to take center stage and be the thing users noticed the most, so I created a well balanced layout with lots of space and contrast. To effectively organize information and interactive elements on screen, I grouped them based on logical similarity (song information, primary playback controls, secondary controls and so on).
The result was the current, and final layout of the Now Playing screen.
The duotone color scheme suited was well suited to album covers and created a simple visual hierarchy with a dark background and a bright call to action (the play button). As was my goal, the album colors were prominently and faithfully reflected in and well accentuated by the layout. This can be seen in the above pictures. Starboy is a dark and edgy exploration of The Weekend’s rise to fame and is captured perfectly in the deep blue and vibrant red. Tom Misch’s sharp, controlled guitar notes are distinctly noticeable in all his songs the same way the yellow stands out from the dark grey. And finally, the loving, but somber tone of Maroon 5’s Songs About Jane is felt in the bright and dull hues of red.
The last step in realizing the Now Playing screen was bringing the interface to life. I wanted to see the colors change as the songs did.
Cadence Music is my ongoing journey through Visual Design. I’m a novice by all means, but I’ve learned some important lessons on the way.
Visual design is personal. Cadence Music is a project that excites me because I’m designing a deeper connection to music. Were it not for this personal connection, my work product would have been very different.
Visual design is iterative. Iterate, iterate and iterate. There is simply no substitute of trying out different visual styles and seeing which ones work best for the project. For Cadence Music, I’ve stepped through nearly 30 layout styles now, just for the Now Playing screen.
Visual design is hard, but addictively fun. Playing around with colors, type, layout and composition is something I can sink hours into. The presence of a deadline is always a good thing in this case, else visual design projects would never end.
I’m currently designing other aspects of Cadence Music, and will continue to update this space in time.