What’s that, Green Line? Yes, I do think you look wonderful when all your stations are shown! A work in progress screen shot of my Boston MBTA “T” map redesign. And this isn’t even the coolest part. Stay tuned!
My Boston MBTA Map: Work in Progress 1
The Ways to my Heart… Happy Valentine’s Day!
Official Map: Key Bus Routes in Central London, 2012
This charming diagram produced by Transport for London is obviously targeted at tourists, but still manages to pack a lot of information in – bus routes, tourist attractions, connections to the Tube, Overground, DLR, National Rail and river ferries. That it still manages to look attractive and be easy to follow makes it all the better.
Have we been there? Yes, and I even got off the Tube to catch a bus here and there.
What we like: Clean design that borrows many recognisable elements from the London Tube map, especially the distinctive Johnston Sans. Lovely little cameo illustrations for the tourist attractions.
What we don’t like: Not useful for plotting a walking route between points of interest – this map is about transportation options only. Some of the stops with many routes passing through it could do with a linking “interchange station” instead of individual dots – it can get difficult to trace the dots across seven or eight routes to find the location name. The map gives you no idea of how long a bus trip through excruciatingly congested London traffic might take. I caught the 74 from Marble Arch to Putney once and it took absolutely forever to get there.
Our rating: A welcome addition to the London transit family of maps, charming and useful at the same time. Three-and-a-half-stars.
Source: VisitLondon.com
Official Map: Glasgow Subway (Before and After)
It’s always fun to do a comparison between old and new maps, and we have a great opportunity with this very recent rebranding of the Glasgow Subway (the third-oldest subway system in the world at 115 years of age, after the London Underground and the Budapest Metro). A deceptively simple system, the Subway consists of a single loop with 15 stations — trains run clockwise on the Outer Circle, and anti-clockwise on the Inner Circle. If the font used on the new map (second image below) looks familiar, it should — it’s Klavika, also used (in a slightly modified form) as the Facebook logo.
The new map definitely lifts the corporate branding standards of the SPT — the map ties in nicely with the new website and station signage and looks new, clean and modern. It’ll be interesting to see if the heavy use of Klavika — a very “now” typeface — dates this work badly in a few years time. Interestingly, the new map doesn’t indicate which direction the Inner and Outer Circles run in, although the arrows were pretty hideous on the old map.
One element of the old map that I do miss with the new is the lovely burgundy colour — it seems like this could have worked very well with the greys in the new map and could have been a very distinctive accent colour. I also feel that the station dots have gone from being too big (on the old map) to too small and disconnected from the station names on the new.
Our rating: Professionally done, modern but perhaps altogether just a little too slick. Three-and-a-half-stars.
Source: SPT website
Official Map: Bus Transit of Spokane, Washington, 2012
Well, it certainly didn’t take long for people to set me right after my blanket statement that bus maps are “just” boring old geographically-accurate road maps with routes on them. I’ve had a flood of submissions, comments and tweets on the subject, complete with links to some very interesting examples of bus-only maps.
This one, from the city of Spokane in the Pacific Northwest of the United States, definitely caught my eye. For a fairly small transit district, this map is very impressive and actually puts a lot of larger transit agencies to shame.
Have we been there? I’ve been through Spokane on road trips, but have never needed to catch a bus there.
What we like: Beautifully clear routes, with thickness of line serving as an indicator of frequency. Especially clever is the merging of two routes that travel along the same road into a combined thicker line to indicate that the two services together offer greater frequency along that corridor. While the map has been simplified, it still holds a strong relationship to geographical reality. The muted background colour and soft grey used for the underlying roads really allow the routes to stand out clearly. Comprehensive and easy to read legend.
What we don’t like: The insets for the Valley Transit Center and The Plaza Boarding Zones really need to be shown more clearly on the main map itself – it took me (a non-local) a few minutes of scanning the map to find their actual location. The dotted line used to denote non-stop service can be a little indistinct, especially on the pink Express routes.
Our rating: A surprisingly confident and well-executed map from a lesser-known transit district. Four stars!
Source: Spokane Transit website
Photo: Old Boston Subway Map
Uncovered at Orient Heights station, photo from 2009. Note “Washington” station instead of Downtown Crossing, the entirely different alignment of the Orange Line to Forest Hills, no Red Line extension to Quincy and Braintree (and it ends at Harvard in the other direction). The “A” Green Line to Watertown is still in service, and the “E” goes all the way to Arborway. Love the elegant simplicity to this, and the lovely crimson red used for the Red Line (which goes to Harvard, after all!).
Source: trevonhaywood2012/Flickr – link no longer active
Photo: Trocadéro
Source: M.Crescentini/Flickr – link no longer active
Official Map: Métro de Montréal, Québec, Canada, 2012
Requested by pomme-poire-peche
Montréal’s Metro map instantly stands out from the crowd by virtue of its black background – a feature only rarely seen in transit maps. Although the idea of a subway serving Montréal was first tabled in the early 1900s, it wasn’t until 1966 that it finally opened.
Have we been there? No.
What we like: Graphically bold and clean. Black background and subdued colour for the waterways really allow the thick, colourful route lines to stand out. Really like the “coloured square” effect for interchange stations between the Métro and the commuter rail lines. The geography shown, while still based in reality, is abstract enough to work well with the bold route lines.
What we don’t like: I’m not a fan of the small caps type treatment for station names – it breaks up the names and looks awkward when placed in the coloured boxes at the ends of the lines. The north pointer and legend look unfortunately generic, while the placement of the elevator symbols is abysmal (pomme-poire-peche asked me to ignore these, as they apparently aren’t there on the maps in stations, but they’re kind of hard not to notice!). Some of the curves and angles on the commuter rail lines seem poorly chosen or drawn.
Our rating: I love it when a map is so distinctive that it couldn’t possibly be from anywhere else in the world than the city it represents – and this is definitely all Montréal’s. A few minor flaws detract from the overall quality, but this is better than the average map. Three-and-a-half stars.
Source: Official STM website
Official Map: Singapore MRT/LRT System Map, 2012
Singapore’s Mass Rapid Transit (MRT) system only opened in 1987, but has expanded greatly since then and now boasts 90 stations and almost 150 kilometres of lines. It is supplemented by the LRT, which is not a true light rail system, but is more like an automated people mover that serves the high density apartment blocks prevalent in land-poor Singapore. In earlier versions of the map, I believe that the stylised “S” logo in the background formed a rough analogy to the shape of the island of Singapore itself – with the addition of new lines, this doesn’t hold as true as before (with much of the North East Line now extending well into the “ocean”), but it’s still a distinctive graphic device to tie the map together.
Have we been there? No.
What we like: Spacious, clean, elegant layout. Distinctive sans serif typeface gives a unique look to the map – for once, Helvetica is nowhere to be seen.
What we don’t like: I’m not sure why the alphanumeric codes for each of the stations has to be included on the map (something to do with ticketing? Can anyone from Singapore enlighten me on this?), but they do end up adding a lot of visual clutter to an otherwise clean map, especially when a station has multiple codes. The two LRT loops in the north east of the map are too close to each other, making type from one run into the other. It looks like it could have been possible to space them a bit further apart by extending the main North East Line just a little further out.
Our rating: A confident, distinctive map that boasts its own look. While obviously bearing a London Underground map influence, it has moved beyond its inspiration to create something new and fresh. Four stars.
Source: Official SMRT website – link no longer active
Tutorial: Adobe Illustrator’s ‘Round Corners’ Effect and Transit Maps
In my earlier post about drawing a transit map, I made mention of the fact that Adobe Illustrator’s “Round Corners” effect doesn’t work very well with multiple curves around a corner, such as parallel route lines changing direction together on a transit map.
This part of my post elicited a very interesting comment from Chris Helenius in Finland that there are ways to get matching curves around a corner when using the Round Corners effect. However, the method he shows is a workaround – he expands the appearance of the curve, then offsets the path the required distance. In practice, this is very similar to my approach of keeping a “master” library of curves that I insert where needed – both require some cutting and pasting of points and curves to achieve the final result.
What Chris’s method doesn’t recognise is that Adobe’s implementation of Rounded Corners is fundamentally flawed, and it’s a flaw that makes it impossible to achieve consistent nested curves.
As the diagram above shows, the problem comes from Adobe’s poorly implemented definition of “radius” in the Rounded Corner effect’s dialog box.
The dictionary definition of radius is, “a straight line from the centre to the circumference of a circle or sphere.” And that’s what I expect to be implemented when I set a value in the dialog box – make a curve with this radius from the centre point of the inferred circle. If this were true, you’d see curves like those shown in the second column of the diagram: three nicely nested curves at a radius of 10, 20 and 30 points, which look the same regardless of the angle between the lines when you started.
Instead, you get what happens in column three. For reasons known only to itself, Illustrator measures the value that is put into the dialog box from the original corner point (shown as the black lines in column three) that joins the line segments on the intended curve, not the centre point of the circle. In other words, this is not a true radius at all.
When the angle between the line segments is 90 degrees, things work as expected, because the mathematics works out the same regardless of where the “radius” is measured from. But look what happens when there’s a 135-degree angle. Instead of the outer curve having a radius to its centre point of 30 points (as input into the dialog box), it’s actually 72.46 points! Even worse, all three curves end up having completely different centre points (as indicated by the grey intersecting lines), so no amount of fiddling with values is ever going to get them to nest inside each other properly.
As you can see, entering the same set of values into the Round Corners dialog box produces vastly different results depending upon the angle between the line segments – this makes results impossible to predict and the effect totally useless when designing a transit map: what is a nice tight 30 point radius on one part of the map may become a loose 72 point radius in another, even though you asked for a 30 point radius both times. I’ll be sticking to my labour-intensive, but 100% accurate methods.
Note: this part of the tutorial is no longer true for users of Adobe Illustrator CC and above, as Adobe has integrated the excellent “Live Corners” tool into the program. See this post for more information.