generative design
Spotify Wrapped
Downloadable poster of the most played song using computer graphics to generate it automatically within the annual Spotify Wrapped.
Project overview
Group project
Computer graphics
Role
Graphic designer
Duration
6 weeks
Tools
p5.js
Figma
CHALLENGES
The main challenge is to define a context in which the use of computer graphics is relevant and coherent, so that the proposal makes sense both visually and functionally. In addition, to find the best design idea and then adjust the details to formalize it as faithfully as possible.
OBJECTIVES
Develop a p5.js sketch for the final result
Apply design knowledge for the layout
SPOTIFY WRAPPED
Where is the memory of the most listened to song?
Music accompanies many users throughout the year, when the annual Spotify Wrapped is published, it presents a summary and captures the evolution of each user in a personalized way through statistics and animations.
The only element downloadable by the user is a general summary of the year.
DEFINITION
The most listened to song as the soundtrack of the year within the Spotify Wrapped memories album
Adding a downloadable poster of the most listened to song of the year can turn its essence into visual art, generating a personalized element for each user.
Objectives
Redesign of the most listened to song section
Attractive design to capture the attention of users
Incorporate download elements
Development of a visual narrative that reflects the evolution of the song
Requirements
Using the P5.js Java Script library
Accessing platform data to deliver real results
Design applied to a mobile device
Conditions
Copyright, make it clear which artist owns the song
Incorporate the Spotify app logo
Follow the Spotify Wrapped style
REFERENCES
Information, data and technical aspects of the songs as the main visual element in the design
Shazam
App that uses a complex algorithm that takes advantage of techniques that process digital signals and matching patterns to recognize songs from audio fragments through Audio Fingerprinting.
It collects spectrograms created by each song and saves a graphical representation of the key characteristics (frequency peaks, amplitude patterns, distinctive elements of the sound). This is sent to the database for comparison until a match is found.
Beethoven: Generative Music Artworks
A unified system that represents each individual album and the sound recordings within. Designers selected a track from each album and, using a Fast Fourier Transform algorithm, altered the frequencies in a radial fashion, resulting in a dynamic visual representation of the music.
LAYOUT
Visual elements that attract the user and represent the song in a simple way
Spotify logo
Start and end of the Wrapped
Album title
Animated elements representing the song
Title and artist
Technical elements
Number of reproductions
FINAL DESIGN
Graphic synthesis of a song with animated elements
You can see the code for the moving poster by clicking the button, and a prototype in the following video.
The user can choose the part of the song that will appear on the poster, so that in addition to being their most listened to song, it is also the user's favorite part.
VARIATIONS
Choosing is always welcomed, the more options the more customizable
The option to choose the poster background depending on the user's preferences has been added.
Posters of other songs
UX/UI design projects
Product design projects