Love Letters to Cities | Communication Arts
Responses by Yinsen.
Background: The primary purpose of Love Letters to Cities is to bring the stories of the works and artists of the Museo Nacional Thyssen-Bornemisza—a Madrid-based art museum of 13th-to-20th century European art—closer outside the walls of the building, using the tools of the new current digital narratives: videos, podcasts, articles, images and interactive experiences in web browsing.
Online access to the museum not only breaks physical boundaries but also provokes an interest in the public that motivates people to visit the works in person to experience a different point of view. Our formula was to create an innovative storytelling experience around a common theme within the artwork—in this case, “cities”—where different voices from literature, art history, architecture and urbanism reflect on the past, present and future. The interactive documentary’s target audience is anyone interested in art, culture, and making our cities more sustainable and humane.
Larger picture: The site is part of a trilogy with three interactive documentaries within the Conecta Thyssen umbrella, representing all the museum’s digital projects. We also branded the initiative and created an experimental promotional video to talk about the museum’s subprojects being carried out.
The first site, Migrant Artists, tells the stories of artists who started a new life far from their places of origin. The second, Back to Nature, is a reflection between art and science that invites us to rethink our relationship with nature. The link between these two and the third documentaries is the concept of the path: the path of artists to new homes, nature as a place of pilgrimage and cities as places of inspiration.
Design core: The site has a clean, contemporary aesthetic in which the white space and typography are balanced to generate both order and surprise. Each article of Love Letters to Cities is laid out differently to get the most out of the content and to create personalized articles while playing with a twelve-column grid. Using very large font sizes in headlines and only two sizes in the rest of the body text generates balance and hierarchizes the site.
While browsing, visitors can change the site’s background color and fonts, change the elements’ order in two completely different layouts, and play with the movement of the fonts in the headlines. These details make the site a more engaging experience by letting visitors choose how they prefer to access the content.
Favorite details: The formal and conceptual coherence of the layout, the minimalist use of fonts, and the small navigation games.
Challenges: We started this project from scratch, studying and understanding the content we wanted to show; deciding on the scripts, texts and images; contacting the participants for each video; organizing the shooting and locations of each video; and, finally, designing and developing the site. Managing this entire project with a large team was the real challenge, and each person with whom we collaborated contributed much to the final result.
Time constraints: It was a long project with an approximately one-year timeline. There was no exact deadline, but we had some approximate ones to meet with the museum’s sponsor. The budget limited us more than time—something directly related to ensuring the project had the highest possible quality within its economic limitations. The only thing that could have been better was having more time to do each phase in order and not several phases in parallel.
New lessons: We’ve learned a lot in the creative process from each interactive documentary. At the beginning of the assignment with this client, we were asked to design the Conecta Thyssen brand and a graphic campaign that we transformed into an experimental promotional video—without any previous experience creating these—because we understood it was what the project needed. From this first video came the three interactive documentaries and the development of the website. It has been a professional and personal learning curve; these projects have made us see that we can tell stories through design and any means of visual communication if we complement our talents with other creatives. As a two-person studio, we can direct a project until we reach the final result.
Navigation structure: The concepts of the “city” that we have transferred to the site’s navigation are night and day, order and chaos, speed and movement, and diversity. The option to see the web in its dark version represents the city at night, and the light version represents the day. The tireless movement of the streets is represented by the use of the Panama typeface in its regular, italic and iranic styles in the headlines and the menu. By placing the cursor over this font, the letter changes, creating an effect of movement from left to right. This simulates the changing speed of cars and people within cities.
Two options exist through which to view the content: one is more chaotic with a map that tells us where the content is and to which filter category it belongs, and the other ordered one groups content in a list according to its type. The Drift option lets users be carried away without a fixed direction by the content, while the Road option brings us closer to the order of urban, rectilinear architecture found in cityscapes.
Technology: We used Atom for coding. The back end was made in WordPress, and the programming languages we used were CSS, HTML, JavaScript and PHP.
Browse Projects
Click on an image to view more from each project