Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Map Design: Redesigning Ekaterinburg’s Metro Map

A large metropolitan underground train network might as well be a teleportation device: People don’t care how it gets them from A to B, just that it does. In London, Paris and Moscow, the map of the metro does not show surface geography, because there is not much empty space on the sheet.

Designing a city’s metro map is quite a challenging task, even when there is just one line. Last year, my colleague Pasha Omelekhin and I were thrilled to work on the redesign of the metro map for Ekaterinburg, Russia. We had fun (he designed, I directed). In this article, we’ll cover our design process. It’s going to be detailed, so, depending on your interests, this might be very boring or very exciting. Still, we’ve left out so much. We hope this helps in case you have to work on a similar project.

Further Reading on SmashingMag: Link

Let’s dive in!

The Approach Link

This is the final map we created:

(View large preview6)

Just for comparison, here’s what the previous version of map looked like:

The solid-green line above is the only existing subway line; the other two are merely “planned” lines, for which construction has not even started. Displaying all three would not make sense. So, our first sketch was a simple one-line diagram:


(View large preview8)

Usually in a multi-line metro network, on each metro line they have a separate one-line diagram displayed above train doors. But here, one diagram could be used as both the full-network diagram and the line diagram. Small refinements would need to be made, and we did make them, but we wanted to rethink how such a diagram would be designed in general.

As mentioned, metropolitan centers with large underground networks, such as London, Paris and Moscow, do not show surface geography in their subway maps. There is simply not enough room to do so. Not so for small metros. Simplicity and lack of surface detail are only required when a rich map would get in the way of people finding their route. Ekaterinburg does not have this problem.

When there is just one subway line, you can’t afford to portray the system like a teleportation device. People have to use multiple modes of transportation to get to where they want to go. So, we wanted to show how the metro was connected to everything else.

A long time ago, the map of Paris’s underground was simply laid over top a city map:


(View large preview10)

We figured that the two approaches could be combined: surface information could be laid over top the linear diagram, making the map both richly informative and suitable for use on trains. This would require us to bend the city in strange ways to fit important landmarks, but this has been known to work, as in the case of New York City’s underground map11.

The Linear Diagram Link

Next, we added some streets to the map:


(View large preview13)

The river seemed too dark here. Also, Ekaterinburg is not a popular tourist destination, so the Russian language is far more important than English; therefore, we decided to position the Russian names on the inside and the English translations on the outside relative to the line.

We wanted to experiment with style. We started with an unofficial M logo and cut the station “ticks” at angles to echo it. Later, we replaced the logo with the official one:


(View large preview15)

The gradient didn’t look right. And the logo was too large. So, instead of one large logo, we tried grouping several logos: the metro’s logo, the city’s coat of arms and an emblem of the transportation authority. This kind of thing usually looks cool.

In the end, though, we found that two logos work fine (the city’s logo being one of them):


(View large preview17)

Notice how the river and streets have started morphing to better communicate their relationship with the line. We continued adding more surface geography:


(View large preview19)

Now we had a compass (the left-pointing arrow indicating north), the city’s TV tower and the circus. The line of the airport shuttle from Botanicheskaya was aligned with the angle of the ticks — a modification that would not survive as we made the geography feel more real, but it had its charm. Maybe it would work somewhere else.

We experimented more with the ticks:

(View large preview21)

(View large preview23)

(View large preview25)

We even played with long shadows:


(View large preview27)

Some of these were nice, but still not special in any way.

Ekaterinburg is characterized by constructivist28 architecture. What could we use to hint at this in the map? We sought inspiration from the art of Malevich and Kandinsky.


Pasha said, “I guess this is how Malevich would do an airport icon.”

A similarly crazy train

It might work!

We tried to add to the semblance of reality by laying the streets over top the metro line:


(View large preview33)

But this looked like a mistake. Undo!

Bending The Line Link

Drawing the metro line straight would be ideal, but it would distort the city too much. So, we introduced bends to hint at the line’s true form:


(View large preview35)

This looked broken. We wanted the line to be smoother. Bye-bye, angled ticks!


