In part 1 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. In part 2, I’ve highlighted the more subtle details specific to the transit maps of Barcelona, Paris, Oslo, Moscow and London.

All these differences in maps were because of the differences in the cities or their transportation systems. But there is another reason for the maps to be different: aesthetics.

The transport map is not only a tool, but also is a notable object of graphic design in a big city. So even if you can make do with the Beck’s design language, you will get a London map, no matter what you depict. The transport system must have a face, and aesthetics is as important as logic.

The main feature of the Moscow metro map is the Circle line. It doesn’t fit the Beck’s language, but it’s very important to Moscow. This is not Moscow:

This, on the other hand, is:

London also has Circle line, but it has never been depicted as a circle. Today, it’s not even a closed loop:

These Circle lines are large elements and form the overall image of the map.

But little details also influence the perception of a map.

In London, the black rings of the transfer stations are noticeably thinner than the lines. The “corridors” are of the same width. The stations’ ticks are square, stick out at 2/3 of a line’s width. The names are typeset with blue New Johnston:

In Moscow, the fat rings of the transfers are coloured with their line’s colour. The “corridors” are much thinner and have a gradient. Some transfers are circular. The station ticks stick out at full line’s width. The names are typeset with black Moscow Sans:

Look at this tram map:

It’s obvious that it’s a London tram map, not some other one. It follows the London transport graphic design standards — the rings, the ticks, the captions.

When we see the beige background, the particular palette of the lines, the filled station disks and the distinct designation of the transfers, we immediately recognise the Paris map:

Jug Cerović follows an unusual 18-degree angle grid in his Luxembourg map. If you saw it once, you recognise it every time:

For the Chelyabinsk trams map we’ve come up with these 3D terminals:

Why are they like this? The only reason is that we wanted this map to look special.

It is not enough for a good transport map to just answer the question “how to get there”. Since it is used everywhere, it is part of a city’s image. And if its design is powerful, it influences the city in other ways.

The Moscow’s Circle line in has inspired designers to create these beautiful wayfinding steles:

The round designations of the New York subway train routes are used in all the signage and have even made it to the dots above i in the pedestrian city maps (in the classic Helvetica these dots are rectangles):

And in London, the Tube Map has given birth to the graphical language of all the transport-related signage:

This graphical language is so iconic that you can even buy all sorts of souvenirs with its elements: t-shirts, umbrellas, shower curtains. This design has spread not only beyond the Tube, but beyond London. There are all sorts of maps done in this style:

A playful depiction of cities listed in Mark Ovenden’s “Transit Maps of the World” book

Strong graphic design of the transport systems makes them more attractive. This helps cities get rid of private cars. People spend more time outside, interact with each other. This gives small businesses a boost and makes cities more pleasant to live in.

Most web pages don’t load pleasantly. Loading takes time, images and other elements appear in a random order. Content jumps when new elements load above it. Some things are unreadable before a font or a background is loaded. We are used to this.

Desktop apps are different: an app’s user interface would appear only after it’s loaded. The apps that are slow to load show splash screens.

The desktop approach looks more polished. But on the web, we can start reading and even using a page before it’s fully loaded.

How can we take the best of the two worlds? We can gradually show a page, but make sure it looks fine at every step of this progressive loading. And we’ll try to minimise the jumping. I call this “coordinated loading”.

Emerge is a JavaScript library that I’ve created to help add coordinated loading to your website. Normally you would need to manually write a lot of code to do this. But with Emerge, you just specify the desired behaviour with HTML attributes. Let’s see how you can use it on your website.

Prepare: provide boxes for images and other external objects

Before we even start using Emerge, let’s fix one thing. Consider this code:

<img src="some.jpg" />
<p>Text</p>

Before the browser has loaded the image, it has no idea how much space to provide for it. So it first just shows the text as if there was no image. When it starts loading the image and figures out its size, the layout changes for the image to fit. So the text jumps down.

To avoid the jumping, specify all images sizes:

<img src="image.png" width="200" height="300" />
<p>Text</p>

Here’s how you can do this with PHP (5.4 or later):

<img src="image.png" <?= getimagesize ('image.png')['attribute'] ?> />
<p>Text</p>

But what if you want an image to be flexible, i.e. occupy 100% of the container width?

<img src="photo.jpg" width="100%" />

In this case, to avoid the jumping, you’ll need a container with fixed proportions. Let’s say you have a 3:2 photo. Here’s a way to do it:

<div style="position: relative; padding-bottom: 66.67%">
<img style="position: absolute" src="photo.jpg" width="100%" />
</div>

Paddings’ percentages are always percentages of width, even for vertical padding. So the div will have 3:2 proportions even before the photo is loaded. PHP code:

<?php $size = getimagesize ('photo.jpg'); ?>
<div style="position: relative; padding-bottom:
	<?=round (100*$size['height']/$size['width'], 2) ?>%">
<img style="position: absolute" src="photo.jpg" width="100%" />
</div>

