Music App UI

This project was created for a UI design challenge. The goal was to design an interface for a mobile music app.

Design Goals

Showcase the album artwork – I wanted to create an interface that showcased the album art. To achieve this, I stretched the album artwork as far as it could go while keeping it’s original shape.

Easily re-arrange tracks – I spoke to a few musicians about features that they wanted to see – one of the more popular ideas was a feature that would allow the user to easily re-arrange tracks and set tracks to ‘skip’ if they don’t enjoy a particular track in an album. I designed the second page with that idea in mind.

Experiment with finger usability – I wanted experiment with creating a scroll bar that fits the curvature of the users thumb. After testing with a hand full of users I landed on the slight curvature of the scroll bar. Overall it feels comfortable and is easy to use with one hand.

Design Process

I decided on a color palette primarily made up of blues with touches of violet and magenta. These are colors that are often associated with music and I felt like the dark blue backdrop would not only look nice but would also save precious phone battery by not projecting a lot of light while the app was in use

UI Flow Chart

I created a full flowchart for the app just to explore design options and to get an idea of how the app would function overall if I were to build it out in it’s entirety.

I designed 2 low fidelity wireframes for the interfaces I was going to focus on to make sure that the app layout makes sense in it’s most basic form.

When constructing the final layout I also put together a version where the album art was presented in a circle to compare it with my full album art version.

Finshed Interface Designs
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google