(View large preview37)

Having gotten a taste of the geography influencing the form of the line, we wanted more of it, much more — roads, squares, parks, plants, the whole city. We started imagining how to add parks with nice trees and how to give the river a wavy texture.


First attempt (View large preview39)

Now that we were getting more into the geography, the ticks were becoming a problem. They looked like they were pointing in the direction of the station exits, rather than the station names, which might confuse people. A new indicator was needed.


(View large preview41)

(View large preview43)

(View large preview45)

Did the circles have to be on the line? What if we put them closer to the station’s name?


(View large preview47)

Wait a minute! What if we did indicate the location of station exits?


(View large preview49)

(View large preview51)

These exits were too small for the line and would be not visible from a distance. We needed a solution that screams “Here’s a station!” while subtly indicating the exits.

More Surface Features Link

Meanwhile, other work was progressing. The pictogram of the circus became more recognizable:


(View large preview53)

The abandoned TV tower got more detail:


(View large preview55)

The pictograms of the other modes of transportation got more attention, too:

Oh, and we threw in the surface railway network, as well as a design attribution to ourselves (nestled along the right):

(View large preview57)

The river’s pattern didn’t look good. We tried thin lines reminiscent of the classic London tube map designed by Harry Beck:

Too thin, almost invisible.

And we continued exploring representations of the station exits on paper:


(View large preview59)

One idea was to lay a detailed scheme of exits over top a semi-transparent metro line:

Cleaning Up Link

At this point, the map was looking quite busy. We decided to show English translations for only the station names. And we removed the circus. We also tried moving the indicators of rail and bus terminals to the corresponding metro stations:

(View large preview61)

The font changed from DIN to PT Sans Metro (a custom version of PT Sans with lowered capital letters).

Here’s an experiment to list surface transportation routes:


(View large preview63)

The street names were the noisiest element at this point. We tried setting them in all-caps:


(View large preview65)

Usually all-caps are inappropriate, particularly in wayfinding: The letters resemble rectangles, making them harder to distinguish. But we wanted the words to look quieter and simpler, so it worked.

We continued experimenting with station exits:

(View large preview67)

(View large preview69)

We thought the semi-transparent circles were needed to make the stations big enough to be seen from a distance.

(View large preview71)

But having drawn in all of the exits, we realized they were not needed:

(View large preview73)

The fatter semi-transparent line also proved unnecessary:


(View large preview75)

This was not the end of our work with the station exits, but it was an accomplishment.

Trolley And Bus Icons Link

The work on listing surface transportation routes carried on:


(View large preview77)

The parks got a nice pattern, and the TV tower and river were simplified:


(View large preview79)

Getting Serious About The Stations Link

We were still concerned about the visibility of stations from a distance. The exits alone were not enough to make the stations stand out. So, we tried other things:


(View large preview81)

(View large preview83)

We even tried making the metro line dotted:


(View large preview85)

(View large preview87)

Notice another key improvement here: Street names have been moved inside the streets themselves where space allowed. All-caps were very handy for this, contributing significantly to clarity.


(View large preview89)

We kept on with the stations:


(View large preview91)

(View large preview93)

(View large preview95)

(View large preview97)

Mondrian edition (View large preview99)

Cast-iron edition (View large preview101)

We didn’t like that the river consisted of very thin lines, which aren’t used anywhere else in the map, so that changed:


(View large preview103)

(View large preview105)

We are skipping many other attempts here, but the one below is worth pointing out. We thought this one had promise.


(View large preview107)

Everything Is Coming Together Link

Turning back to the streets, the thin ones looked odd. So, we tried giving all streets the same width:

(View large preview109)

Because there were no more thin lines anywhere, we gave the TV tower a fill instead of a contour:


(View large preview111)

Then we swapped the colors of the background and the streets, and we made the river look like it’s flowing:


(View large preview113)

We also tried making the river wavy on the outside as well as inside:


(View large preview115)

But this felt like a step back. It looked more like pasta than water.

Our compass was too simple as well:


(View large preview117)

