Daily UI #009 - music player

Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc.

After a relaxing, two-hour long yoga class I was listening to some Eivør (talented Faroese singer), having a peaceful evening and restoring creative energies. I used her imagery and colors of her album cover for Bridges.

I’m always up for a new challenge, so I decided to use a new software instead of Photoshop this time. I picked Gravit Designer. I usually use Gravit for small, vectorized tasks like simple logos, or icons. Gravit is very similar to Adobe Illustrator, in terms of functions that a web designer needs. Keybinds, grids, exporting options are all great, and why not try and use it for creating other graphics? I am a big fan of in-browser softwares and cloud storing, too. Whenever my computer shuts down, or I want to show someone something on a different computer, if we have internet access, I can easily do that.

Even simple projects like this are starting out on paper. You can see that I dropped the idea of a gradient progress bar. That style simply didn’t fit the simple, clean design I was going for. I also dropped the idea of a hamburger menu on the album cover. Let’s say it works with a swipe-right or a “back” button on the phone.

The design is rather simple and clean, using rectangles and ellipses and a little bit of shadow to soften up the sharp edges of the progress bar and the buttons. For previous/next buttons and replay button I took YouTube’s controls as an example.

A simple font like Roboto probably have the character set to support special characters in names, like that of a Faroese singer.