Logo of UI Challenges
Sign in

Gallery

See what others have created

Audio Player
H

hatefulskirmish

@hatefulskirmish

MediumSaaS

Audio Player

Design a single audio player screen for active listening, not a marketing mockup. The screen should make the current track obvious immediately: show track title, artist, artwork, and playback state in one compact header or card.

Build the main control area around one dominant play/pause control, with previous and next nearby. The scrubber should show elapsed and remaining time, and volume should be adjustable without obscuring playback controls. Shuffle, repeat, and queue can live as secondary actions, but they should still be visible and easy to find.

Include at least one expanded state, such as an open queue, track details, or mini playlist drawer. The expanded view should preserve the current track context and make it clear what happens next when the user taps another item.

Treat accessibility as part of the layout: visible focus states, readable contrast over artwork, and touch targets that are comfortable on mobile and desktop alike. If you include album art or visualizers, they should support the interface rather than compete with the controls.

What to deliver

  • Design a now-playing screen with track title, artist, artwork, and playback state.
  • Place play/pause, skip, scrubber, and volume controls in a clear control hierarchy.
  • Show time elapsed and time remaining on the progress bar.
  • Add shuffle, repeat, and queue access without crowding the main controls.
  • Include at least one expanded state for playlist or track details.

Inject personality into the design with custom icons and a unique color scheme that resonates with the vibe of the music being played.