In architecture and design, restraum refers to the space around or within things. This concept of empty space is more akin to reality. Sometimes there is a lot of it; in the cities of the modern world, space is at a premium. Creation means either building upon existing structures, and improving what is there already—or destroying what’s there to create something new. Destruction costs time, energy and money. It also removes something that was there before.

Think about the Palast der Republik that was in the centre of Berlin. Seemingly because it was a symbol of the repression of the DDR regime, it was replaced by a replica of the palace that was there before. Was the old building destroyed because of these sentiments? It likely was removed because it took the place of the Berliner Schloss that was largely destroyed during World War II. You have to wonder when the current replica will be destroyed for the next piece of utopian architecture.

We somehow believe the digital world is different: that there is unlimited space, that we can create without destruction, and that we can keep what was before. Yet it is increasingly clear that digital products are rooted in the physical world with all its limitations. Digital endeavours cost real resources: they need money and work to exist, if only to keep the servers running.

If digital structures take up space just like their physical peers, the whitespace they leave is restraum. It’s the unimagined becoming imaginable; the unrealized being realizable; the conceptual turning visible.

Maybe the restraum is what counts: the space we leave when making other things. Maybe we obsess too much about what we produce. Don’t get me wrong: I do not claim we should stop producing. Instead I believe the concept of restraum is a very powerful perspective to more clearly see what has actually been made.

Run, rabbit, run
Dig that hole, forget the sun
And when at last the work is done
Don’t sit down, it’s time to dig another one
Breathe (In the Air), The Dark Side of the Moon, Roger Waters

The post Why Restraum? appeared first on Restraum.

In the words of the initiators, Pentagram designers Hamish Smyth and Jesse Reed: ‘As design nerds, we think the Worm is almost perfect, and the system behind it is a wonderful example of modernist design and thinking.’ The Worm is the affectionate name given to the seventies NASA logo. You can read the rest of the rationale behind the reissue on the Kickstarter page.

The whole thing fascinates me on several levels. Who are the people backing the project? Why would you want to possess such a utilitarian out-of-print publication like this? And why is this getting so much attention?

That it is about NASA helps a great deal of course.¹ And most of the backers undoubtedly are design nerds themselves. Most probably designers as well.
After all it is their job to create visual identities like the one described in the manual (consisting of logos and other graphic elements, rules for typography, etcetera) and to make stationery, websites, brochures, magazines, books, etcetera, etcetera, etcetera. Imagine being a member of this select group. Lots of professionals follow the rules made up by others. Usually this is not how designers work: creativity is often seen as reinventing the rules. If you are a designer, not following rules is expected of you. If you only applied the rules, clients would say: ‘Did you see how our designer just made every sample exactly the same? Where is the creativity in that! I could do that! My mailman could do that! My four year old could do better!’
Or could they? Let’s assume that everyone was creative. Things would quickly get out of hand. The world would consist of a lot of four-year-olds. Nothing would get done and costs would spiral. This would be untenable and would endanger a free market economy. So, on the one hand you have creatives; on the other hand there is the need to earn money. Something’s gotta give.²

To ensure that every possible design permutation fits within the same style, you would have to describe the very nature of them all. In other words, you would have to define the boundaries. The resulting set of rules governs designer behaviour and at the same time solidifies client expectations.
Consequently both parties profit. Designers promise clients to be creative only where it counts, so the end result will be consistent. Clients agree upon what parts of a visual identity they want to have set in stone, and what is open to interpretation. If any third parties are also involved in designing for the client, the ruleset will make sure their creativity is also subject to the chosen bandwidth.
Put together in a publication these rules are called Identity Guidelines, Brand Style Guides, Identity Manuals, or like the NASA one, Graphics Standards Manuals. Books of law for graphic designers.
In the volatile world of visuals, rules are easily bent, and even design police needs its codex.³

Now here comes the fun part: these manuals are paid for by the client. That’s one important reason that designers often convince clients that they need these in the first place. For instance, the client might say: ‘I need to hire another designer. Your services are too expensive, you cannot the deliver in time the volume that I ask from you, and besides, it would be good for the both of us.’
The designer could respond by saying: ‘The identity is my creation. It’s paramount that I show them what to do. Why don’t I write a guide? I promise you it will have lots of informative pictures. This way anyone can look at the pictures and understand the style.’

