Creating Transit Map
Part I

In 2011, most Chelyabinsk trams got a new route map.

In the fall of 2013, stops were equipped with a map of all public transport routes.

It is huge, a square meter in size, but very difficult to use. To find your way around in the chaos of lines and words, you need to be already familiar with the city. Trolleys and buses are equipped with A3 copies of this map, and our bumpy roads make it virtually impossible to follow the route when on the move.

If you don’t like something, change it, I thought, and set to design my own map. I started with screenshotting Yandex.Maps and adding tram routes on top, and then started to draw.

A rough draft:

Line colors are not thought through, and the names of stops are scattered around randomly.

In a few approaches the map got prettier. The arrangement of lines didn’t change from then on, the stops got straightened out, and the title and legend were added.

At that time, I decided to make the map official, not just an exercise. I wrote to Ilya Birman and asked for his advice. Ilya commented on the map and advised me on how to handle negotiations in the depot in case I manage to get there.

I called the number on the Chelyabinsk Electric Transport company’s website and arranged a meeting with the advertising department. A week later, they invited me to design the map. After that, Ilya took charge of the project and we started our meticulous work.

The map looked good on screen, but people would use the printed version. With the help of masking tape, scissors, curtains, a lamp and a cat, I built a mock-up of a tram wall on my own wall to test colors and readability in different conditions.

Daylight:

Dull weather:

Night:

Obstructed by annoyed passengers:

The printouts on the wall turned out to be more helpful than I anticipated. The bundles of colors that looked good on screen melted into one dark line at night.

In the beginning, the colors of lines changed constantly. The “And Now I Will Sit Down and Select the Colors” approach didn’t work. In the color proofs, the lines melted together, and colour combinations had to be altered. It was a long and exciting process. When selecting the colors, I took into consideration that people suffering from some forms of color blindness (for example, protanomaly, which is a reduced sensitivity to red light) are unable to distinguish some colours:

The color matching process started with Pobedy Avenue — six routes run along it and make up the thickest bundle of lines. Altering it led to changes in the whole color scheme, as trams from Pobedy Avenue run all over the city, and nowhere should the neighboring lines get mixed up.

I made regular color proofs. By the end of the project, I had over a dozen printouts.

Changes in the flag of Chelyabinsk Tram Republic of Pobedy Avenue.

Stop and interchanges

Initially, I used thin lines to mark the stops, and thin frames for interchanges.

Then I replaced them with ‘stumps’ used on the Moscow Metro map. At first, all stumps were of equal height.

Ilya: “Let’s make the inner stumps smaller than the one that sticks out of the bundle so that they don’t block the lines”.

But it still was no good. The stumps looked familiar but stuck out too roughly and offended the eyes.

With the stumps came another problem: how to sign interchanges. With stumps sticking in different directions, it wasn’t clear where to place the caption so that it applied to all of them. I ended up drawing a thick frame around interchanges.

But the frame didn’t look like a stop, and it seemed that trams passed through it without stopping. We decided to look for some other stop marking solution and, along with it, another way to label interchanges.

On the London bus route map, lines are separated with thin white stripes, and stops are marked with white dots.

I tried it on our map.

Ilya told me to get rid of the stripes. I wondered why London designers get to draw them, and we can’t. Ilya explained that London bus stops are combined into groups, and each has its own route map that shows where you can get to from the current and neighboring stops. It is impossible to select the colors that wouldn’t get mixed up on any of the route maps. So for London, the white stripes between the lines are the necessary evil.

Ilya suggested that we join the dots that mark the stops with little passages and even out the edges. Now the stops started to look like sex toys.

As a result, the lines fell into pieces. The eye couldn’t glide along the route, stumbling constantly.

We almost decided to go back to stumps when Ilya suggested something cool — the waves:

It looked ok, but again the eye couldn’t move smoothly along the line, jumping up and down.

Ilya: “Waves look better if the bottom line is flat. And we need to think how to add bus lines to them.“

