Day 9 of 100: A Music Player — A water-rising progress bar concept
UI design challenge with context and a process.
So for day 9, I was told to design a music player concept and the first thing I asked myself was:
What are the most important considerations that must be made in order to create a great music player?
- The song must be playable and also able to be stopped.
- One should be able to navigate to previous or next song.
- One should be able to repeat current song or all songs.
- Shuffling song should be possible from the music screen.
- For aesthetic reasons and full user immersion into the song/app, a background image will help reflect the mood of the song with the UI color choices.
- The title of the song and singer.
- Song start time and end time.
Different apps communicate different emotions, feelings and mood to their users, for instance Play Music is vibrant, youthful, energetic with great orange color theme that reflects great desire or hunger for great music, likewise Spotify’s dark theme that tries to make you feel in control and confident about your great music choices — think cruise control :)
So also I asked myself what feeling this music player concept can portray:
What feeling do you want this music player concept to portray?
Lots of options came up:
- theme should feel young and vibrant
- mature
- nerdy
- so serious
- playful
- kiddie style
- cool and refreshing
Immediately the last point hit me hard, cool and refreshing :)
Then I began sketching to reflect the first question I asked which was “What are the most important elements needed to create a great music player?”
And came up with a handful of concepts
After that I asked myself what is cool and refreshing — my immediate thought ran to my favorite color which is blue or anything in that shade.
And lastly the icing on the cake that made the design unique is the water rising progress bar
As the song is playing, the play progress bar rises as if one is filling the music screen with water. Isn’t that cool? You can think of the possibilities and how to make it cooler? You can drop your ideas too in the comment field. Best way to visualize this is to make an animated prototype.
But I think you grab the concept though :)
Notice the water rising progress and flow as you observe the two images and song time.
Hope you enjoyed it? If so please recommend and share. Let me know what you think about it by commenting. Thank you so much for the time as we wait for day 10.
