DESIGN: Application UI/UX, Web UI/UX, 3D Graphics, Vector Graphics

MANAGEMENT: Agile Scrum, Visual Design and Styleguide Documentation

A hue-adaptive ‘skin’ style music player concept designed in Abobe XD

‘ice’ is a concept project born from an old SKIN style design I created ten years back for an entertainment company. At that time real-world knobs and dimensional objects were all the rage. Since then the evolution towards simplicity has rightfully earned the top spot in good user interface application design.

So in this design, I am asking, ‘what if?’ Can those relief heavy designed ‘Skin’ objects be central, as visual anchors in a simple modern design? Imparting a tactile presence that echos the clean industrial design of the device itself.

The key visual ‘skin’ object of the player is a gradient raised oval rectangle relief that lifts the play bar controls and current track in the playlist.

The same gradient form is used for the track scrubber, inverted for the play/pause dimple, and modified for full-frame buttons in EQ mode.

Using album artwork a circular mask is applied and an object blur on the art itself to create the now playing graphic.

In full EQ mode the Now Playing area minimizes to a simplified display of rounded album art. Song tile and artist are coupled with a simple song progress bar.

The EQ area maximizes to allow easy adjustment of the equalizer settings. The user can select from presets or adjust the bars manually, at which point ‘Custom’ becomes selected.

The EQ bars coloration feature the highlight accents of the application at the ‘bass’ and ‘treble’ ends of the sound spectrum.

The ‘Skin’ relief gradient is applied as the selection point on each EQ bar and in the buttons at bottom.