Design 

Ctrl + ↑ Later
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

Immediate feedback when data is unavailable 

Immediate feedback is one of the core principles of good user interface design. But what if the data is unavailable for the feedback?

When you increase the zoom level in Google Maps, you see the enlarged view of the data you had already downloaded:

And a couple of seconds later the view updates:

While blurry maps suck, having to wait for several seconds before seing anything would suck much more.

Another example would be Apple’s Safari on the first iPhone. The device had so little memory, it could not fit a whole webpage into it, so it had to render only the parts you were currently looking at. When you scrolled past the rendered area, you saw a checkerboard pattern:

And a couple of seconds later the page rendered:

While the pattern is not much fun to look at, this design is significantly better than if the browser would have to wait until the data was ready before responding to your touches.

Lesson learnt: when you cannot respond with a precise result immediately, show an approximation immediately, then the precise result a moment later.

   
2014   design   user interface

Ugly and neat mail 

Ugly mail defames the sender. It may later occur that the sender was a good person, but life is unjust: a book is judged by its cover.

Examples of ugly mail

Random line breaks, an unwelcome line in bold with a blue highlight, multi-level colorful signature — the first thing you want to do is wash your hands:

Two long links, a fly in the middle, no signature:

Shapeless text, strangely split paragraphs, three links in random places:

Lines start with lower-case letters, the signature is enormous — only ten percent of the body are actual information:

This one is just hell:

How to make a mail neat

You don’t have to be a designer. Starting sentences with capital lettres and splitting it into paragraphs is something everyone is taught in school.

This one is pleasant to read:

So, little advice:

  1. Break text into sentences. A sentence starts with a capital letter and ends with a period, question mark or, rarely, an exclamation point. Sentences are separated with a single space. Excessive use of ellipses and parentheses blur the sentences boundaries.
  2. Separate paragraphs with an empty line. For a start, a simple rule will work: if you press Enter, press it once again. Do not break line if you are not going to start a new paragraph. Do not start a paragraph with a left indent (an email is not the same as a book). Paragraphs separated by empty lines and left-indented are the worst.
  3. Do not put long links inside a block of text. When broken into lines, such a link looks particularly bad. It is better to give it a dedicated paragraph. Or it can cling to the previous or the following paragraph, if it has to do with it.
  4. Do not include the whole history of correspondence. Quote only the part you reply to. Nobody likes to hunt for meaning. The shorter your mail is, the quicker you will get a response.
  5. Make your signature short. Does everyone need to know some obscure instant messenger ID you have long abandoned? Probably not.
  6. Lay out the signature in a clean way. A bad example would be separating the signature with a line of hyphens. Do not put the signature in a box, do not use a logo (sure, your logo is awesome). Do not colorize the text: any added color, including grey, adds clutter. Grey signature with blue links attracts attention, while the opposite is required.
  7. Leave two empty lines before signature. It is the simplest and the most effective way to separate the signature without adding noise.

It amazes me how some people pursue neatness in places where it does not matter (like in how the store their bills or how things are laid out in a car trunk), but don’t care how they look daily on the screens of others.

   
2014   design   email   life
Ctrl + ↓ Earlier