...Questions? Comments? Want to know anything else?Email Me
After having done some research on music app user interfaces and animations, I was incredibly inspired to make my own vinyl/record-player app. I had an idea for another music-player app in the past, but I couldn't get much out of it (other than the name "AMP" for "Aesthetic Music Player").
I was specifically inspired by the following Behance projects:
I then did some visual research on old vinyl & record players, specifically from aerial perspectives, and created a visual prototype for the centerpiece of the music app.
After I established the graphical UI design, I then proceeded to create the app icons. The initial design was implemented by taking the needle arm layer and rotating it to the center of the "record" icon—as if being placed in a position to actually play the record.
I then proceeded to remove the image background and opted for a solid graphic instead.
Interface Design & Creation
Once the app icon and visual centerpiece were established, I then created the main screen — the music player itself.
Maintaining the theme of the record player, I then implemented a design that spins the vinyl record whilst the music is playing. I also took some inspiration from Pandora for the scrubbing interface — the vinyl will also spin while you scrub.
Album Search Results
I ended up taking a lot of inspiration from Pandora for the app's design, particularly because I think Pandora has a firm grasp on how to design a music player interface. The next screens that were designed were the album search results with the following prototypes. The final render (located on the right) utilizes a "vinyl on case"-type display, which literally places the "vinyl record" on top of its respective sleeve. This allowed for a more cohesive design since the vinyl would be "taken out of the sleeve and placed on the record player mount found in the music player interface".
Then next came an alternate album search result and what the user interface looks like while music is playing:
While Vinyl is a music streaming service, you also have the ability to create custom playlists. In an attempt to further customize your experience, you can add your own album artwork to your playlist's vinyl.
Playlist with blank vinyl artwork.
Playlist with custom vinyl artwork.
Editing the playlist.
Vinyl offers two kinds of search options: Generic search (via the search icon on almost every screen) and Playlist search, which is a search dedicated to specifically allowing you to search for a song or artist to add directly to your playlist(s).
Playlist — search songs/artists prototype.
Playlist — search songs/artists final version.
Generic search interface.
Generic search interface with recent search results.
Generic search interface, all search and results.
Generic search interface, playlist search and results.
Playlist search interface.
Playlist search interface, song search and results.
Playlist search interface, artist search and results.
Song & Artist Result Info
Once an artist, album, or song has been searched, you can tap the corresponding item for more info.
Artist — more info.
Album — more info.
Song — more info.
Artist — more info screen.
Artist — more info screen, bottom.
Artist — more info, full bio.
Song — more info screen.
Song — more info screen, bottom.
Song — lyrics screen.
Song — lyrics screen, bottom.
Lastly, the main interface(s) were created: the Home Screen and the Main Menu.
Vinyl App loading screen.
Vinyl App main library screen — "My Vinyls".
Vinyl App main, main menu open.
Vinyl App, My Vinyls.
Vinyl App, Browse.
Vinyl App Main Screen interface, Sketch Prototyping GIF.
[Adobe Illustrator CC]
All album and artist artwork, information, and Sia biography © each respective owner. The Sia biography was taken from the Pandora app Sia biography in order to present the most accurate and concise artist information.
Nothing on this page is intended to be used for any commercial production or publication and was used with the intent of visualizing and creating an app with the most realistic information and artwork possible in order to convey an authentic-looking design.
"Shikyo" playlist and Featured Playlist artwork created and ©C0deysseus, Leanne Scorcia.
Please refer to my Vinyl App Disclaimer page for image credits.