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

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:

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.

Continued

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

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:

• Kiev yards
• Transport in Kiev
• Kiev street name plates
• 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

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:

See also: Quickly convert any text to plain text.

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.

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