This was a 2022 side project for two things I wanted to practice: designing a whole app in dark and light mode at the same time, and turning the screens into an animated demo. For the subject I picked an app I used every day. I took Spotify apart and rebuilt the parts I cared about most, finding new music, seeing what friends are listening to, and knowing when artists play nearby, as a single iPhone app.
Two modes, one system
Every screen exists twice. Instead of designing dark mode first and inverting it, I built the components (header, cards, rows, banners, and friend activity) with both modes in mind, so a screen in either mode is the same layout with a different set of colors.
- Surfaces: dark mode uses charcoal surfaces rather than pure black, so photography and album art keep their contrast without glowing. Light mode is plain white with a gray search bar.
- App accent: the accent changes with the mode, cyan on dark and pink on light, each chosen to stay readable on its own background.
- Artist color: each artist page carries its own accent matched to the artist’s photography, amber for Aries and blue for The 1975. It stays the same in both modes, so the artist is the constant and the app around it is what changes.
What I rethought
- Discover: For You leads with artists picked for you, and Popular with Friends shows what the people you follow are into, with their faces on each row. A Last.fm import seeds recommendations from day one.
- Artist pages: photography up top, then Radio, Favorite, and Notify, followed by releases and nearby shows. Scrolling collapses the header into a compact bar, so the music moves up without losing track of who you’re looking at.
- Friends: a live list of what friends are playing, a prompt to sync contacts, and the artists that are popular across your circle.
- Shows: the tickets you already have, marked Going, plus nearby concerts with the distance and which friends are going.
Components
The demo
The original demo was an After Effects animation, built from a page of layers I set up for it in Figma: an extended carousel, a taller Friends screen, and a separate tab bar. The After Effects file is gone, so the video above was rebuilt from the screens and layers in the same Figma file.