The same can be done with videos.

Figure out which elements of the page make no sense unless they are fully loaded

OK, appearing images will no longer cause jumping. That’s a win already.

But with the Emerge script added to your page, you can do more. Use class “emerge” in an image to make it fade in (“emerge”) when loaded:

<img … class="emerge" />

What if your image has a caption which makes no sense unless the image is loaded? Actually, you can wrap elements in divs with class “emerge”:

<div class="emerge">
  <!-- Text, images and what not -->
</div>

You can put multiple images and videos into such div. The div will emerge only after all images and videos inside it are loaded.

Add a loading spinner for large elements

Some of your emerge elements may be quite large and take considerable time to load. The user may be confused by a large empty space on a page. So you can ask Emerge to display a loading indicator while such elements load:

<div class="emerge" data-spin="true">
  <!-- Show spinner while this is loading -->
</div>

Emerge has a built-in spinner with variable size, color and spin direction. If you want a custom spinner, Emerge supports them too. The documentation explains spinners in detail.

Make sure things appear in order

It may happen that an element which is lower on a page loads and emerges before the one which is above it. This may look strange and you may want to make sure the element load in a particular order.

Here is the easiest way to make an emerge element wait for the previous one to load:

<div class="emerge">
  <!-- Some content -->
</div>
<div class="emerge" data-continue="true">
  <!-- This will wait for the previous element to emerge first -->
</div>

The attribute data-continue means that even when this element’s images and videos are ready, it would emerge only after the previous one. You can chain many elements this way. If document order is not what you want, there is also a way to make one element wait for a particular other element by its id.

Select effect that make your site look best

By default, elements emerge by just fading in. But this is also adjustable.

Here are some examples of what you can do. You can make an element slide horizontally or vertically while it emerges:

<div class="emerge" data-effect="slide" data-up="20px">
  <!-- Stuff that will slide up 20px while emerging -->
</div>

Use data-down, data-left or data-right to change this. You can combine a horisontal and vertical parameters for diagonal motion.

Or you can make an element zoom-in:

<div class="emerge" data-effect="zoom">
  <!-- This will zoom in while emerging -->
</div>

Tune the original size with data-scale=“0.8” (or another value).

You can control an animation duration with data-duration (in ms).

There are other effects, which you can read about in the documentation. You can also provide an exact CSS for initial and final animation states.

Experiment and have fun

Since Emerge does not require you to write JavaScript, it’s very easy to experiment with. Find the way for your website to load in the best possible way.

But make sure you use the effects to improve the way your site loads, not make it too flashy and distracting. Don’t wrap the whole page into an emerging div: the user won’t see anything before everything is loaded, and your website will feel very slow.

The idea is to find elements that make sense only as a group, and make such groups appear in a single fade-in animation when ready. And then coordinate the order and motion for these groups.

In 2016 I’ve re-mixed my old progressive house track Cargo, and now it sounds much better:

Before:

On the 21st of April I played techno in Art. Lebedev Studio:

There are two mistakes: at 31:20 and at 1:20:11.

Playlist:

Aegea 2.6 has been released. Aegea is a great blogging engine.

What’s new:

• Continuous autosaving of form data in post editors. Data is being saved locally in the browser. If the browser or the OS crashes, when you open the editor again, your latest changes will be there. If you edit the post from another device and save the changes to server, the most recent server version will open.
• The new search finds more relevant posts, works faster and formats the results in a better way. It will not show the full posts, but just the fragments with the search query. If the found post contains images, it will show their thumbnails for quicker identification. For example, try searching “street” in this blog.
• It’s now easier to set a post’s cover image for social networks. Just drag an image into the editor’s page. If you drop in onto the Text field, if will be inserted in text, but if you drop it outside the Text field, it will just get added to the post. Social networks will see it as part of the post, but it will not get displayed in its text.
• Improved database migration from older versions.
• Multiple other small improvements.

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

• Death by Passive Voice, on writing, by Max Bears
• Daniel Lesden blog, on music production, by Daniel Lesden.

With Aegea, you can use the built-in neutral theme or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

The main design:

1

Below the main plate there is a place for a nano-plate with addresses range:

2

This one with a red spot can be used as a nice logo:

3

If a street is named after someone, there is an additional plate about them on top:

4

These are two different ligatures:

5

6

Nice name:

7

8

Alternative design:

9

10

Rare beauty:

11

More Berlin:

• Planet Modulor
• U-bahn station names

See also Kiev street name plates.

Jouele is a simple and beautiful audio player for the web. Eugene Lazarev has been developing it lately.

Version 2.3 has been released. Jouele now uses Howler (bundled) instead of jPlayer. This change helps use less bandwidth, display the preloader better and get rid of several bugs. The data-repeat feature is now supported on single tracks. When a file is unavailable, Jouele shows this with an icon, instead of just “hanging”. The markup works better in different browsers.

Song example:

See documentation on Github.

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.

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:

• Berlin U-bahn station names