hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Map Design: Redesigning Ekaterinburg’s Metro Map

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:

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

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

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

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

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

(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)
(View large preview18)

We even played with long shadows:

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

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

(View large preview28)

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

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

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.

(View large preview34)
(View large preview36)
(View large preview38)

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

(View large preview40)

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

(View large preview42)
(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:

(View large preview46)

The abandoned TV tower got more detail:

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

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

(View large preview54)

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

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

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

(View large preview64)

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

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

(View large preview68)
(View large preview70)

We even tried making the metro line dotted:

(View large preview72)
(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.

(View large preview76)

We kept on with the stations:

(View large preview78)
(View large preview80)
(View large preview82)
(View large preview84)
Mondrian edition (View large preview86)
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:

(View large preview90)
(View large preview92)

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

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

(View large preview97)

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

(View large preview99)

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

(View large preview101)

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

Our compass was too simple as well:

(View large preview103)

We took inspiration from Yuri Gordon’s arrows:

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

(View large preview107)
(View large preview109)
(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:

(View large preview114)

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

(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
  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
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top
Tweet itShare on Facebook

Article source:


Submit a Review

If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.