Section Logo
Go BackGo Forward


Interactive Annual 18:
information design


Launch Live Site

“A perfect example of a graphic that tells a story much faster and more effectively than text ever could. The superb illustration translates universally, regardless of language barrier.”
—David Wright

“A beautiful layout with subtle interaction that succinctly and effectively makes its point.” —Kim Rees

Overview: More than eighteen million people each year travel the route between Madrid and Barcelona—particularly by train or plane. What makes them decide to travel by one means or another? These graphs compare the true costs of both types of transport (including wait times, loading/unloading procedures and ticket costs) and explain visually why people spend basically the same amount when traveling from Madrid to Barcelona by either train or plane. They analyze the route tables of two travelers, detail the time differences at each step and explain the reasons for the time invested. The conclusion is clear: Anyone who travels from Madrid to Barcelona must take more into account than the cost of the ticket.

  • • The project was designed and programmed by two people in two weeks.
  • • The animations were created with Flash and JavaScript.

Comments by Antonio Pasagali

How did this project compare with others you’ve worked on in the past? “When you’re trying to prove something that seems irrational, sometimes it is just easier to explain it visually. From that standpoint alone, this project was rewarding; everything I wanted to show could be explained visually, using graphic information techniques. When I began this project, I had to find a way to prove that a plane, traveling at 500 miles per hour, had the same time-cost as a train, traveling at 155 miles per hour. The main challenge was maintaining a unified style while clearly detailing all the steps involved in the trip, and why some of them were key in the comparison of time-cost periods of traveling by plane or by train between two points.”

Did you use any applications that you hadn’t used before? “It was the first time I had the opportunity to use three key technologies in order to complete the animations and the interactivity (HTML5, JavaScript and Flash). The main animation was done in Flash since there wasn’t any other way to animate a graphic the way I wanted; parts that didn’t require complex animation were programmed in JavaScript.”

What would you do differently if you could start the project over? “I would definitely transform the Flash animations and try to remake them in HTML5 and JavaScript so the entire project could be viewed on mobile devices. I’d also like to detail some information I missed in this first version and fix some interactivity glitches.”


Antonio Pasagali, art director/interface designer/Flash programmer
Alejandro Navarro, programmer, editor
Alejandro Navarro/Antonio Pasagali (New York, NY), project design and development
Diximedia, client

Facebook  Twitter  LinkedIn