CLIENT

Portfolio Project

PLATFORMS

iOS / Android Mobile

TOOLS

Adobe XD,

METHODS

User experience, User interface

DURATION

One Week

ABOUT

‘ice’ is a concept project from a SKIN-style design I created 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 earned the top spot in good user interface application design.

So in this design, I am asking, ‘What if?’ Can those relief-heavy ‘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.

PLAYLIST VIEW

The critical visual ‘skin’ object of the player is a gradient visually raised oval rectangle relief that lifts the play bar controls and the 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.

EQ VIEW

In full EQ mode, the Now Playing area minimizes to a simplified display of rounded album art. The song title 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 set.

The EQ bars coloration features 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 the bottom.

LIKE THE DESIGN? MAKE IT YOURS!

9 + 15 =