The work on this publication will guarantee the designer a certain amount of work. It will also make sure that sessions with the other designer can be as short as humanly possible. And that difficult questions about the identity can be redirected to the manual. Case closed, and everybody is happy.
Regrettably I have also experienced how designers were kicking and screaming purely at the thought of having to produce such a manual. And well they should be. Instead of making singular drawings willy-nilly like any four year old, now they have to cooperate on this gruesome tour de force. They have to produce the semblance of colouring pictures, and with any luck they later have to fill those in themselves—when they are working on new deliverables.
Soon they realise it takes the lifestyle of a monk to produce a work like this. Bread and water only. It will take time, and it will take money. It will stifle any impulsive acts of creation.

Do you see the ambiguity in the designers’ relationship with a standards manual? You can understand why I had a chuckle that lots of designers are subsidising a reissue. They pay $79, have all the fun, and none of the labour.

1. From what I have heard, lots of boys had Apollo stickers on their closet door in the seventies, like I did. ↩︎
2. A conundrum not unlike that which is described in the Seinfeld episode ‘The Contest’:

   – So, you’re still Master of your Domain?
   – Yes, yes I am. Master of my domain. But I will tell you this: I’m going over to her apartment and I am telling her to put those shades down!
   – Wait, wait wait… Whoa, whoa whoa—what did you just say?
   – I can’t take it any more! She is driving me crazy. I can’t sleep, I can’t leave the house. When I’m here I am climbing the walls. Meanwhile I am dating a virgin, I’m in this contest… something’s gotta give! ↩︎
3. How different from those architect’s laws that forbid window shades on glass. The architect surely has the advantage of the immobility of his creations. ↩︎

The post Please Make Me a Standards Manual appeared first on Restraum.

Of course capital letters are the origin of our alphabet. The Romans themselves used almost exactly the same alphabet as we do, except for U and J. They did not have lowercase letters though. The stout forms of their letters is strongly related to the way in which they were used: to inscribe names on public buildings and temples.
Movie poster credits have a similar monumental quality about them. And this is exactly what they communicate: power, strength, invincibility and durability.¹

But why use capitals in two different sizes? Isn’t one size enough? In fact the smaller size capitals are not really capitals but ‘small caps’. Very aptly but also confusingly named, since these are not just uppercase letterforms which have been reduced in size.
Small caps are defined as uppercase characters set at the same height and weight of surrounding lowercase letters. They were invented somewhere in the 17th century as a variation used for emphasizing words in a text. Because of HOW THEY ARE DRAWN, their forms fit in with normal set body text. Their height respects the vertical spacing between lines also known as vertical rhythm. Uppercase used at the beginning of sentences or words set in lowercase—or in other places depending on the ortography of the language—still stands out. And because their weight is corrected, the overall grey value is similar to that of the surrounding text.
This is not something a computer can just generate. Small cap forms need to be separately drawn by a type designer.²

As you can see above, the practice of using uppercase letters within small caps is nothing new. It is confined though to single words and headers. Another situation in which the combination might be forgiven is in the names of people, since one of the protagonists might get hostile when their names are not properly titlecased.
You can also see that small caps are not designed to be mixed with regular capitals. Regular capitals are designed to be combined with lowercase letters. Even though, this weird mix of caps and small caps is everywhere where designers and other people need to make a point.

This is a bit like screaming all the time: all caps is very loud, small caps just a little bit less loud. The boy who cried wolf soon learned that screaming all the time soon looses meaning. For others to emphasize with your message, you need a certain dynamic. Mixing loud screams with screams a little less loud is not going to bring very much to the table. The contrast between them is not large enough. Compare these three examples:

What I’m hearing is:

1. Houston, we’ve had a problem here!
2. If you can spare a moment Houston, please look into our problem.
3. Houston, I’m doing vocal chord exercises. Please do not consider the content of my words.

You might want to use 1, and sometimes you might use 2. Whatever you do, don’t go for three. The next time you need to cry wolf, please use a constant level.
 
Examples set in Emigre Filosofia Small Caps & Fractions.

1. Also, in movie contracts often actors have a clause which states how large their name should be. ↩︎
2. Often computer software like a word processor generates these forms, by taking capitals and sizing them at about 85%. This is problematic, for example since the resulting text will have thinner features than the original. ↩︎

The post Your Capitals are All Mixed Up appeared first on Restraum.

Design patterns for reading

