Sound Moods

UI, Personal Project

This was the last personal project that I made.

Most of my current job relies on making design decisions through design guidelines, manuals, accesibility, etc. So this was mostly to have some fun with the music I'm listening to. (In this case, J-pop band, YOASOBI)


Color Palette

The color palette was made with YOASOBI's main color from the single Gunjou (群青), making some variations with opacity and saturation. For other areas, the use of gradients.

soundmoods-color-palette

Interface design

The main screen has 3 sections.

My Moods has a list with an horizontal scroll, with the playlists you've created.
New is a selection of the latest releases from your favourite artists.
Recently loved puts your whole favorite songs in a list.

soundmoods-screens-one

Artist section features an intro image with number of subscribers/followers, latest release, Most loved songs (as in saved by the users), albums and singles with an horizontal scroll.

soundmoods-screens-one

A component for locked screens shows the image from what's playing at the moment, name of the song, artist, the option to love or un-love the song and the usual music controls.

In the Playing Now screen, there is the image from the album/single. The next row shows at the center song name and artist, at the left the queue, and at the right the loved button. The final row, has the time bar and the usual music controls (repeat, before, play/pause, next and random).

In the minimized version, it'll only show the song image. name of the song, artist, time bar and play/pause button.

soundmoods-screens-one

And that's it, I know it lacks some of technical and accesibility things, but making aesthethically pleasing projects is kind of eye candy for me, and I enjoyed the process :)