diseño generativo
Spotify Wrapped
Poster descargable de la canción más escuchada usando gráfica computacional para generarlo de manera automática dentro del Spotify Wrapped anual.
Resumen del proyecto
Proyecto en grupo
Gráfica computacional
Rol
Diseñadora gráfica
Duración
6 semanas
Programas
p5.js
Figma
DESAFÍOS
El principal desafío es definir un contexto en el que el uso de la gráfica computacional sea relevante y coherente, para que la propuesta tenga sentido tanto visualmente como funcionalmente. Además de encontrar la mejor idea de diseño y luego ajustar los detalles para formalizarla de la manera más fiel posible.
OBJETIVOS
Desarrollar un sketch de p5.js para el resultado final
Aplicar conocimientos de diseño para la composición
SPOTIFY WRAPPED
¿Dónde queda el recuerdo de la canción más escuchada?
La música acompaña a muchos usuarios a lo largo de todo el año, cuando se publica el Spotify Wrapped anual, presenta un resumen y captura la evolución de cada usuario de manera personalizada a través de estadísticas y animaciones.
El único elemento descargable por el usuario es un resumen general del año.
DEFINICIÓN
La canción más escuchada como el soundtrack del año dentro del álbum de recuerdos de Spotify Wrapped
Añadir un poster descargable de la canción más escuchada del año puede convertir su esencia en arte visual generando un elemento personalizado cada usuario.
Objetivos
Rediseño del apartado de la canción más escuchada
Diseño atractivo para captar la atención de los usuarios
Incorporar elementos de descarga
Desarrollo de una narrativa visual que refleje la evolución de la canción
Requisitos
Usar la biblioteca de Java Script P5.js
Tener acceso a los datos de la plataforma para ofrecer resultados reales
Diseño aplicado a un dispositivo móvil
Condicionantes
Derechos de autor, dejar claro el artista al que pertenece la canción
Incorporar el logotipo de la aplicación Spotify
Seguir el estilo de Spotify Wrapped
La propuesta plantea un poster animado descargable en el cual se muestran visualmente los aspectos técnicos de la canción más escuchada del año.
REFERENTES
Información, datos y aspectos técnicos de las canciones como elemento visual principal en el diseño
Shazam
Aplicación que mediante un algoritmo complejo que aprovecha técnicas que procesan señales digitales y patrones de coincidencia para reconocer canciones a partir de fragmentos de audio a través de Audio Fingerprinting.
Recoge espectrogramas creados por cada canción y guarda una representación gráfica de las características clave (picos de frecuencia, patrones de amplitud, elementos distintivos del sonido). Éste se envía a la base de datos para comparar hasta encontrar una coincidencia.
Beethoven: Generative Music Artworks
Sistema unificado que representa cada álbum individual y sus grabaciones de sonido en el interior. Los diseñadores seleccionaban una pista de cada álbum y mediante un algoritmo de Transformada rápida de Fourier alteraban las frecuencias de manera radial, resultando en un a representación visual dinámica de la música.
COMPOSICIÓN
Elementos visuales que atraigan al usuario y representen la canción de manera sencilla
Logo de Spotify
Inicio y final del Wrapped
Título del álbum
Elementos animados representativos de la canción
Título y artista
Elementos técnicos
Número de reproducciones
DISEÑO FINAL
Síntesis gráfica de una canción con elementos animados
Se puede ver el código del cartel en movimiento clicando el el botón, y un prototipo en el siguiente video.
El usuario puede escoger el trozo de canción que aparecerá en el cartel, de manera que además de ser su canción más escuchada, también es la parte favorita del usuario.
VARIACIONES
Escoger siempre es bienvenido, cuantas más opciones más personalizable
Se ha añadido la opción de escoger el fondo del póster dependiendo de las preferencias del usuario.
Pósters de otras canciones
OTROS PROYECTOS DISEÑO VISUAL
Proyectos ux/ui
Proyectos diseño de producto