These are some of the patterns which make for a good reading experience:

• Use a single column of text, with ample whitespace.
• Use the right font size. Anything below 16 pixels is too small. Bigger probably is better, as screen densities (ppi) increase.
• Choose a comfortable measure: “The 66-character line (counting both letters and spaces) is widely regarded as ideal.” (From The Elements of Typographic Style by Robert Bringhurst. Some of the principles in the book and how they apply to the web have been compiled here.)
• Minimize distractions from sidebars, navigation and other elements.
• Use a vertical layout. Scrolling is fine. Do not divide your article into pages if the page does not correspond to a logical section like a chapter.

De Correspondent and Medium are two different websites which are following these principles with the interests of their readers in mind.

How does this apply to the NYT redesign? Have a look at this article about Hiroo Onoda. The design uses a single column, ample whitespace, vertical layout (mostly), single pages for articles, minimal distractions: perfect on those counts. Where they could improve is font size and measure.

In the paper edition NYT Cheltenham is used for body text. On the site it is only used for headers; body text is set in 16 pixel Georgia. I would guess that Cheltenham is less readable at that size. The solution of course would be to increase font size.
Georgia, in itself a solid choice for online reading, at this size also gets uncomfortable for more than a few paragraphs. The web site does offer tools to increase font size. Often tools like this allow you to increase and decrease the font size.

Sensibly the NYT interface only offers two choices up. The first size up looks fine.

Now compare the two screenshots: the font size increases, but because the column width stays the same the measure decreases. The first line had 70 characters as a default, which is a good measure. One size up creates a measure of 56 characters. The third font size leads to 44 characters.
Font scaling in this way defeats its purpose. These tools create problems instead of solving them.

A minor concern in the redesign is placement of smaller images inside the text. You can see how the image is squeezed in between the text. Also, the caption is smaller than needs to be.

You cannot cater for every reader and every preference, but I believe the default font size choice should have been smarter. Increasing font size should not be necessary.
In this time, when online reading is increasingly popular, bolder moves are needed to make sure we keep reading. Especially by newspapers.

If you are still having doubts about generous font size, please read this convincing argument by Oliver Reichenstein of Information Architects.

The post Bigger Please: the New York Times Redesign appeared first on Restraum.

Het nadeel van al die opties is onder andere dat je meer moeite moet doen om op de hoogte te blijven van de verschillende varianten, en wijzigingen hierin. En je moet opletten dat de sociale netwerken in de tussentijd niet hun API (application programming interface: de regels voor extern gebruik) veranderen, zodat de knoppen op je site niet langer werken. Zo kondigde Twitter een paar maanden geleden een wijziging van hun API aan, die sinds 11 juni van kracht is geworden. Dit had tot gevolg dat oude Twitter Widgets ophielden te werken. Zaak dus om bij de les te blijven.

Vorige week wilde ik op een site een Facebook profielbadge – een link naar een facebookpagina – toevoegen. In de Facebookdocumentatie worden de technische details uitgebreid omschreven; of het nu gaat over HTML5 of FBML. Het is goed dat Facebook zo platformonafhankelijk mogelijk probeert te zijn met al die technische opties. Tegelijkertijd doet het netwerk weinig moeite om uit te leggen waarom je welk type knop of widget zou gebruiken, en veronachtzaamt daarmee het communicatieve aspect, vele malen belangrijker dan welke techniek je gebruikt.

Natuurlijk creëert Facebook hiermee veel keuzevrijheid. Door zoveel mogelijkheden te bieden zit er altijd wel iets bij. Toch irriteert het mij vooral. Want je ziet dat de ontwerpers en ontwikkelaars bij Facebook niet goed nadenken over hoe hun buttons gebruikt kunnen worden. De kans wordt daarom groter dat de functionaliteit van de knoppen die naar Facebook leiden onduidelijk is voor de bezoekers van een site die ze gebruikt.

Een voorbeeld hiervan is de Like button. Via deze button kun je een pagina op je site liken, maar ook een facebookpagina. Op je homepage zou je twee Like-knoppen kunnen plaatsen: één om de homepage van je site te liken, één om je pagina op Facebook te liken:


Beide hebben een ander getal in het ballonnetje ernaast staan, want het ene gaat over je site, het andere over je facebookpagina. Maar hoe weet je dat als bezoeker? Dat weet je niet en de button communiceert dit niet.
Dus moet je goed nadenken vantevoren welke optie je gaat inzetten. Dat beide varianten bestaan is al verwarrend genoeg.

