Portfolio of Web Design and Development - Extraditions, the banishment of Mexican justice

About the project

In 2023, La Verdad approached us with the idea of developing an interactive story for their most recent investigation, a look into how extraditions of criminals from Mexico to the United States negatively impact justice for victims of crime in Mexico.

What we did

The Challenge

The greatest challenge for editorial web development is to produce a website with a unique aesthetic that gives an identity to the text but does not distract the reader.

La Verdad's investigation focuses on displaying data and its origin and constantly cites court cases, statistics, and official documents. The story focuses on the extradition of three Mexican drug traffickers to the United States.

Choosing a style for the website

After reading the story, I couldn't help but think about the style of the portrayal of criminal investigations in films and series. In particular, the screens of computers used by criminal investigation agents have simple text only over a dark background, giving it a “hacker” style.

Here is what we did:

Typography and color palette

We chose a terminal effect as modern terminals do not use the texts shown in movies.

Typography

We discarded the VT323 font, a strong candidate that is monospaced and imitates the 80s terminal style. It's just the style we were looking for.

The font is visually impactful but could be more legible. And that's a big no-no for an editorial website.

Continuing our search, we eventually found Iosevka, a monospaced font that maintains the essence of the 80’s terminals but is modernized and has softer curves.

Color palette

Another critical decision in the website style was the color palette. The objective was to have a dark color palette with high contrast levels, allowing the text to stand out from the background.

Ultimately, we used the Open Source Srcery color palette, a color palette designed to be used in terminals and code text editors.

Putting it together

The combination of font and color palette achieves a modern take on the chosen terminal aesthetic, maintaining readability and visual impact.

In addition, the Srcery palette allows the text to stand out from the background without distracting the user from reading. The high contrast between colors also enables using specific colors to highlight parts of the text.

Interactive elements

Graphics

An important website element is statistics; to display them, we use the AM Charts chart library.

Using a library to program charts instead of a service like Datawrapper or Flourish gave us complete control over the graph's style, content, and behavior, achieving a graphic that integrates perfectly with the website's style.

Profiles

Another essential element of the website is the group of profiles for each of the three drug traffickers. These texts are not part of the story's main narrative but give context to understand the investigation.

While constructing the story and incorporating additional text, we avoided using a multi-page website. This common solution presents the problem of removing the reader from the main narrative.

In addition, the reader’s experience would be interrupted as they have to wait for the website to load every time they search for one of the subject’s profiles. At the end, the reader is expected to return to the main page to continue reading.

There are too many steps for the reader to take.

We decided to display the profiles in a modal window. This way, the reader can view the profiles without leaving the main page and continue reading the story after closing the window without waiting for the page to load.

The result

A website that approaches the aesthetics of criminal investigations with a modern and minimalist style.

Bold colors that do not distract the reader and interactive elements allow the reader to explore the data and context of the investigation.