Music
player
app
UI design student project no. 1
Native app for iOS
Bradley Kunda
The project brief called for the UI design of an 80s music player mobile app, and to prepare for handover to developers.
I was tasked with defining the UI direction of the product, and to contributing further functionalities beyond the very basic ones requested by the developers, namely, to create a profile, search for new artists, and make a playlist.
The app responds to these objectives by incorporating a distinctive 80s visual aesthetic, which is inspired by the neon vaporware style, and by adding additional affordances including a unique system for browsing music that evokes the feeling of flipping through albums in a record store.
See more
The browse screen strips the process of finding music back to its bare essentials.
-
Organised by musical genre
-
Prioritises album art over textual information
-
Recalls the way people found music back in the 1980s.
You spin me right round
It's all neon
-
Color palette uses a double split complimentary rule
-
Two accent colors on a deep purple base
-
Recalls the visual aesthetic of 1980s neon signage
-
Icon set designed for clear identification at small scale
-
Icons evoke the look of neon signage, with broken lines and subtle imperfections
Dominant purple
#522e8b
supportive grey
#676c8f
accent pink
#f06cce
accent green
#7ef067
Playlists are out
Mixtapes are in
What's in a name?
Perhaps not that much...but the concept of the mixtape was too integral to the 1980s music-curating experience to pass up!
-
Original icon set, featuring home, mixtape, search, and playback control icons
-
Designed to work with neon color palette
The look and feel of the 80s
For my first design project, I was interested in the challenge of developing a product that drew on an historic period characterised by such a strong visual aesthetic.
-
Design objective: to make an app that evoked the 1980s without making it look like it was made in the 1980s
-
Practical skills:
-
Learnt industry-standard tools (Sketch, Craft suite plugins, InVision)
-
Developed my understanding of usability heuristics, grids, icon design and wireframing.
-