Web/UX/UI
Diseño
Ilustración
Análisis comparativo Billboard Hot 100
Analicé data de Billboard e hice un sitio web para compartir los hallazgos.
2021
Proyecto personal
Mira el código que usé para analizar la data aquí.
🌟 El proyecto
Con el objetivo de aprender análisis de datos en python y mejorar mis habilidades de visualización de datos, decidí empezar un proyecto corto comparando las canciones más populares de los años 2020 y 2010.
✈️ Proceso
Realicé todas las funciones del proyecto, desde el diseño y la ilustración hasta el análisis y limpieza de datos en python.
Para crear la base de datos, junté dos datasets de Kaggle, uno de Spotify con información general de las canciones: fecha de lanzamiento, calificación como explícita, duración, etc; y el otro con todas las entradas en Billboard por fecha con puestos. Utilicé la librería Pandas para hacer todo el análisis y Plotly para las visualizaciones.
La data
Desde un inicio, las mayores diferencias entre ambos años fueron claras : hubieron más artistas y más canciones en el ránking en el 2020. Además, el porcentaje de canciones explícitas había aumentado.
Cuando observé la data con más profundidad algo me llamó la atención de la lista de las canciones que habían llegado al número 1. No solo era evidente el giro musical que los hits habían tenido en la década, si no que ahora habían menos artistas "repetidos". Las canciones más populares ya no eran solamente de Katy Perry o Bruno Mars, había algo más de variedad.
Esta realización, combinada con la reducción en la duración de las canciones y la mayor cantidad de canciones explícitas en general parecían sugerir que en la última década, el cambio musical había sido propiciado por los canales de distribución de música. Streaming vs radio, mayor acceso a artistas variados, menos uso de versiones censuradas de canciones explícitas, trends de internet que volvían a poner canciones de varios años antes en el chart...la radio parecía haber perdido terreno como el metrónomo que marcaba la tendencia.
Entonces decidí enfocar mi análisis en estos indicadores de cambio: géneros musicales, duración, cantidad de artistas, cantidad de semanas en el rank por canción, etc.
Para poder analizar los géneros musicales, decidí enfocarme por el momento solamente en las canciones que llegaron al número uno. Conseguir data precisa de los géneros musicales de todas las canciones resultó ser algo un poco difícil de hacer, así que opté por limitar mi análisis. De esta lista de los que llegaron al numero 1, registré manualmente los géneros y subgéneros de cada canción desde Wikipedia. Consideré como géneros principales (o "padres") los siguientes:
Para cada subgénero, consideré dos de estos géneros principales como "padres". Por ejemplo, en el caso del dance-pop (subgénero con influencias del pop y la música electrónica, a menudo house), sus padres fueron el Pop y EDM. Cada canción tiene entre uno y tres subgéneros en Wikipedia, así que clasifiqué cada uno de ellas en sus respectivos géneros/subgéneros.
Para mantener el análisis simple, limité a los padres a solo dos géneros e incluí el disco y funk en la categoría de R&B y cualquier tipo de música electrónica en EDM.
Otras observaciones importantes incluyeron la cantidad de semanas en el ranking por canción, artistas por canción, artistas en ambas décadas, etc. Una observación interesante que no llegué a incluir en la web final es la relación entre la fecha de primera aparición en Billboard vs la fecha de mejor puesto. No la incluí en esta versión del análisis porque quiero profundizar más en ella. Sin embargo, a simple vista se evidencia que en el 2020 las canciones llegaron a su mejor puesto en mucho menos tiempo que en el 2010.
La estructura
Luego de analizar la data, decidí presentarla en una página web simple, con gráficos y visualizaciones en SVG, por practicidad. La librería de visualización Plotly incluye una función para exportar los gráficos en svg, así que me basé en eso para crear las visualizaciones.
Para organizar mis ideas sobre como presentar el análisis, realicé un Wireframe. Quería que la data pudiera contar una historia, que siguiera una linea lógica. Organicé de esa manera.
El wireframe me hizo darme cuenta de algo fundamental: era necesario adaptar cada gráfico o visualización de data a tres tamaños (desktop, tablet y movil) para que se puedan apreciar bien. Quizá la mayor desventaja de hacer este proyecto con SVG y no con una librería como D3 es que el SVG no es de por si responsive. Tan pronto exporté los gráficos como html desde Plotly me di cuenta también que si quería usarlos como HTML requerirían de bastante customizacion y código para hacerlos ver como o quería. Así que al final opté por adaptar yo misma a tres tamaños cada gráfico que usé en el sitio.
Elegí tres dimensiones específicas que se ajustaban mejor a los distintos tipos de visualización.
Ya tenía el análisis, ya tenía los gráficos adaptados. Quería crear un sitio de una sola página, que alojara este proyecto y su futuro.
Para la parte más "tangible" del proyecto, la web, empecé buscando referencias. Siempre me ha gustado la estética de los instrumentos virtuales o VST, tienen un carisma que es pasado de moda y a la vanguardia al mismo tiempo. Como una idea noventera de futurismo.
En un inicio, quería crear algo con un feeling similar. El tema subyacente del análisis - como el giro hacia el streaming marca tendencia en la estructura y construcción de la música popular hoy en día- parecía resonar bastante bien con este estilo.
Sin embargo, los primeros conceptos que hice con esta idea en mente no me convencieron.
Quizá lo que hacía que esta estética encajara tan bien con los VSTS es que el solo concepto de un instrumento virtual es bastante retro-futurista. Y el hecho también está en que las interfaces sobrecargadas y llenas de rueditas y espectros de audio que son tan comunes en los instrumentos virtuales existen porque la misma funcionalidad del instrumento virtual las amerita. Se ve sobre-cargado, si, pero al final todo elemento de esa interfaz responde a una función importante.
No quería abandonar el concepto del todo, pero si modificarlo. De todas maneras quería que la web tuviera una interfaz oscura, con colores vibrantes contrastantes. Sin irnos muy lejos de la esfera musical, Spotify mismo conseguía esta identidad visual que me llamó la atención.
Decidí saltar a la piscina y probar modificando lo que ya había avanzado. Quizás un poco menos recargado, quizás menos distintos tonos de gris. Tenía ya en mente los colores para diferenciar al 2010 y el 2020, así que partí de ellos para generar más componentes.
Las tarjetas fueron lo primordial. A parte de los gráficos y visualizaciones, toda la información importante iba a ser contenida en tarjetas. No quería utilizar mucho texto en la web (por eso me explayo acá), así que las tarjetas eran mi materia prima para construir el sitio.
Decidí limpiarlas de todo elemento inecesario, líneas, sombras, etc, y valerme principalmente del texto y color. Diferencié las tarjetas con colores por año para hacer la lectura de los datos más ágil.
Enfocandome en limpiar los elementos del UI, conseguí llegar a un concepto que me agradaba. A partir del wirefrme, reconstruí cada componente en su versión más limpia.
Quería que hubiera bastante contraste. Entre el fondo y el texto, la data y el fondo, las tarjetas de un año versus de otro. La escala tipográfica también debía ser contrastante. Se trata de una comparación, un análisis que pone dos momentos del tiempo uno frente a troto, así que decidí remarcar ese contraste.
Para la escala tipográfica use una versión ligeramente modificada de 1.4 (redondeando a menos en vez de a más) para asegurar alto contraste entre los títulos y el cuerpo. Para enfatizar aun más este contraste, puse los títulos en black o bold.
La sección más complicada fue la de los géneros musicales. En el wireframe había planteado tener los dos años uno al lado de otro y separarlos por bordes. Quería que el usuario pudiera comparar los dos estados en un mismo lugar, pudiera ver como la distribución de cada género se había movido.
En mi misión de limpiar todo el UI, pensé deshacerme de ese concepto y poner cada gráfico/card uno después de otro, intercalando años. Pero no funcionaba. No era el mismo impacto. Obviamente esta distribución solo era posible en pc, en tablet o movil no habría suficiente espacio. Al final, conservé la idea de tenerlos juntos pero agregué badges para señalar el año y usé sombras con color difuminadas en vez de bordes sólidos.
La tarea más difícil en realidad fue adaptar las visualizaciones a el estilo gráfico del sitio. Quería ser lo más precisa posible con la data, pero habían visualizaciones que simplemente no eran agradables de leer (como la de abajo, derecha) Tuve que decidir cuando cortar información no escencial y que conservar en cada plot.
Por último, realicé algunas ilustraciones decorativas para dividir la introducción en párrafos y hacerla más fácil de leer. Además hice una ilustración para el header
Desarrollé el sitio en HTML y CSS usando de base una versión modificada de Bootstrap con SASS. El sitio final está en vivo en este link (a través de Netlify)
Sitio final →