EUI Music Player
Last Updated on July 5, 2026 by Editorial Team
This music player is the third freebie from the EUI series created by Jim Endicott.
You can download the first freebie here: EUI Sign Form
You can download the second freebie here: EUI Registration Walkthrough
Set against a near-black backdrop with just a hint of grain, this EUI Music Player concept leans into the moody, cinematic feel that a lot of media apps chase but rarely nail.
The three panels you see represent a single flow: the queue list on the left, the now-playing screen in the center, and the contextual options menu on the right.
That’s the real value of this music player UI kit. It’s not just one static screen, it’s a mini interaction pattern you can study and reuse.
The now-playing screen is where the design does its best work. A warm, colorful photo of a woman holding smoke flares sits inside a soft-cornered square, and it’s the only saturated element on an otherwise monochrome canvas.
That contrast is deliberate. Album art or cover photography becomes the hero, while typography, icons, and controls recede into white and grey so nothing competes with the image.
Below the artwork, the track title and artist name use a clean sans-serif with a clear size hierarchy, and the transport controls (previous, play, next, repeat) are simple line icons spaced evenly along the bottom third of the screen.
A thin scrubber bar with elapsed and remaining time labels finishes the layout, which is exactly the kind of minimal, glanceable detail you want in a player that people will use one-handed.
The Queue and Options Screens
To the left, “Next on queue” lists upcoming tracks with the song title in bold white and the album or artist name in a muted grey beneath it.
The repetition of that two-line pattern down the screen makes long queues easy to scan, and it’s a layout you could extend to playlists, saved songs, or search results without any real rework.
On the right, the options panel is a dark action sheet: Save, Add to playlist, Add to queue, Share, and Cancel, each one large enough to tap comfortably and stacked with generous line spacing.
It’s a good reference for how to design a bottom sheet or context menu that stays legible even when everything on screen is grey text on black.
This kind of dark, editorial styling suits music, podcast, or audiobook apps aimed at a younger, design-conscious audience, and it also works as a reference for video players, radio apps, or any media interface where cover art needs to carry visual weight.
If you’re building out a personal project, a portfolio case study, or an app pitch deck, this player gives you a believable, polished screen to drop real content into.
Adapting it is mostly about swapping assets and checking contrast. Replace the cover photo with your own artwork, keeping it cropped to a similar square ratio so the layout doesn’t shift.
Update the track title, artist name, and queue list with your own text, keeping the same weight contrast between primary and secondary lines so the hierarchy still reads clearly.
If you adjust the background from pure black to a dark grey or a different hue, retest the icon and text opacity, since a lot of the secondary labels here rely on being slightly translucent against true black.
Because the palette is so restrained, this player pairs easily with other dark-mode screens, onboarding flows, or profile pages, as long as you keep the same icon style and type scale across them for consistency.
