Vignelli Timeline Translation

Problem: How do you take a dense vast timeline and translate it into an interactive medium that engages the user in a new way?

My Solution: Take inspiration from Massimo Vignelli's famous NYC subway designs and use the intricate line system to organize the "stops" or significant events on the timeline and revealing more information and pictures when a destination is chosen.

Students were tasked to design a different way to consume a timeline of Massimo and Lella Vignelli's life, provided by professor John Koegel as part of Design Praxis II (VCDE-726) Visual Communication Design at Rochester Institute of Technology. 

Mobile App designed in Figma; UX animations created in Adobe After Effects; Map and UI assets designed in Adobe Illustrator.

Photos provided by the Vignelli Center at RIT


Purpose

This mobile application is inspired by Massimo Vignelli’s Design of the NYCTA  New York City Subway Map and the Massimo & Lella Vignelli Timeline at RIT. In 1970, Unimark International was contracted to design the NYC Subway maps, where Massimo had designed the “New York City Transit Authority Graphics Standards Manual” and then continued to facilitate to the map design.1

The transit map acts as a route to the “destinations” in Massimo & Lella’s life. When a destination, is chosen the map will transport the user, as if they were riding a train, to a photo gallery of that particular year. 


Audience: The audience is RIT students or fans of Vignelli’s designs in NYC. The goal is to better understand who the Vignellis are by epitomizing their design. The Vignellis were so influential and they still have a lasting effect on our world today and specifically our campus, and many of Massimo’s design can still be seen around New York City.

Intention: The intention is to create a fun environment to interact with the Vignelli Timeline, in order to education and  entertain.


Design Elements: The design is inspired by Massimo’s 1970 NYCTA transit map.* 

• Helvetica Font

• Grids

• Bold Colors 

• Coded lines


1. Morphy, M. (2020, January 9). RIT Press publishes book on Vignelli transit maps. RIT Press. Retrieved September 20, 2020, from https://www.rit.edu/news/rit-press-publishes-book-vignelli-transit-maps

*All images are used with the permission of the Vignelli Design Archive through RIT

Features

Map zoom with labels

Photo Zoom

Photo Gallery

Vignelli NYC Subway Maps

Sketches

Iterations

Map UI Iterations

Subway Doors Illustration

Reference Photo: Gianpaolo-LaPaglia unsplash.com

Final Designs