In the first post of my “Windows Phone 7 Design Notes” series, I tried to provide a general introduction to the Metro design language and share links of text and media resources, which you may find useful if you wish to dive deeper into the design concepts behind Windows Phone 7.
This article is going to be a bit lengthy, as it includes my personal impressions on Metro and its type-centric design features plus a recent typography project, which actually sparked the idea to write this series.
Metro + Adrian Frutiger
While checking out the recordings and presentations about Windows Phone 7 design, some distinctive facts about Metro, which rely upon beautiful typography and simplicity in design, brought Adrian Frutiger to my mind, who once said:
If you remember the shape of your spoon at lunch, it has to be the wrong shape. The spoon and the letter are tools; one to take food from the bowl, the other to take information off the page… When it is a good design, the reader has to feel comfortable because the letter is both banal and beautiful.
First of all, a few informative details about Adrian Frutiger.
Adrian Frutiger is one of the most prominent typeface designers of the 20th century. Although being best known for creating the typefaces Univers and Frutiger, he has also created logos, signage, corporate typefaces and corporate identities for various publishers and industrial enterprises. I am only going to highlight Univers and Frutiger due to the context of the post, yet a few other of his famous typefaces are OCR-B, Versailles, Linotype Centennial, Avenir, Vectora, Linotype Didot and Rusticana. What is most stunning about his career is that it spans the hot metal, phototypesetting, and digital typesetting eras.
The Univers typeface has been extensively used for the Montreal Metro, the San Francisco BART, Frankfurt Airport , the Walt Disney World road system and some London boroughs streets. Akzidenz Happen and Univers is easily confused with sans-serif typefaces Helvetica and Akzidenz Grotesk. If you want to get some historical facts on sans-serifs, check out the “The History of Linear, Sans Serif Typefaces” article by Adrian Frutiger.
In the early 1970’s, Adrian Frutiger created a Univers font variation for the Paris metro. He also worked on a “way finding” signage alphabet for the Charles de Gaulle International Airport. The result was a distinctive and modern typeface with a legibility at various angles and sizes. This particular typeface was later renamed and released by Linotype in 1977 as Frutiger.
I was planning to share a short video with Adrian Frutiger here, however most media content is in French or German (or rather Schweizerdeutsch). You may check out photographs and highlights of his life in an online photo gallery provided by Linotype. But I have also discovered an original presentation by Mark Simonson, who gave a talk about Adrian Frutiger at TypeCon in 2006. The presentation includes various snapshots from Adrian Frutiger’s rarely found book “Type Sign Symbol“, outlining the analytical side of making letters. The latest book on Adrian Frutiger’s work is Adrian Frutiger Typefaces, which is a pricey yet complete guide with good reviews.
Let’s bring some of Adrian Frutiger’s ideas and Metro together:
Metro and airport system signage may be one of the inspirational sources in Metro’s thought process, but it surely is not the only characteristic, which Metro design principles share with Adrian Frutiger ideas on design.
In case, you are interested in further info on signage typefaces, you can find out more about public signage typefaces here and check out a list of typeface used for Metro signage here.
List of Metro Principles:
- Clean, Light, Open, Fast
- Celebrate Typography
- Alive in Motion
- Content, Not Chrome
- Authentically Digital
The list plus colors can be found in the MIX10 session “Windows Phone UI and Design Language“. My notes focus on principles 1-4.
Metro Principle: Clean, Light, Open, Fast
- Feels Fast and Responsive
- Focus on Primary Tasks
- Do a Lot with Very Little
- Fierce Reduction of Unnecessary Elements
- Delightful Use of Whitespace
- Full Bleed Canvas
Adrian Frutiger always emphasized the duality of black and white (whitespace). He took his teacher Alfred Williman’s “Do not apply black but cover up white, so as to make the light of the white sheet active” as a mantra. For example, Univers is a sans-serif designed to create comfortable white space between letters, so it is calm and easy to read. (Adrian Frutiger’s Methodology, LinoType)
Adrian Frutiger: “The black-white contrast soon came to play an important part in my professional life. I remember the fascination which I experienced on first seeing the sign of wisdom of the Tao Te Ching, the perfect representation of duality with its black and white fish bladder signs united within a circle. I owe another realization to an engineer in Paris, who explained to me the binary calculating method of computers: one and zero, black and white. For me, the black-and-white contrast conveys the absolute construction of an image. Taking black away means adding white. ” (Adrian Frutiger Traces, LinoType)
Metro Principle: Celebrate Typography
- Type is Beautiful Not Just Legible.
- Clear, Straightforward Information Design
- Uncompromising Sensitivity to Weight, Balance and Scale.
Adrian Frutiger has a lot to say about legible and beautiful typefaces, as his work is a perfect reflection of these typographic elements:
“From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader.” (Adrian Frutiger on Legibility, Linotype)
“Typography must be as beautiful as a forest, not like the concrete jungle of the tenements … It gives distance between the trees, the room to breathe and allow for life. The same holds true for type. If it is set too narrowly, it can no longer be recognized as type. You need to leave space for the reader to breathe.” (Type – Adapted to Everyday Life, LinoType)
This quote does also relate with the “reduction of unnecessary elements” in the first Metro Principle.
Metro Principle: Alive in Motion
- Feels Responsive and Alive
- Creates a System
- Gives Context to Improve Usability
- Transition Between UI is as Important as the Design of the UI
- Adds Dimension and Depth
Unlike any other type designer, Adrian Frutiger has created typefaces with a diverse set of functionality such as typefaces for books, typefaces for departure schedules or typefaces for signs in public spaces. He took various factors into consideration, so that his letterforms remained legible and his designs could be easily recognized even in difficult conditions such as poor lighting or when the reader is moving quickly past a sign.
The same is true about any kind of UI, if directives are not clear at first glance, they will only confuse the user, instead of clarifying and providing orientation.
Adrian Frutiger: “Type must be recognizable within fractions of a second.” (Type – Adapted to Everyday Life, LinoType)
Metro Principle: Content, Not Chrome
- Delight through Content Instead of Decoration
- Reduce Visuals that are Not Content
- Contents is the UI
- Direct interaction with the Content
Adrian Frutiger’s take on the significance of content is very clear:
“Type and design which is too overbearing is not fulfilling its purpose, because it is distracting us from the contents.” (Type – Adapted to Everyday Life, LinoType)
“Type must be open and clear! It must be adapted to our lives. Type is the clothing a word wears, so it must be subordinate to the content.”
My Interactive Typography Book
I have a deep appreciation for visual arts and talent in digital design, yet a few years back I would not have known this much about design concepts and typography. I started reading books and took design classes throughout 2009. Still I strongly believe, that beyond theory + training you have to constantly feed your soul with diverse inspirational sources to reach a genuine and authentic level of style and creativity.
After sharing this much information about Adrian Frutiger and linking it to Metro, or vice versa, it may come as no surprise, that I worked on a typography project focusing on Adrian Frutiger. A few months ago, I put together a typography book for the typeface “Univers“.
My book show-off definitely deserves some interactive features; posting some static images will not do the the hard work justice! That’s why I decided to display the book with a Silverlight Page Flip application to make browsing through the pages a much more fun and unique experience. Note2Self: It might also be a good idea to start some work on porting it to a WP7 app.
The book size, front/back cover images, vertical numeric borders, text content, page order etc. are all output of my creative thinking and design aspirations. As a developer, I enjoyed every minute of this design project, I hope the end result reflects my joy and excitement about typography, design and Silverlight as well.
I have also an accompanying presentation for this typography book project, if you would like to read the details about the project objective, demographics and design features.
With all the information presented in this 2.post, I am not trying to draw a conclusion or make a ground-breaking discovery. I just wanted to share my personal reflection on Metro and Adrian Frutiger, which I hope you enjoyed reading. Let me know, what you think about the post and book design.
SideNote for the developer audience: As this post was mainly focused on design and typography, I did not include any information about the Silverlight application. I am planning to share very soon some of my notes on the numerous Page Flip techniques/apps as well as Silverlight Controls I came across, while working on this application. If you would like to add a pointer to your app, send me the info and link, so that I can check it out, if I haven’t already!
(*The SlideShare plugin does raise a Javascript error in IE8, however the slides are displayed without any problems.)
[…] Windows Phone 7 Design Notes – Part2: Metro + Adrian Frutiger (Daydreaming Crocus) […]
[…] WP7 design is just hands-down gorgeous. Did you ever think you’d see an article referencing Adrian Frutiger and a Microsoft user interface in the same context? Cats and […]
[…] Windows Phone 7 Design Notes – Part2: Metro + Adrian Frutiger […]
[…] Quelle zu den 2 Posts: Part 1 Windows Phone Metro Design Part 2 Windows Phone Metro Design […]
Hi crocusgirl,
You may enjoy my WP7 app: Beatutiful Word Game
Cheers! 🙂
[…] windows-phone-7-design-notes-part2 […]
[…] researching Windows Phone 7’s design metaphor “Metro”, I ran across this blog article which included as an attachment a Slide Show by Mark Simonson about Adrian Frutiger. Not being at […]