Submitted by David, who says:
For some time now, I’ve been busy designing a Madrid transit map, and your blog has been a great help. It’s fantastic to have access to all this information and, first of all, I wanted to thank you for running this blog. Your comments are always helpful.
Latest Madrid Metro maps were, so to speak, not very appropriate and, even without previous experience in map design – I’ve always been a pre-press guy, not a graphic designer – I thought that there should be a better way to do it. So, first as a hobby, and then more seriously, I started working on the issue.
The goal was to include both the Metro and the commuter rail system (called “Cercanías”). These networks are commonly used in conjunction and, actually, travelers have to obtain the information from two different sources, with two maps that have nothing to do with each other. From the beginning, I thought the priority should be digital (web, mobile app), so, instead of a single map with all the information of both networks, I preferred to split it into two “layers”, each one showing one of the networks in foreground with the other in the background as a subtle reference. Inspiration came from that icon in KickMap app for switching day and night service in the NY Metro system, but, instead, use it to switch between Metro and Cercanías layers. This would allow access to the whole system information while reducing the clutter of the map. Given that the map’s priority is digital, there’s no much use in showing the legend on the map itself. Instead, in order to provide an easier access, it will be available separately.
What I’m sending you is the first of these two layers: the Metro map in foreground with commuter rail in the background.
As you can see, it’s a radial grid based map (in my opinion, the best way to explain Madrid), set in steps of 15 degrees, and using only concentric circles and spokes. Amsterdam maps by Erik Hammink and Max Roberts and his circle maps were an inspiration, mostly the latter: some of their maps are great, but I thought Madrid should have a better solution (and include commuter rail system).
The main issue was to solve the line 6, since it forms the main circle. To ensure geographical consistency it could not be a perfect circle, because stations like Príncipe Pío and Argüelles are located in the city center, while others, like Laguna or Lucero, are in the suburbs. So turning the line inward was necessary in order to prevent distortion in the whole map. The river is used to close the gap and improve balance. I think it works quite well.
About type, Helvetica has been historically the Madrid Metro typeface. It is used on maps and all kind of signage and I see no reason to change it. Furthermore, the map being so different to what residents are used to, keeping the typeface seems a good idea to make it more recognizable. So I’ve tried to simply put it to good use: light for stations, bold for transfer stations and terminus. Credit to Vignelli’s NY map.
The circular interchange symbols for long distance transfers are inspired by the Lebedev Studio’s Moscow Metro map: the way complex transfers are resolved is gorgeous, and one thing that caught my attention was that it could be done without adding a new color to the symbol, so black could be reserved exclusively for labels. I have a feeling that it enhances the readability of the map, and I wanted it for my map too.
And it is at this point that I have to thank you again. Your post, in May earlier this year, about “zoomable on-line previews” led me to get to know Leaflet.js, and I’ve had a great time playing with the code (with Google’s aid, of course). I wasn’t happy with that “zoomify sharpening” either, and I have found a Photoshop script that cuts the image tiles without sharpening. It’s called Bramus (https://github.com/bramus/photoshop-google-maps-tile-cutter/) and I figured that you’d be curious about it. It works perfectly for me with Leaflet.
My purpose is to complete the map with the second layer (the one with Cercanías in foreground) but, at this stage of the project, your feedback would be much appreciated.
Transit Maps says:
Wow. Just wow. Everyone, stop what you’re doing and take a look at this right now.
This is superb modern transit map-making, and I love it.
For a self-confessed non-designer, David’s done an absolutely incredible job. Without even seeing his second commuter rail version of the map, I can already see exactly how he’s planned for its inclusion and how neatly everything fits together.
Madrid is a radial city, so David’s design choice is actually appropriate (some other radial maps I’ve seen have seemed a little forced, like Max Roberts’ New York subway map). While he’s distorted the system layout a bit to suit his design, the relative positions of most of the lines seems to be quite accurate: credit to David there!
The design language of the map is remarkably clear and consistent: I especially like the neat way David flips route lines across each other in little “x” configurations when they need to swap sides, and his “long transfer” station symbols are just gorgeous – a nice evolution of the Art Lebedev Moscow Metro interchange symbol, as David himself notes. He’s even done a decent job of making the alternating shaded zone backgrounds attractive, one of the most difficult tasks in transit map design! Often, these zones seem to be slapped on as an afterthought (*cough* London Underground Map!), but it’s obvious that David has taken great care to incorporate them as an integral part of the whole map.
Our rating: Simply outstanding! Four-and-a-half stars until I see the second Cercanías map, when I fully expect to upgrade this to a full five-star rating. To be honest, I think the map is clear enough that both the Metro and Cercanías could be displayed fully on the same map, but I certainly appreciate the way that David is approaching this as an interactive digital-first project.
Source: David’s Madridxpress website (link no longer active)