Loading ...

Responses by Leandro Amorim, partner and creative director, Café.

Background: During the 21st century, thousands of criminal assassinations have occurred worldwide. The Faces of Assassination pays homage to those who have stood against injustice and corruption and paid the ultimate price for it.

Initially, this project began as a book that assembled 50 profiles of women and men who were murdered because they confronted, weakened or threatened criminal groups. The publication presents the outcome of years spent bearing witness and collecting information about the impact these assassinations have worldwide. We have also designed a video that explains the whole project and came up with the artwork for a social media campaign, #assassinationwitness.

After the book was designed, it turned out to be so impactful that we saw the project could be further developed, going beyond the 50 initial profiles. The website came as a natural extension of the project, with a CMS designed to enable the client to update profiles, podcasts and resources, as well as add new profiles in the future.

Design core: The fluid, zoom-like navigation on the profiles page is the hallmark of the project. It’s the most visually and experientially impactful feature by far. The other pages that are key to the whole experience are the profiles themselves: we designed them carefully so that they can take users away from the immersive zoom experience on the profiles page and get them into a “read mode,” where they dive deep into each story.

Favorite details: We’re very proud of the illustration style we chose and the torn paper elements. Together, they tell the story of lives lost and allude to the motives that always revolve around power and money.

Challenges: Design-wise, the most complex challenge was the profiles. It’s a hard subject, and we did not want to be sensationalistic about it. The profiles themselves are quite different from one another: some with a lot of text and images, others with little text and barely a profile picture. Development-wise, the parallax effect on the intro page and the zoom navigation on the profiles page. This is a global website and most of these targeted killings happen in developing countries, so the website needed to work regardless of browser or Internet speed.

Divergent paths: We designed the book first, so the change of medium—from paper to web—was a bit tougher than it if had been the other way around. The website has more design elements, interactions, animations and transitions, among other things, so scaling them down for the book design would have been easier than scaling up for the website.

New lessons: First, as with every project we do, we learned a lot of the subject matter from the experts themselves. Second—and more specifically to this project—we learned how to optimize more effects on the web because of the illustration style.

Navigation structure: We wanted users to be swept away by the experience at first, and then transition to a more attentive mode by reading each profile and listening to each podcast episode—which will be out soon! This switch in mental models was key to having a good, nonuniform experience.

Technology: As I mentioned before, this is a global website so the website has to work regardless of browser or Internet speed. This made us rely mostly on straight-up HTML and CSS, and we carefully optimized the images. We also used some handwritten JavaScript—no frameworks. Since the project will evolve, we have made a fully customized WordPress theme so the client can upload information by themselves.

Anything else? Mobile looks awesome!


Browse Projects

Click on an image to view more from each project

Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In