Day 1 - Music App Home Screen

Day 1 of the 30 day challenge has presented me with the opportunity to design one page of a music app—the “now playing” page.

First, I started by listing the features a music app would require:

• a navigation with home, search, library, and my account

• a like/heart button

• buttons to play, pause, shuffle, repeat, last, and next

• time/length of song

• album cover

• song title, artist, more about the song or artist.

Next, I began thinking about placement and how the user would use the app. Where does the play button need to go? Somewhere easily accessible. Should the album image go in the middle of the screen? More towards the top? Should the user be able to see a preview of the next song? What buttons are most commonly used and how big should they be?

Here, you see my mid-fi wireframe with which I played around with placement of images, icons, and text.

I decided that I liked the idea of being able to scroll back and forward to songs and the preview of the song album covers behind the “now playing” image allowed me to do this.

In addition, I wanted a separate image for the artist so the user can easily click the artist to go to more of their songs, their bio, or see similar artists.

I was intentional with the typography hierarchy so that the most important text stood out the most.

After an hour of working on this project, this is what I came up with for the final design:

Today’s wins:

I created and completed a full low fi wireframe before starting my high fi wireframe. This was a big time saver because I didn’t need to move many items around on the final draft. Big win for me—improving my patience with the ideation process.

Typography hierarchy. I do think I went a little outside my comfort zone with text size. Historically, I have played it safe and didn’t have much contrast in text size, but as I learn more about visual hierarchy, I am getting the hang of headline vs body text size.

I’d love to hear your thoughts on this design or my design process. Feel free to leave some constructive feedback below!