Blog

Recently:  Introducing Aegea  ·  Map and reality  ·  Why are browsers so slow?  ·  The “Buy” button should always work  ·  How accidental promises hurt reputation

   

Transport map design. Part 2 

In the first part I’ve covered the difference between the Beck’s London underground map, our Ekaterinburg metro map, and the Vignelli’s and Hertz’s maps of New York subway. But even the maps that appear to be much more alike in principle, have many little details to serve their cities’ needs.

On stations, there are tracks for opposing directions. In some cities, these tracks are marked with the names of a line’s terminals. Barcelona:

The terminals are thus important for wayfinding, so they have to be emphasised on a map. In Barcelona, they put the terminals’ names on a background, whose colour matches the line’s:

In Paris, they use bold font and put line number symbols:

This is unnecessary in London, where instead of toponymics they use geographic directions (i.e. “Northbound”).

In Oslo, a thick wisp of lines passes through the city centre. One of the lines forms a loop and passes several stations twice: first as line 4, and then as line 6. The transformation from 4 to 6 is shown with a gradient — not a typical element indeed:

There is another detail in Oslo: the trains pass the Gulleråsen station only in one direction. This requires a designation, an element that was not used in any of the maps we’ve discussed above:

Moscow has its own peculiarity: for historical reasons, the stations have different names on different lines (sick, but what can you do). In addition, the Moscow metro map has to use both Cyrillic and Latin scripts for its station names. Depiction of transfers turns into a problem. Here, eight names should be positioned around the “Biblioteka imeni Lenina — Aleksandrovsky sad — Arbatskaya — Borovitskaya” junction, where four lines intersect:

Fragment of the official map. This place looks cleaner in my design

A whopping six lines intersect at London’s “King’s Cross St. Pancras” station; just one name suffices:

There is not a single place on the giant London map where a station name intersects a line — there is always space around the lines. To achieve this in Moscow, one would need to dramatically reduce the font size and complicate the line geometry. That’s why Moscow metro map includes a device the London one does not: a transparent plaque for the station names crossing lines (see above).

But London has its own complication absent in Moscow. The grey “clouds” designate the payment zones — something Moscow does not need since the price of a ride is fixed:

Every city and transport network has lots of details which make it impossible to use the same exact graphical principles everywhere. But there is another reason for maps to be so different, which I will cover next time.

   
Apr 20   design   maps   transportation

Planet Modulor store in Berlin 

Despite having no need for art supplies whatsoever, these sort of shops always drag me in somehow. There must be some psychological condition that when you see a family of items, each one of them seems much more attractive. Particularly true this is, when the items are neatly organised.

Here, for instance, are colour pencils:

1

Most are sold already, but the attraction still works.

Or some ropes:

2

You cannot not want them.

It’s Planet Modulor, a Berlin shop for all things material from stationery to scale models (photos from the April 2006 trip). Entrance:

3

Note the 3D stairways.

Inside signage:

4

More:

5

Nice colours:

6

A ruler:

7

Just copybooks:

8

Also copybooks. If I ever wrote, I would use one of these:

9

Clean:

10

Scale models of humans:

11

Transportation and furniture:

12

This department drew my attention immediately:

13

Looks like some transit maps:

14

I don’t remember what was inside, so probably it turned out to be not that interesting.

Scrolls with street panoramas:

15

The coolest department was the one with 3D printers. You can stand in a circle, they would take pictures of you all around and then print you out like this:

16

To try out markers, you colour some patterns, not boring white paper:

17

Every time I see black paper and light pens, I think I should start sketching user interfaces on paper like this:

18

Also recommended: London Graphic Centre at Covent Garden (Mercer st. and Shelton st.). Another place where you can easily spend an hour.

See also:

   
Apr 17   Berlin

Transport map design. Part 1 

For many people, a map of a transport network is a given, an expected part of a system, something that just is — like a fire escape plan in a building. So when I say that I design transport maps, they don’t understand. What is there to design, even?

The London underground map by Harry Beck was the world’s first transport map to use the principles of electrical circuit drawings:

Transport map design as a city’s signature

All line segments were put to the angles of 45° and 90°. The distances between stations were equalised. I wrote about it in part three of my “Maps and reality” series, Diagrams.

This schematic approach was later adopted by many transport maps of the world. But not every time was this a good idea. This is one useless map (Samara, Russia):

It adds almost nothing to just listing the stations:

Алабинская · Российская · Московская · Гагаринская · Спортивная · Советская…

Beck’s design dealt with growing complexity and spread of London underground rail network. When there is just one line, it’s better to put this line in context. See our Ekaterinburg metro map, for example:

Every transport network requires a specialised solution.

Let’s look at New York. The subway is large and complicated, but quite different from London: trains can have different routes, which are denoted by both numbers and letters. In 1972, Massimo Vignelli designed this map:

In London, ticks are used to depict stations:

Vignelli couldn’t have used them in New York. In London, lines rarely run together through the same stations. And when they do, all trains in a “wisp” stop at all of them — see Great Portland Street and Euston Square above.

