Hummingbird – Music App UI
Last Updated on August 9, 2026 by Editorial Team
Hummingbird is a music app UI designed by Gulam Sulaman. The package contains 7 iOS screens:
- sign in
- sign up
- profile
- artists
- musics
- equalizer
- now playing
Look closely at the seven screens and a clear visual system emerges: soft off-white backgrounds, generous whitespace, and a single accent color that carries the whole app.
That blue shows up on the sign in and sign up buttons, the equalizer sliders, and the now playing progress bar, so your eye always knows where the primary action lives.
Against that calm neutral base, the now playing screen breaks pattern with a warm pink-to-blue gradient wave beneath the album art, giving the music player a bit of personality without disrupting the app’s overall restraint.
The hummingbird wordmark and bird icon on the auth screens set a light, friendly tone before the user even logs in, which is a smart way to establish brand character on the very first tap.
This kit reads as a genuine music streaming app UI kit, the kind of reference useful for anyone mocking up a Spotify-style concept, a podcast player, an artist discovery app, or any mobile product built around playlists and audio controls.
The artists and musics list screens in particular are worth studying on their own, since that row pattern of avatar, name, follower count, and a follow or play button is reusable well beyond music apps, in social feeds or subscription-based content apps too.
Studying the Screen-to-Screen Flow
What makes this set valuable as a reference is that it covers a full loop rather than isolated screens.
You move from sign up or sign in, into a profile with genre tags and follower stats, over to browsing artists and tracks, and finally into the now playing screen with a working equalizer view.
That progression is worth tracing screen by screen if you’re planning your own app’s information architecture, since it shows how a profile connects to genre preferences, how a track list connects to a detail player, and how settings sit quietly in the header rather than cluttering the main view.
The equalizer screen deserves particular attention. It pairs vertical frequency sliders with three circular dials for bass, middle, and treble, giving you two different control patterns to study side by side.
If you’re designing any kind of audio, sound, or media settings panel, this screen is a compact lesson in how to present many adjustable values without the layout feeling busy.
Adapting the Kit for Your Own Project
Because the layout is so clean, swapping in your own branding is straightforward.
Start by replacing the accent blue with your own primary color across buttons, sliders, and the progress bar; because it’s used sparingly and consistently, changing one value updates the perceived brand color of the whole kit.
Next, drop in your own artist photos, album art, and track titles in place of the placeholder content, keeping the same circular avatar and square artwork proportions so the grid stays aligned.
The typography hierarchy, bold titles, muted subtitles, small metadata like duration and follower counts, is worth preserving even as you change fonts, since that contrast is what keeps dense lists like the artists and musics screens easy to scan.
If you want to extend the kit, use the existing list row and card patterns as templates for screens the set doesn’t include, like a playlist detail page, search results, or a mini player bar, so any additions stay visually consistent with what’s already here.
Pair this UI kit with a matching icon set for playback controls, a soft drop-shadow phone mockup for presentation, or a simple gradient background when you’re showcasing the screens on a portfolio page or in a client pitch deck.
