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

YEAR

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

Figma Mockups
Development
Development focused mainly on integrating the Spotify API into the website using JavaScript and jQuery. The site was then styled with HTML/CSS and hosted through Cyberduck.  

My Dev Environment

COLOR & TYPE

My first step to was to assign each genre a style (color and font) based on existing Spotify playlists, scholastic research, and personal taste. These styles were stored in a .json file that would be referenced with each API call.

Examples of Genre-Based Color Pairings

GENRE & ARTIST 

Each time the Genre or Artist buttons are selected, a style algorithm identifies the track or artist’s genre. That genre is then used to filter the previously mentioned .json file for the genre’s corresponding style. Once the genre’s style is found, it’s plugged into a separate color algorithm that finds 1-3 complementary colors.

Examples of Artist Cards

TRACK

This genre-based process was too complicated for Tracks. Instead, eyedroper algorithm gets 3 contrasting colors from the track’s cover art.

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