Portafolio de diseño y desarrollo web - Extradiciones, el destierro de la justicia

Sobre el proyecto

En 2023, La Verdad se acercó con la idea de desarrollar un micrositio para su investigación más reciente sobre las extradiciones de México a Estados unidos y sobre cómo eso afecta a la justicia mexicana.

Qué hicimos

El reto

En un desarrollo web editorial el reto más grande es darle al sitio una estética única, que dé identidad al texto pero que no distraigaal usuario de la lectura. La investigación de La Verdad muestra un gran enfoque en los datos y su origen, citando constantemente casos de cortes, estadísticas y documentos oficiales.

Además, un punto principal del texto es el perfil de tres narcotraficantes mexicanos que fueron extraditados a Estados Unidos.

Decidiendo el estilo del portal

Al leer el texto inmediatamente pensamos en el estilo de las investigaciones criminales presentados en múltiples películas y series de televisión. En particular, la manera en que las investigaciones se muestran en las computadoras de los agentes de investigaciones criminales. Con un estilo muy 'hacker', texto escribiéndose sólo con fondos oscuros y texto estilo terminal.

Hicimos justo eso:

Tipografía y paleta de colores

Buscábamos un efecto terminal. Las terminales modernas no usan los textos mostrados en películas.

Tipografía

Un candidato descartado fue la fuente VT323, que es una fuente monoespaciada que imita el estilo de las terminales de los 80. Justo el estilo que buscábamos.

Si bien la fuente tiene un alto impacto visual, no es muy legible. Y eso es un gran no-no en un sitio web editorial.

Continuando con nuestra búsqueda, eventualmente encontramos la fuente Iosevka, una fuente monoespaciada que mantiene la esencia de las terminales de los 80 pero con curvas más suaves y un estilo más moderno.

Paleta de colores

La otra gran decisión en el estilo del portal fue la paleta de colores. El objetivo era tener una paleta de colores oscura, con niveles de contraste altos y que permitiera al texto destacar del fondo.

Al final, usamos la paleta de colores Open Source Srcery, que es una paleta de colores diseñada para ser usada en terminales y editores de texto de código.

La unión

En conjunto, la fuente y paleta de colores logran una versión moderna de la estética de las terminales de los 80. Manteniendo la legibilidad y el alto impacto visual.

Además, los colores de la paleta Srcery, permiten que el texto se destaque del fondo, sin distraer al usuario de la lectura. El alto contraste entre los colores además, permite hacer uso de ciertos colores para resaltar y destacar ciertos elementos del texto.

Elementos interactivos

Gráficas

Un elemento importante del portal son las estadísticas. Para mostrarlas, usamos la librería de gráficas AM Charts.

Usar una librería para programar gráficas en lugar de usar un servicio como Datawrapper o Flourish, nos permitió tener control total sobre el estilo, contenido y comportamiento de la gráfica. Logrando una gráfica que se integra perfectamente con el estilo del portal.

Perfiles

Otro elemento importante del portal son los perfiles de los narcotraficantes. Estos textos no forman parte de la narrativa principal de la investigación. Sin embargo, son un elemento importante para entender el contexto de la investigación.

Si bien, una manera común de resolver estas situaciones es hacer un portal de múltiples páginas, esto tiene el problema de sacar al lector de la narrativa principal. Además de que el lector tiene que esperar a que la página cargue cada vez que quiera ver un perfil. Y al final, se espera que el lector regrese a la página principal para continuar con la lectura.

Esos son demasiados pasos para el lector.

Por lo que decidimos mostrar los perfiles en un modal. De esta manera, el lector puede ver los perfiles sin salir de la página principal. Y al cerrar el modal, el lector puede continuar con la lectura sin tener que esperar a que la página cargue.

El resultado

El resultado es un portal que se acerca a la estética de las investigaciones criminales con un estilo moderno y minimalista.

Colores llamativos, pero que no distraen al lector de la lectura. Y elementos interactivos que permiten al lector explorar los datos y contexto de la investigación.