Portafolio de diseño y desarrollo web - Las Fichas de Coca Cola
Uno de los trabajos más notables que Nicolás y Miguel han desarrollado como parte del equipo de POPLab. El reportaje de Kennia Velázquez fue ganador del premio internacional Fetisov (FJA) en su edición 2022.
- Publicado en
- Laboratorio de Periodismo y Opinión Pública (POPLab), CONNECTAS HUB
- Año
- Características
- Una aplicación de una página (SPA) desarrollada con Svelte, MDBBootstrap y GSAP
Sobre el proyecto
En 2019, en colaboración con CONNECTAS Hub, POPLab publicó una investigación sobre la influencia de Coca-Cola en la salud pública de México.
Qué hicimos
- Framework: Svelte
- Animaciones en puro SCSS
- Explorador interactivo de personajes
El reto
La investigación de Kennia Velázquez, incluía una base de datos de las relaciones de distintos personajes con Coca-Cola. Era particularmente importante que esta información fuera fácil de consultar y que se pudiera navegar de manera intuitiva. Además, siendo un reportaje sobre Coca-Cola, nos pareció interesante la idea de hacer que el sitio de la investigación se sintiera como un sitio de Coca-Cola.
Decidiendo el estilo
Paleta de colores
Para lograr que el sitio se sintiera como un sitio de Coca-Cola, decidimos usar la paleta de colores muy similar a la de la marca.
Tipografía
Además, usamos una tipografía para las cabezas que se sintiera como la de Coca-Cola. En este caso, Lobster.
Sin embargo, Lobster es una tipografía muy estilizada y no es muy legible, por lo que no es adecuada para el cuerpo de texto. Para el cuerpo de texto usamos Roboto, una tipografía que se siente más moderna y que es muy legible.
La animación de portada
No hay nada que esté más asociado con Coca-Cola que sus bebidas gasificadas. Por eso, decidimos poner una en el fondo del portal.
Esta animación es el resultado de combinar distintas técnicas de animación en css, algunas funciones de SCSS y algunos assets desarrollados por el equipo de producción de POPLab.
El explorador de "Fichas"
Para mostrar las distintas conexiones entre personajes y Coca-Cola, desarrollamos un explorador interactivo de "fichas" llamado "La colección de Coca-Cola". En este explorador, se pueden ver las fichas de distintos personajes. Hacer click en una ficha muestra las conexiones de ese personaje con Coca-Cola, así como la información de sus puestos en el gobierno mexicano.
El resultado
El resultado es un micrositio que, en la opinión de Nicolás y Miguel, se siente más "Coca-Cola" que los sitios de la empresa. Lo cual aporta a la experiencia de lectura de la investigación.