Een betere optie voor het liken van een facebookpagina op je eigen site is dan de Like Box, met gezichten van de mensen die je pagina liken, en naar wens een tijdlijn met je facebookberichten. Vergelijkbaar met de eerder ontstane twittertijdlijn, maar dan in de klassieke facebookstijl.
Follow (wat tot eind vorig jaar nog Subscribe heette) is gemaakt voor mensen die wel op de hoogte willen blijven van je tijdlijn of pagina op Facebook, maar deze niet per se liken of je willen ‘frienden’. Dat betekent dat je niet vrienden wordt met iemand, of een like plaatst voor een pagina, maar toch de updates volgt.

Dit is nog maar een kleine selectie. Like kan ook Recommend heten; er is de Send-knop, Facepile, Activity Feed, Recommendations Box, Recommendations Bar, enzovoort. Hoe eenvoudig is Twitter dan, met hun Tweet en Follow, Mention en de Twitter Widget.

The post One button to rule them all appeared first on Restraum.

The post Analytics for Flash appeared first on Restraum.

Some problems: When I have to make an extra account for the payment (which is ok I guess, but not really necessary), I have to do this at the paylogic website. There’s no reason for this. Just let me make an account at the Bimhuis site. I don’t need to know who your payment service provider is, or to be presented with their branding. Just talk directly to me, Bimhuis, I trust you already, otherwise I wouldn’t be ordering.
Now I am not being redirected to the paylogic site, instead it is loaded in an inline frame. Which generates another problem: the space on the Bimhuis site is too small for the registration form, and I am presented with scrollbars. The cramped feeling here doesn’t feel good when I’m paying something. My trustmeter is going down.

The most important problem though is how the final payment is handled. I just ordered my ticket, and I’m ready to pay for it. Since I chose iDeal, I’m waiting to be redirected to my bank’s website. Waiting for something. To happen. But nothing happens.
So I go directly to the paylogic website with my login. There’s my order! Can I pay it here? No. I have to do it from the ordering process. But in the orginal window, there’s no link I can click. Just a static page telling me I’m paying through Paylogic, for the Bimhuis, and the payment is handled by Docdata Payment. This is way more information than I need to know, and no simple link to complete the process.

I guess this is an issue with Safari’s pop-up blocker, which I turn off to order second ticket (hoping the first one magically goes away, since I cannot remove it). And indeed: the second time, the window seems to reload itself from the inline frame, and redirects to the website for my bank. Yep, this sure looks like a hack. But it works, I can pay for my ticket.

How easy would it have been to just include a link for me too complete my process, or a message stating pop-up blockers get in the way of the ordering process? You do test the site against different browsers and operating systems, no?

The post The not so Amazing e-ticket Online Ordering Experience appeared first on Restraum.

Last Wednesday I got my ticket for the Bill Frisell gig at the Bimhuis directly from their website. First off, I like the concept. You order a concert ticket online, then you print it yourself. You come at the place and your self-printed ticket appears to be valid. Still: I actually pay you to print something myself, which doesn’t look like a ticket at all. The experience is totally utalitarian. There’s no classic ticket feel about it.

Tickets frequently have some kind of watermark to prevent them from being counterfeited. Of course these marks are missing. But the ticket could be made to look more valuable.
On the other hand, if you like the utilitarian aspect, think about this. Since the concertgoer prints on a single sheet of A4, the Bimhuis used the remaining whitespace for some information about themselves. Now wouldn’t it be nice if you actually had the information about the concert on there? It wouldn’t need to be specially designed; just reserve a fixed block for a photo and a few lines of text.

Some people might cut out the actual part with the barcode, which makes the ticket smaller and allows it to be put into small pockets more easily. There’s no symbol of scissors though, so I guess this is not a recommended action. Which bothers me; I know I paid for this piece of paper, but would cutting it out be ok? Or would I invalidate the ticket by doing that?

Read about the not so Amazing e-ticket Online Ordering Experience.

The post The Amazing e-ticket appeared first on Restraum.

The post Background generation with microscopes appeared first on Restraum.

You can watch the reviews on the Journaal 24 site (Dutch only).
Another (older) selection can be found on the vpro website.

The post year in review: 1956 appeared first on Restraum.