I recently completed the Adobe XD Challenge from May 2020 where you design and prototype the library and music experience for a music player app using Auto-Animate to create a smooth transition between your library and now playing screens.
I decided to model my design after one of my favorite music streaming apps, Spotify, but with my own creative flair. As this is the second app I designed for an Android, I referenced Adobe XD’s Material Design UI Kit, a Samsung One UI kit I found on Behance.
I noticed that most music players have a mostly black or white background so as not to compete with the album art as they tend to be more colorful. Since I am accustomed to Spotify’s black background and white text and icons, I also chose to use a dark background. Rather than making it pure black, I decided to use a dark blue-violet to dark purple gradient background. During these times, I often listen to music to stay focused and unwind after a long day, and blue and purple are often associated with calm, tranquility, and relaxation.
In addition to the challenge of Auto-Animating the transition between the playlist and the now playing screens, I used scroll groups to create the playlist for you to scroll through the list of songs. I also used component states to prototype liking and unliking songs on the playlist. The album art is images from the Pixels plug-in on Adobe XD as I was not sure if there would be any copyright issues in using the official album art.
You can see how the prototype all came together below: