Here’s a new logo for Kvartirka which helps to find short-term housing:
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:
Street prohibition sign with it:
Sometimes it is used on a “big B” label:
Museum of Picasso:
Red on black looks cool (above the entrance):
This one is probably a simplified version of the same:
The grilled variant of the “big B” is used on everything that has to do with garbage. Garbage can:
Ministry of home affairs and police:
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:
The symbol of Sitges city hall:
The symbol of Valencia city hall:
On a manhole cover:
Government of Valencia is the coolest:
On a beach in Vinaròs:
The government of Catalonia:
On a police car:
On a tax authority building:
With all the symbols of Catalan councils:
Don’t read this book:
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.
Traditionally an underline was used for emphasis:
Some logos use it 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:
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:
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:
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).
Check out my visualization of a snooker tournament results. The diagram shows Welsh Open 2007 down to a frame.
Form labels should be put on a baseline of their 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:
It gets worse with more lines; here the long label has actually shifted down the field:
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.
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:
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:
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.
A website menu item has three possible states.
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.
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.
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.
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.
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.
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:
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:
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.