Design 

Ctrl + ↑ Later

The fourth version of Moscow metro map 

I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map. I know several designers who gave up after they’ve appreciated how hard the task actually was. I had two major revisions of my map including the one for the official 2013 competition for the new map to be used on the system. In that version I’ve solved the problem of the Biblioteka imeni Lenina junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). I took the second place.

In the beginning of 2015 I saw many ways to make my map better. I wanted to use the space more efficiently and to improve the graphical design: remove the dirty gradients and pseudo-realistic shadows, use beautiful peanut-like transfers that I imagined. It took most of the 2015 to design the new map.

Here it is:

I like it on every level, it’s beautiful. I’ve spent much time to perfect the overall shape, the graphical rhythm, the relationships between the widths of the lines, ticks and circles. Inside the Circle line, I’ve found the most even distribution of captions and white space. This not only looks calm and unforced, but also makes possible a significant font size increase as the space is never lost.

I also had to engineer a special version of the PT Sans font for the map. I used PT Sans in the previous version and I like it. But it has a problem: the capital letters are too high. When you have a multi-line caption, you have to make its line height quite large, which is hindrance when you strive for density. So I had to create a version of PT Sans with lower capitals and slightly less prominent accents specially for the map. Thanks to Anna Danilova for help with this.

Go see the new map’s page in my portfolio. There you can also download a PDF to see the map in detail. Don’t forget to share.

   
2016   design   moscow metro   projects

Hand holding as a web design approach 

To create a successful web page about a product, try hand holding. In addition to saying what product you have, help the reader start using it: explain, guide, convince, clarify, warn.

Let’s say you are a bank and a you have a page about your savings account options. There are people who don’t know what deposits are or why they might want one. Others are afraid of having large amounts of cash on them and don’t want to go to the bank with it. Or they are just unsure which office to go to, what documents to have and how long the thing will take. Your job is to alleviate their anxiety, to raise their self-confidence and to help them make an informed choice. To get clients, help people become clients by hand holding. Explain why a deposit may be useful. Visualise the interest rate. Say how to transfer the money online from another bank. Show the nearest office on the map (include the business hours). Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or suppose you install windows and you have a page with options for fittings and glass coating. Well, most people have no idea on how windows are installed. Or even what elements they consist of. What should I consider before ordering windows? How to gauge a window opening? Who will disassemble the old windows? How long will it take to do the whole house? Can this be done in winter? What if a new window does not fit? Can I pay with a Visa? To get clients, help people become clients by hand holding. Explain the whole process from step one to step done. Connect the options to real-life cases (the inner windowsill for kitchen could be made of a heat-resistant material). Say in advance what can go wrong and how to avoid it. Publish the contract with useful comments on the margins. Acquaint the reader with your managers.

Or maybe you are a web hosting provider and you have a page that lists services, plans and options. This may be good for an experienced web administrator. But if someone makes their first website, they probably don’t even know that a domain name and web hosting are separate services. They have no idea if they need CGI, SSL or mod_whatever. They have no clue how to make email work. To get clients, help people become clients by hand holding. Help them figure out which set of services will fit them depending on why they came. Explain what steps are necessary from subscribing to a hosting service to opening the website. Help understand and configure DNS, choose and set up an FTP-client. Publish the contract with useful comments on the margins. Acquaint the reader with your support team.

Yes, the answers can be found online. But if you rely on that, you didn’t do your job well. Your website should work like an experienced and attentive manager, not like an indifferent price tag.

Many people suffer from professional deformation: they think everybody understand their technical terms and work principles. I’ve even heard an opinion that such “hand holding” shows disrespect to a client by treating them like a child.

This is an error. Everybody likes feeling taken care of. If your hand holding feels patronising, your are just not caring sincerely enough.

   
2015   design   service design   web
2015   design   work

Spanish state graphic design 

I will later publish the stories from Barcelona, Tarragona, Valencia and Sitges. Now, several examples of graphic design of Spanish official bodies.

The symbol of Barcelona city hall:

Barcelona city hall symbol

Street prohibition sign with it:

Street prohibition sign in Barcelona

Sometimes it is used on a “big B” label:

“Big B” label in Barcelona

Museum of Picasso:

Museum of Picasso

Red on black looks cool (above the entrance):

Red on black Barcelona city hall symbol

This one is probably a simplified version of the same:

Another sign

The grilled variant of the “big B” is used on everything that has to do with garbage. Garbage can:

Garbage can

Garbage truck:

Garbage truck

Ministry of home affairs and police:

Ministry of Home Affairs

Barcelona city council:

Barcelona city council

The symbols of city halls of Tarragona and Sitges aren’t too interesting (here to complete the picture). The symbol of Tarragona city hall:

Tarragona city hall symbol

The symbol of Sitges city hall:

The symbol of Sitges city hall

The symbol of Valencia city hall:

The symbol of Valencia city hall

On a manhole cover:

The symbol of Valencia city hall on a manhole cover

Government of Valencia is the coolest:

The symbol of the Government of Valencia

Just great:

The symbol of the Government of Valencia

The shield:

