Menu Search
Jump to the content X X
Smashing Conf San Francisco

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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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.

Let’s dive in!

The Approach Link

This is the final map we created:


(View large preview1)

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:

2
(View large preview3)

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:

4
(View large preview5)

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 map6.

The Linear Diagram Link

Next, we added some streets to the map:

7
(View large preview8)

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:

9
(View large preview10)

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):

11
(View large preview12)

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

13
(View large preview14)

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 preview15)

(View large preview16)
17
(View large preview18)

We even played with long shadows:

19
(View large preview20)

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

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

22
23
Pasha said, “I guess this is how Malevich would do an airport icon.”
24
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:

25
(View large preview26)

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:

27
(View large preview28)

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

29
(View large preview30)

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.

31
First attempt (View large preview32)

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.

33
(View large preview34)
35
(View large preview36)
37
(View large preview38)

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

39
(View large preview40)

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

41
(View large preview42)
43
(View large preview44)

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:

45
(View large preview46)

The abandoned TV tower got more detail:

47
(View large preview48)

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 preview49)

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:

50
(View large preview51)

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 preview52)

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:

53
(View large preview54)

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

55
(View large preview56)

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 preview57)

(View large preview58)

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


(View large preview59)

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


(View large preview60)

The fatter semi-transparent line also proved unnecessary:

61
(View large preview62)

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:

63
(View large preview64)

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

65
(View large preview66)

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:

67
(View large preview68)
69
(View large preview70)

We even tried making the metro line dotted:

71
(View large preview72)
73
(View large preview74)

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.

75
(View large preview76)

We kept on with the stations:

77
(View large preview78)
79
(View large preview80)
81
(View large preview82)
83
(View large preview84)
85
Mondrian edition (View large preview86)
87
Cast-iron edition (View large preview88)

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

89
(View large preview90)
91
(View large preview92)

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

93
(View large preview94)

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 preview95)

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

96
(View large preview97)

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

98
(View large preview99)

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

100
(View large preview101)

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

Our compass was too simple as well:

102
(View large preview103)

We took inspiration from Yuri Gordon’s arrows:

104
(View large preview105)

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.

106
(View large preview107)
108
(View large preview109)
110
(View large preview111)

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 preview112)

The TV tower improved as well:

113
(View large preview114)

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

115
(View large preview116)

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 preview117)

And we added some shadows:


(View large preview118)

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 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image38-large-opt.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image23-large-opt.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image23-large-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image16-large-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image16-large-opt.jpg
  6. 6 http://gothamist.com/2007/08/03/michael_hertz_d.php
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image15-large-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image15-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image21-large-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image21-large-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image05-large-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image05-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image29-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image29-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image73-large-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image10-large-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image44-large-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image44-large-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image03-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image03-large-opt.jpg
  21. 21 https://en.wikipedia.org/wiki/Constructivism_(art)
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image19-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image63-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image48-large-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image40-large-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image40-large-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image52-large-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image52-large-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image13-large-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image13-large-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image46-large-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image46-large-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image60-large-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image60-large-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image26-large-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image26-large-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image59-large-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image59-large-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image53-large-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image53-large-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image02-large-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image02-large-opt.jpg
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image34-large-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image34-large-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image17-large-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image17-large-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image65-large-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image65-large-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image24-large-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image31-large-opt.jpg
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image31-large-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image09-large-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image20-large-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image20-large-opt.jpg
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image33-large-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image33-large-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image62-large-opt.jpg
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image12-large-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image67-large-opt.jpg
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image69-large-opt.jpg
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image43-large-opt.jpg
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image43-large-opt.jpg
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image66-large-opt.jpg
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image66-large-opt.jpg
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image41-large-opt.jpg
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image41-large-opt.jpg
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image08-large-opt.jpg
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image08-large-opt.jpg
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image18-large-opt.jpg
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image18-large-opt.jpg
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image30-large-opt.jpg
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image30-large-opt.jpg
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image70-large-opt.jpg
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image70-large-opt.jpg
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image14-large-opt.jpg
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image14-large-opt.jpg
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image64-large-opt.jpg
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image64-large-opt.jpg
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image61-large-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image61-large-opt.jpg
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image37-large-opt.jpg
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image37-large-opt.jpg
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image04-large-opt.jpg
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image04-large-opt.jpg
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image36-large-opt.jpg
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image36-large-opt.jpg
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image22-large-opt.jpg
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image22-large-opt.jpg
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image28-large-opt.jpg
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image28-large-opt.jpg
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image50-large-opt.jpg
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image50-large-opt.jpg
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image06-large-opt.jpg
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image06-large-opt.jpg
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image39-large-opt.jpg
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image45-large-opt.png
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image45-large-opt.png
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image71-large-opt.png
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image71-large-opt.png
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image32-large-opt.jpg
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image32-large-opt.jpg
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image42-large-opt.jpg
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image42-large-opt.jpg
  104. 104 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image54-large-opt.jpg
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image54-large-opt.jpg
  106. 106 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image68-large-opt.jpg
  107. 107 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image68-large-opt.jpg
  108. 108 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image55-large-opt.jpg
  109. 109 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image55-large-opt.jpg
  110. 110 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image72-large-opt.jpg
  111. 111 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image72-large-opt.jpg
  112. 112 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image51-large-opt.jpg
  113. 113 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image35-large-opt.jpg
  114. 114 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image35-large-opt.jpg
  115. 115 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image01-large-opt.png
  116. 116 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image01-large-opt.png
  117. 117 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image58-large-opt.jpg
  118. 118 https://www.smashingmagazine.com/wp-content/uploads/2016/06/ekaterinburg-metro-map-image49-large-opt.jpg

↑ 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
    • 2

      Oh, and the map is beautiful!

      3
    • 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:
      http://omelekhin.ru/portfolio/ekaterinburg-metro/process/

      3
      • 4

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

        10
  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.

    4
  3. 6

    Manikandan Baluchamy

    June 15, 2016 1:43 pm

    Appreciate the transparency in showing the genuine efforts!

    0
  4. 7

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

    -1
    • 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.

      1
  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!

    0
  6. 10

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

    -1

↑ Back to top