Ribbon


WHAT

With the slogan “Your Spotify Wrapped with a Bow”, Ribbon is a website displaying visual-focused infographics of users’ Spotify listening data. My baseline goal was for each musical data point (song, artist, genre) to visually reflect itself through its style (color & font).

WHY

For my final project for Introduction to Web Design, I wanted to combine my passions for music, color design, and coding.

HOW

The overall design mirrors Spotify’s brand design through bold, minimalistic combinations of shapes and colors. Then, using the Spotify API, color palettes and type are personalized to each user depending on their top songs, artists, and genres.

Mockups made in Figma.
UI/UX assets designed with Illustrator.
Site coded using HTML/CSS and Javascript. Hosted through Cyberduck and Github.

TASKS

Web Development & Design
API Integration
UI/UX Design

TOOLS

HTML/CSS
Javascript
Illustrator
Figma

TYPE

School Project

TIME

Fall 2023
Prototyping
Drafted the user flow, page layout, and visual identity using Figma.

Figma Mockups
Development
This project had a lot of firsts for me, from integrating the Spotify API to creating a card system. The final site is a result of several tutorials, articles, and forums.

My Dev Environment

COLOR & TYPE

Assigned each genre a style (color and font) based on existing Spotify playlists, scholastic research, and personal taste. These styles were compiled into a .json file that would be referenced with each API call.

Examples of Genre-Based Color Pairings

GENRE & ARTIST 

For genre and artist cards, a style algorithm identifies a track’s genre, corresponding style, and 1-3 complementary colors.

Examples of Artist Cards

TRACK

For track cards, an eyedroper algorithm gets 3 contrasting colors from the track’s cover art. Previously, I tried (and failed) to get the genre of the tracks’ artist.

Examples of Track Cards
Final Product
Final features include:
  • Successful integration of login authorization & API data fetching
  • Time and data type filtering
  • Personalized graphics, including genre-specific fonts and color palettes
  • Smooth fade-in and fade-out transitions

Landing Page

Artist Cards

Track Cards