Sunday, June 09, 2013

designing flatline

I have always admired Metro language design, which has been made popular (or at least brought to the public's attention) by Microsoft's latest wave of products (Windows Phone, Xbox, Windows 8), but which has existed in airports, subways and any other place which needed to communicate information without visual distractions. It's a design that rarely incorporates textures, shadows and volume, but instead values typography, strong colours and  geometrical shapes as a way of conveying information in the simplest way possible.

The name flatline came to me and I instantly imagined it as a subway station, written in Helvetica (which itself, like the metro language, is beautiful in its simplicity):

Almost immediately I thought of another element, a line crossing the word (for obvious reasons). Not only that, but also an empty circle that usually signals a destination in a map.

The yellow came right after, both because it is a normal colour in information signs and because it allows for an easy reading of the word.

I also felt I needed some icons, as visual cues of what this blog is about.

As to how to combine the title with this icons, my first solution was a side-by-side arrangement:

But I felt the composition lacked colour and the icons seemed to be a little loose in the image. Then I though of encapsulating them in circles, as stops in a subway map:

And that's the story! I hope you enjoyed it. For more information on metro design, Microsoft just published an article on the creation and implementation of metro design in their products ( It's a good read!