The shield

On a beach in Vinaròs:

On a beach in Vinaròs

The government of Catalonia:

The government of Catalonia symbol

On a police car:

The government of Catalonia symbol

On a tax authority building:

The government of Catalonia symbol

With all the symbols of Catalan councils:

The government of Catalonia symbol with all the symbols of Catalan councils
   
2015   design   Spain   world

Ellen Lupton’s “Thinking with Type” 

Don’t read this book:

Ellen Lupton’s “Thinking with Type”

The book is split into three sections: Letter, Text and Grid. This gives the illusion of structure, but don’t be fooled. This is the most disorganized book on design I have ever read.

There is no narrative. Ellen jumps from topic to topic as if each spread was from a separate book. She would write about obscure InDesign hotkeys, font licensing, HTML header tags and even proofreader’s marks without any coherence. Sometimes she would pretend the reader has no idea about computers at all: did you know, she would ask, that if you press Shift+Enter instead of Enter, you would get a new line, but not a new paragraph?

Ellen would explain how typeface is not the same as font. Then put a spread of some student works of questionable value. Then write half a page about “branding”. Because why not write about something, if such a thing exists? It feels like Ellen just crammed together everything she heard about typography giving no crap as to how these random facts, thoughts and examples would help anyone get better at anything. None of the topics is given any care, many are given just a couple of paragraphs.

As to author’s credibility, I have to say she thinks that a double prime (˝) is the same as dumb quotes ("). She sets HTML is small caps, but CSS is all-caps — on the same page, that is. She would also explain that CSS is Cascading Style Sheets (very helpful). At some point in the book she mentions Tufte, then tries to redesign a table and comes up with a result that shows that she either did not actually read Tufte or completely missed the point.

If you are new to design and typography, after reading the book you’ll go, wow, there’s so many stuff — I guess I will now have to find real books to figure it all out. Well, just go straight to Tufte, Bringhurst, Tschichold and Müller-Brockmann.

   
2015   books   design   rants   reading   typography

Ideal link underlines don’t care about letter descenders 

Traditionally an underline was used for emphasis:

Underline for emphasis

Some logos use it to look important:

Some logos use underline to look important

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.

But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).

In Crafting link underlines on Medium, Marcin Wichary says that an “ideal” link underline would look like this:

Marcin Wichary says that an “ideal” link underline would look like this

But this is not ideal, this is exuberant. You don’t want to break one underline into six stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.

This is not as bad as the new Safari rendering though:

The new Safari underline rendering is disgusting

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information, Layering and Separation). Make them ignore the existence of each other:

   
The text and the underline in separate visual layers

Notice how this underline is very thin. It resembles a hair on a piece of paper.

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations, The Smallest Effective Difference).

   
2014   design   typography   web
2014   design   projects

Form labels vertical alignment 

Form labels should be put on a baseline of their fields’ text:

Form labels should be put on a baseline of the fields’ text

If you put a label at the vertical center of a field, as some do, it will jump up when split into lines:

If you put a label at the vertical center of a field it will jump up when split into lines

It gets worse with more lines; here the long label has actually shifted down the field:

It gets worse with more lines

If labels and fields behave this way, a form looks unstable and loosely built, and you start thinking badly of its developer.

The first line of a label text should always stand still:

Same with multiline fields’ text:

A form is an editable table, so the table layout principles apply.

   
2014   design

Ångström: the update animation 

One of the objectives of the design of Ångström was getting the result as fast as possible. But we’ve confronted a problem with currencies: getting the current rates takes time.

We didn’t want to give up on immediate feedback. So we decided to show the result with the rates we have locally and use an approximate equality sign to hint at it:

Ångström: the update animation

While the currency rates were updated, a standard spinner spun in the phone’s statusbar. When the new rates were downloaded, we updated the result and replaced the sign with the strict equality one.

And then an idea came to our minds to make the process more fun: instead of showing a boring spinner, we have animated our equality sign. The wave oscillates during update, and when the data is loaded, its amplitude gradually decreases to zero:

Ångström: the update animation

This is how it shipped.

We like it how one element performs two functions: shows that the data is approximate and shows that the new data is coming. You don’t see this in the app often, as we periodically update the rates in the background, but it still appears sometimes if you are lucky.

   
2014   Ångström   design   user interface

Three states of a website menu item 

A website menu item has three possible states.

Unselected:

Three states of a website menu item

We are not at “Swag” and can go there by clicking. The link is underlined, on hover it highlights and the cursor changes to a pointer, the link leads to the main page of the section.

Current:

Three states of a website menu item

We are at the main page of the “Swag” section. The text is put on a background, does not react in any way to hover or clicks.

Parent:

Three states of a website menu item

We are at one of the pages of the “Swag” section, but not on the main one. The link is put on a background and underlined, on hover it highlights and the cursor changes to a pointer, the link leads to the main page of the section.

This is an obvious and logical standard. Highlighting the current section with an underline or reloading on a click the page where the user already is, is an indication of a careless, unreasoned design.

   
2014   design   user interface
Ctrl + ↓ Earlier