DailyUI 009 – Music Player

I’ll skip writing about challenge 8 – a 404 page – because I felt like I didn’t have much to say about it. But please check it out on my Instagram.

So 9 was a music player and I had been looking forward to this one for a while, as I had seen people do these before. I had many ideas of how it could have been executed. What I ended up with was a combination of what I thought looked good as well as had all the functionality to make it usable in a real world scenario. In the end this made it seem a bit more vanilla than I wanted, but at least the usability is there.

My biggest inspiration here was the Pocket Cast app’s now playing screen, as I think it is absolutely one of the most beautiful music players ever made. The way it grabs colours from album art is impeccable and that’s something I wanted for this design.

That is why I chose Big KRIT’s Cadillactica album as well. Not only because it’s a great musical experience, but also the colour scheme of the cover itself is great. I wanted the design to reflect these colours, grabbing the background colour from the biggest palette in the cover – in this case purple – and an accent colour from the most contrasting palette – which was gold. I didn’t want to overwhelm with the accent colour, so I chose to only let the play button and the scrubber be coloured in the accent. In the end it became a very pleasing palette to look at.

One of the biggest points for me when listening to music is album art. As someone who likes big, impactful images I wanted the art to be a big focal point. Which is why I chose to make it cover the screen edge to edge, without any cropping. One pet peeve of mine from for example the Google Play Music app is that it expands the art so much it gets cut off, which is something I wanted to avoid.

The other big point is the play/pause button. I decided to enlargen it, giving it one of the biggest focuses. The rest of the buttons are sized appropriately I think, having the most important functions directly viewable from one single screen. From the top left these are: favourite, playlist/queue, repeat, previous track, next track & shuffle. All these were as always made from scratch. I must admit a big inspiration for these were the Play Music app itself, except the playlist/queue icon. That one felt more like the one Spotify uses.

The scrubber is also a bit different from what you usually see. I decided to let the already played part be bigger than the unplayed part to give it more emphasis. I also squared off the pin point of where it is at to give it a bit of a different feel from the normal circle.

In the end, I’m pleased with what came out. I do admit I didn’t play around enough with what it could have looked like, but as I said starting this post out, there’s more real world functionality here rather than out of the box design. And I’m please with that for now.