In New York, such wisps are everywhere, and some trains don’t stop at some stations. So when there is a stop on a particular route, Vignelli puts a black bullet in the route’s line:

You can see that at some stations, not every line has a bullet.

Vignelli’s map was beautiful, but, unfortunately, unsuccessful. People considered it too abstract. Having no geographical reference, the eye had nothing to catch on. Also, the stations named with street numbers looked identical — the font was just too small for that.

This design was the closest to London’s that New York has ever seen.

The successful design was the one by Michel Hertz (1979) — still in use. It includes parks, ponds, main streets and areas names:

Illustration from an interview with Michel Hertz

The related routes are denoted with just one line, not a wisp:

But there’s a list of stopping routes at each station. Look at the red line, for example. Only route 1 stops at 18, 23 and 28 st., but all routes stop at 14 and 34 st.

Hertz wanted his map to look geographical. But he knew that a “true” map would use the format very inefficiently. So his map is actually distorted significantly for everything to fit. Google Maps on the left, Hertz’s map on the right:

Hertz’s map doesn’t look stylish. But it has proven to work well. This is a very specific, bulletproof design tailored to New York.

To be continued.

   
Apr 12   design   maps   transportation

Berlin U-bahn station names 

Here are some Berlin metro station names (photos from trips of August 2005, April and May 2016).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

My favourite plate:

16
17
18
19

Animals:

20
21

Another boring one:

22
   
Apr 4   Berlin   world

Kiev in April 2016, all the rest 

Here are the rest photos from Kiev in April 2016 that I wanted to share.

In Kiev, there are several peculiar subways. The stairways from the crossing streets run down in a form of an arc, uncovered. The entrance to the subway is where the stairways meet:

These graphics in one of the subways represent the Ukrainian cities:

A manhole cover:

An airplane pictogram confusingly points in wrong direction:

The university is painted with a crazy colour:

At night it looks infernal:

A sign on a fence:

Wall art:

Another example:

There was an exhibition of painted eggs on a square — many looked beautiful:

Dnipro:

More Kiev:

   
Apr 2   Kiev   world

Mimic 2.0: The client’s feedback 

I’ve recently designed the new user interface for Mimic, a web developer tool for mocking server responses in a browser. Ilya Gelman, one of the Mimic’s developers, comments on working with me:

Ilya is of that rare kind of designers that seek to find solutions to problems instead of matching colors and shadows. He asks the right questions, concentrates on important things and understands that real products aren’t just beautiful pictures on dribble. He helped us redefine our tool to make it simpler to use and easier to understand.

Working with local Israeli designers, we usually communicated by real-time channels like Slack, WhatsApp or phone. It was a bit different with Ilya because we had to communicate mainly via email and had to schedule our calls ahead of time. Part of this was the difference in time zones and part of it was Ilya’s principle of managing his own time, which I can fully understand and respect. All in all we never had an issue of lack of communication and everything was always delivered on time.

What I liked about Ilya the most is that he was able to explain the reasoning behind his design decisions, and that he knew how to work together with us to get our tool released on time.

   
Apr 1   feedback   projects   quotes

Signs and plaques in Kiev 

More photos from Kiev.

Listed building:

1

A memorial plaque:

2

A museum:

3

Hand-written posters:

4

Hardware store:

5

A hairdresser’s sign:

6

Another one:

7

Some kind of a special kind of house:

8

Don’t park here:

9

A cafe:

10

M & M:

11, 12

Nice curves:

13

A clothes and vinyl shop:

14

Nice layout:

15
   
Mar 18   Kiev   signs   wayfinding   world

Make text lower case 

Sometimes you paste a text from somewhere, and it’s all upper case, and you want to make it normal case. Few people know that changing text case is a built-in feature of every text field on a Mac, like cut, copy and paste.

Edit → Transformations → Make Lower Case:

Make text lower case

See also: Quickly convert any text to plain text.

   
Mar 18   lifehack   Mac

User interface for Mimic 2.0 

A web application’s front end (what the user sees) and back end (what happens on a remote server) are often developed separately. If the back end of some feature is not ready yet, the front-end developer is very limited in what they can do.

I’ve designed the user interface for Mimic 2.0, a web developer tool for mocking server responses in a browser. With Mimic, you can develop as if the server was alive. It’s very easy to set up a simple mock. Say, you want to pretend the server responds with a line of JSON:

It lets you set up very advanced mocks, adjusting HTTP headers, timeouts and what not:

The great thing about Mimic is that you don’t need to set up a local server and change request URIs in your application. It works with the existing applications as they are, right in the browser. And you don’t even need to install browser extensions: you just link one script to your application and that’s it.

Read more about the user interface on the project page.

   
Mar 17   projects   user interface   web

Kiev street name plates 

A characteristic Kiev street name plate looks like this:

1
2

There is a bulb inside, sometimes:

3
4

An old one:

5

An ugly soviet one:

6

The ones on Khreshchatyk look more like car license plates:

7-8

There is also a blue design:

9
10

And also there are these weird boxes at the entrances:

11
12
   
Mar 14   Kiev   street name plates   world
Ctrl + ↓ Earlier