Guiding Lines

I’ve started drawing maps for fun again, and have only now begun to truly appreciate their relevance to other forms of design drawing. Whilst I have been an indie and freelance game designer for 7 years now, the times I spent drawing complex flowcharts have almost never overlapped with transit projects like these, which constitute my lifelong hobby. Now that I’ve caught myself re-arranging flowcharts for readability in a manner more akin to that of my transit maps, I reckon it’s a good time to try and unpack what’s happening in this form.

What follows is a series of articles on that topic, beginning with an exploration of transit maps in isolation.

4 Countries, 2570 Stations, 1? Map

My cartographic meditation for this past month has been an ongoing network map of the UK’s passenger railways. As with most of my transit map projects, this one attempts to plug a gap which is otherwise not quite fulfilled by transit agencies — nor indeed, by many other enthusiasts.

National Rail Enquiries publish a series of abridged maps (below), and they also include a valiant effort by Andrew Smithers/Project Mapping. However, it quickly becomes apparent that Britain’s stations are too numerous to be viewed comfortably at once — especially given the contrast in visual density between areas like rural Scotland and Manchester.

The maps offered by National Rail Enquiries and Project Mapping [source] could be said to sit at opposite ends of a spectrum, in terms of scale and the necessity for a zoom tool.

Maps of regional railways are somewhat easier to come by — partly because they’re easier to design and to read, but also because they allow the individual, privatised companies to showcase their services in isolation of others. South Western Railways, for example, are afforded the opportunity for an effective diagonal map, anchored between London Waterloo and the lines’ southwestern termini. These do, however, offer a distorted view of the bigger picture, as their priority lays in encouraging travel via specific lines or companies. They also represent disparate range of graphics styles.

Southwestern Railway’s network map is afforded an opportunity to spread from a single, neat source — their London terminus. However, other railways appear diminished. [Source]

A UK National Rail Map Project

My solution, has been to develop a Train Operating Company (ToC)-agnostic series of regional maps which could form a whole, but don’t, in order that they may also remain visually pleasing. Thus far only Scotland has been completed — as a series of three maps — but it’s been sufficient proof of my graphics scheme for those map segments yet to come.

My UK National Rail map is constructed as a series of artboards in Adobe Illustrator, making it even easier to keep styles consistent and see the whole scheme at the glance. They may be viewed in more detail here.

That development of a graphics scheme — the details of which I won’t linger on too much here — is what started me thinking back to design diagrams in general. It’s an essential part of most transit authorities’ visual presentation, as guidelines for enforcing visual consistency and clarity. The enjoyment I derive from developing such schemes is matched only by that I derive from the naming conventions and game/UX flows I handle in my day job.

Design Schemes

Setting firm rules for micro elements such as line width, station dot size, spacing of text and circumference of arcs lends form to a surprisingly complex piece overall, much like the systems behind most games.

Counter-intuitive though it may sound, these design guidelines needn’t be all that complex. My own for this project revolves around a ‘magic value’ of 5pt — the width of every railway line on the diagram. Stations are represented by a circle half that diameter, labels are 5pt in height (for full-height characters, like a capital ‘W’) and are spaced 2.5pt away from the edge of the line, curves begin at 20pt radius, and so on. All of these are straightforward multiples of that same magic number.

As well as all that, I took a couple of visual cues from some of my favourite transit maps: namely those for London Underground, and Storstockholms Lokaltrafik. Like the ‘Tube map’, my maps are octolinear — in particular contrast to Project Mapping’s one — both on the grounds of personal taste, and a tested belief that this makes a sprawl of hundreds of stations much easier to read. The eye can follow the flow of lines more easily if we don’t have to anticipate many changes to their direction. I also believe this makes it easier to disregard the rest of the map whilst focusing on smaller sections therein.

45-degree angles do cause problems of their own, and many of these are documented in Mark Ovenden’s fascinating book, Underground Maps After Beck. They can be visually dominating, and may force hefty distortions of the maps’ underlying geography — issues which escalate when a system is set to expand.

As with many other transit maps, SL’s map for services in Stockholms län is octolinear — arranging all its railways along strict angles, 45° apart from each other. This rule often requires subtle affordances to be made in order to keep the map balanced, such as in the staggered spacing of stations along its outermost routes.

Fortunately for railway lines built on the world’s oldest network, expansion is rare and relatively easy to account for. New or revived lines tend to serve new areas, as in the case of the Borders Railway from Edinburgh to Tweedbank (formerly Waverley Line, reopened in 2015). My maps do also contain information on ToCs, and these can change over the course of years, but as their bounds rarely change I believe that may be handled by changes to line colour in most instances.

When lines carry multiple services, and each is represented by a different colour, those key routes which attract more operators end up pronounced — such as the contrasts in route thickness from the rural Shotts line (extending left), through northbound central routes (top), to a branch of the West Coast Main Line (bottom).

In railway diagrams, as much as diagrams made as part of a design process, the chief tasks are to display a mostly-known quantity of related information, and ensuring that those relationships can be read as easily as possible — to allay confusion, and to prevent fellow developers and passengers alike from getting stuck at the wrong destination.

In the next article I’ll explore the kinds of flowcharts and relational diagrams I create in my roles as a game designer.