Probably with the waves as well. A bus cardiogram:

But we didn’t get to use the cardiogram, as the waves didn’t survive. With them, the map started to look like a rosebush, beautiful but spiky. But the waves affected the design of final stops.

We decided to put aside standard stumps and dots and look for something new. Tram stop nursery:

Close up:

The stumps got on the nerves with their angularity and vibration, and when flattened out they became indistinguishable. Ilya suggested smoothing out only the inner parts:

Eventually we settled on trapeziums. They are like regular stumps, only more sophisticated. The eye does not stumble on them, but smoothly goes up to the name of the stop. The first variant was the winner:

The line made of trapeziums reminded me of the Excitebike game for Nintendo:

At one point, we got doubts about the trapeziums and tried sticking pins into the map.

This is really painful to look at. It’s like feeling hundreds of needles poking into your skin. And it also looks like Pinhead:

After that, trapeziums were out of question.

Alongside ordinary stops, we were working on terminus design. In the first versions, the final stops of one or two lines looked like flags. The others, however, looked like rubbish — with numbers pointlessly floating above the lines. There definitely was a lack of uniformity.

For some time, I occupied myself with attaching and detaching numbers from final stops.

There was also another problem: after the final stop, the line continued for some time, and it seemed as if the tram goes somewhere after that. It didn’t look like it was the end of the line. Ilya suggested terminating the line precisely at the final stop:

I made another variant with trapeziums and glued-on numbers.

At the same time, Ilya sent me his version of final stop design: “Now it is obvious that the tram doesn’t go any further.“

I liked the approach and we decided to continue with it. But the other problem remained — we still had no idea how to deal with intersections. So we laid final stops aside for a little while.

The frames that I drew in the very beginning didn’t go well with the stop markers. When we started playing with sex toys (no pun intended), things got more enjoyable. You join the dots, and it is clear that they share a stop. At first sight, the stops are in order here:

But this is not true. It looks like the vertical tram doesn’t stop at Rossiyskaya, because the two dots lie on horizontal lines, and the vertical one doesn’t have any. If all the lines share a stop, each one should have its own dot. When Ilya explained it to me, I added extra dots so that each line had one:

But now it looked like the tram going along the vertical line got to stop three times in a row. I moved the dots, and the interchanges became uglier and more complicated:

I pulled up my sleeves, multiplied the most difficult interchanges and started to draw everything that crossed my mind:

Funny ones:

The right one looks like a tram driving device:

While I was busy drawing stuff, Ilya suggested trying the tiles:

The similar tile was among my variants as well:

All that was left to do was to make tiles smaller, calmer and neater. But at first I didn’t embrace the idea and came up with more variants.

Ilya commented: “Your selection of interchanges is impressive, but they are all about how to make more, and they need to be about something else.“ I started working towards simplification.

Couldn’t help myself from overcomplicating:

Tiles (more of them than actually needed):

After looking at the variants, Ilya decided that the winner is the one with tiles under interchanges: “It is an elegant way to sign several stumps at once without drawing attention to the interchange.“

After some deliberation, I agreed. In real life, stops on major junctions are not different in any way, so we don’t need to mark them differently. Tiles are really the winner here.

At first, I made the mistake of making the tiles too busy.

Then I calmed them down, and it worked out beautifully.

The beauty turned out to be invisible on the color proof, so I made the tiles a little bit darker.

After dealing with interchanges, we got back to final stops. Ilya made them three-dimensional:

I added a highlight to the fold — even more 3D.

Ilya: “Let’s then add a gradient to numbers.“

The lines turned into cool shiny ribbons that intertwined at interchanges and curved at final stops. At the end we got rid of the highlight, because it was too much. Cool shiny ribbons became awesome matte ones. It took me some struggle to perfect the fold. At first, it looked clumsy. Then it dawned on me to see what it looked like in real life. I drew five lines on a paper ribbon and took pictures of the fold.

After that, it was simple. I chose the ones that looked best and drew them.

Part two →

---

← back