Arnt Gulbrandsen
About meAbout this blog

Visual fashion in user interfaces

User interfaces change with the times. A 3½" diskette as an icon in apps may now be obscure because hardly anyone has seen the physical object in 25 years, and applications based on swiping have functional differences from older mouse- or keyboard-based ones. That isn't what I have in mind today. Apps that swipe may be fashionable, but the swiping is at least partly a matter of function. This post is about pure visual fashion — choosing particular kinds of shapes, sizes, fonts, colours, textures and animations instead of other kinds.

I'll discuss a modern, stylish photo from a web site that's 100% about popular fashion, and then a screenshot of a modern, stylish android app. By popular fashion I mean fashion that comes from the vox populi rather than from designers in Paris or the Vogue editors. Instagram's click-fuelled feedback loop produces that, I think, and the photo below is arch-instagram. The app is a high-quality app from a small company. They couldn't be more different, and what I'll describe is their similarity. I think their difference permits a focus on generic visual fashion.

The lady is wearing a workman's overalls, turned into a swimsuit, or maybe a swimsuit made out to look like a workman's overalls. The colour, texture and pocket are those of a workman's overalls, the rest is clearly a swimsuit.

The photo is low in detail, with many nearly single-colour areas, with high contrast between the areas and some vivid details.

It is rich in action even though there's no movement. Even though most parts are nearly monochrone, the total photo uses colours and other elements to be maximally striking:

  • The overalls-swimsuit constrasts with itself,
  • the boobs and long blond hair attract the eye,
  • the two meanings of painter busy the viewer's subconscious,
  • the photoshop-enhanced edges make everything stand out,
  • last but not least, her face is stands out by being rich in colour.

A advertising/logo designer I met talked about using intrinsic contrasts and asymmetries to attract and keep people's attention. He would love how the overalls she wears are the kind used by a painter to paint a house, while the palette she holds is the kind used by a painter to paint a painting. So is she a painter or a painter? Just the thing to make the subconscious direct your attention at the photo and keep it there for a few seconds extra.

Now that you've had your attention on it for so long, here's a link to buy it, directly from the designer.

Next, the app.

This uses subdued colour palette in most areas. Note the dampened details and a restricted palette in the map, which is subdued enough to work as a background, even while it has enough contrast to be usable on a smartphone screen in sunlight.

The app uses a single font, and the general visual language matches the font. The rounded corners look like the rounded letters.

The app avoids ornaments. There are no active screen edges, and the number of frames and borders is kept to a minimum. There are only three things: A map, a form and a button.

However, there's very strong contrast between those three. The GO button got all the emphasis: a vivid colour, upper case, bold text and it's even animated. The others are subdued, the map with few colours and the form with few details.

Just like the photo, the app uses the entire colour spectrum and every available kind of emphasis, but only once. Most things are subdued, restrained, and then one thing stands out!

The bold text: Little, but very bold. Larger text: Little, but very large (and in upper case). The colours: One colour is strong, and it's used sparingly, the rest of the colour use is restrained. The app uses animation, once.

Every kind of emphasis is used, but only once each. These pictures aren't unusually calm by historical standards, and not unusually noisy either, but both of them use contrasts deliberately.

Both of them restrain themselves in general, so that they can use even more contrast in the exceptions. That, I think, is the core of early-twenties visual fashion.

The app is called Citymapper and here's a link to the app itself. It's a great app, both functionally and in the way it uses early-twenties fashion.

As a footnote, I'm not suggesting to use this design. It looks modern, but looking modern isn't necessarily appropriate and this way isn't the only way to look modern, either. I am suggesting that apps use design, and that it's better for the apps and users if that design is thoughtful. Using the system font can be a thoughtful design choice, or just thoughtless.

Thoughtfully choosing to use the system font etc is fine. Noone gets fired for buying IBM and choosing to look conventional is a fine choice.

Here is a portrait of a Vogue editor, with a hairstyle rather like my own and looking both conventional and modern in a different way, or is it really so different? Her use of jewelry is subdued, but the ring is a big one. Her colour scheme is restrained, but with one strongly contrasting element, namely the dots. She uses elements of modern visual fashion to achieve a rather different look, a sort of timeless modernity. She looks as if she knows what she's doing. What decisions did she make to she achieve that look?

The same decisions could produce a fine user interface for an app.

Dark patterns

It's still light outside, we've time for another beer.

The photo was taken four hours after sunset.

Man is the measure of all things

Le Corbusier said so. Noone seems to understand it.

A window sill is not 1m above the floor. A window is properly located so its centre is 1.0 eyeheights above the floor and its size is 1.0 visionwidths, because man is the measure of all things. A good architect resolves these difficult units appropriately to the building.

The same applies to doors, stair steps, GUI animation times and technical writing. The reader's comprehension is the measure, not logical structure or the writer's composition ideal.


The text we've all learned to read is arranged in lines: Horizontal baseline, regularly sized letters, regular line height, lines neither too narrow nor too wide.

Anyone who breaks those rules disturbs the mind's reading and distracts from the content. Minor violations cause minor disturbance.

Which is fine, I suppose. Ask any advertising agency. If you violate the right norm you can make the brain sit up and take notice of a message it would otherwise skip. Drink Coca-Cola. But it's not something a GUI program should do. GUI programs should form the thinnest possible barrier between user and data. […More…]

Zero bits of information

I quote at length from chapter four of Jef Raskin's book The humane interface:

We have looked at two interfaces, one of which will take about 5 seconds to operate and the other of which will take more than 15 seconds. [...] It is clear which of the two better satisfies the requirement. The next question that we ask is how fast an interface [...] can be. […More…]

Software patents not all bad

So Paul Allen sues over patents and I'm sure he'll attract a lot of flak for that. But a side issue interests me particularly: The patents were originally awarded to Interval Research, a tech R&D firm founded by Allen and former Xerox executive David Liddle in 1992. The firm was folded in 2000, and the patents were later transferred to Interval Licensing. […More…]