We took inspiration from Yuri Gordon’s arrows:


(View large preview119)

Here’s the one we made:


Final Touches Link

We kept returning to the metro line and stations again and again — obviously, because they are the most important elements.


(View large preview121)

(View large preview123)

(View large preview125)

What’s the ugliest thing now? The parks. The way they bump up against the roads and each other is not nice. Particularly unpleasant are the parks surrounding the river. We’ve removed the background leaving only the trees while also tuning their color, and it became much nicer:

(View large preview127)

The TV tower improved as well:


(View large preview129)

The PT Sans font was dispensed in favor of ALS Direct:


(View large preview131)

We added tram lines because they are prominent features on the street and would help with wayfinding.

Also, we tried aligning the text to a grid:

(View large preview133)

And we added some shadows:

(View large preview135)

That’s about it! Pasha built all of it in Adobe Illustrator, directed by me, Ilya, via email.

In no way is this meant to be a comprehensive guide to designing a map. Each city presents its own set of problems and peculiarities. But hopefully this gives you an idea of what to look for and what to try if you take on such an assignment. What seemed at first like a small project turned out to be a rigorous exercise spanning several months.

(vf, il, al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135

↑ Back to top Tweet itShare on Facebook

Ilya designs transport diagrams, websites, apps and signage. Directs the designers and developers. Teaches design. Composes, plays and listens to music. Last but not least, travels and takes photos.

  1. 1

    Love this. Quite a story. I wonder if you had an idea when you started to keep a log of all the changes so you would be able to produce an article like this?

    • 2

      Oh, and the map is beautiful!

    • 3

      Ilya Birman

      June 14, 2016 6:11 pm

      This is thanks to Pasha.

      I generally try to work this way. Every time I make a notable change, I save it as a new version. Not only to be able to write a story like this, but just to be able to go back any time.

      But here, Pasha was even more rigorous than I usually am. He uses a versioning scheme similar to used in software (the diagram you see in the beginning of this article is version 5.18.14). This helps tremendously during work as it’s possible to reference exact things you are talking about.

      Since we communicated almost exclusively by e-mail, it was possible to reconstruct the process in detail. Not just the pictures, but the arguments and motivations behind the steps. Pasha has originally wrote the story in Russian for his website:

      • 4

        I read Pasha’s blog. Fascinating. His first time with Illustrator!

  2. 5

    Love designing abstract maps … there is so much to consider, so much options, so much “circumstances” and so much problems to solve. In the end, it’s iterating towards a solution that looks simple and easy to use, but the way there just never is.

    What i enjoy especially is if someone external chimes in and tells this “must be doable more efficiently”, taking over, just to find out sooner or later that this can’t be done with an algorithm alone and lots of thoughts, experience in visual design, stylistic languages and trial and error go into a good solution.
    If at all, the algorithm can create a basic version to work with instead of lining all out from scratch – but you’ll lose the opportunity to get to know “the problem” in detail and right from the start, losing the time won with the program again while finding out why the algorithm made certain decisions – good or bad ones.

    What’s especially hard to do is to design maps not as an overview of a whole system, but from a special point of view, like one specific bus stop or station, indicating where you can get from there in which directions, with zero / one / two change of lines, where to change, etc.). those systems have to fit all different possible stations and situations, from plain simple one-liners to complex central crossings … fun to do, but a lots of work.

  3. 6

    Manikandan Baluchamy

    June 15, 2016 1:43 pm

    Appreciate the transparency in showing the genuine efforts!

  4. 7

    I loved your process! The only problem is that when new lines will be added, it will all look a bit messy :(

    • 8

      Ilya Birman

      June 17, 2016 9:10 am

      Not planned for anytime soon. When they are added, we’ll need to redesign the map, of course.

  5. 9

    Jeff French

    June 29, 2016 6:12 pm

    Fantastic detail and documentation of your exploration and thought process. With so many iterations, it would be amazing to see the evolution of the map as an animation!

  6. 10

    as i think, there is no such problem to navigate in Yekaterinburg.
    you trained your skillz for nothing. good luck))


↑ Back to top