Metro – Design Inspiration

I thought I’d post some links for inspiration when working on Metro applications. I’ve split this where I can into the areas I refer to when talking about Metro as a design language for Windows Phone, but I’ve also added to this list so that it’s also relevant for Metro Style Apps on Windows 8. Please, let me know in the comments if there are any other sites that you feel should be added to any of these categories and I’ll update the page.

Typography

Metro is in part, a celebration of typography. I’ve split the links here into two sections between showcase sites and learning / educational links.

Showcase

• http://www.typetoken.net/ – showcases, discusses and reviews the world of typography, icons and visual language
• http://ilovetypography.com/ – aims to make the subject more accessible, to bring the study of typography to the masses
• http://fontsinuse.com/ – examples of specific fonts in use in the real world
• http://typetide.tumblr.com – nice typefaces used nicely
• http://www.fontseek.info/ – unique type designs which are not distributed by a type foundry
• http://beautifultype.net/ – a collection of nice type
• http://fontfeed.com/ – a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world.

Learning

• http://flowingdata.com/2010/04/21/a-flowchart-to-decide-what-typeface-to-use/
• http://www.howtogeek.com/howto/30065/how-to-understand-typography-like-a-professional-designer/
• http://webdesign.tutsplus.com/articles/typography-articles/a-beginners-guide-to-pairing-fonts/
• http://typophile.com/ – forums, help & learning about type

Motion

Metro, from a graphic design perspective is a very 2D interface. By adding motion you can bring a sense of depth. But motion can also be used to add emotion and a great example of this can be seen in movie title sequences and the many Kinetic Typography videos on the internet.

• http://www.artofthetitle.com/ – A compendium and leading web resource of film and television title design from around the world. Honouring the artists who design excellent title sequences through discussion and displaying their work with a desire to foster more of it, via stills and video links, interviews, creator notes, and user comments.
• http://annyas.com/screenshots/ – The Movie Title Stills Collection – a collection of screenshot and notes on movie titles including some good shots and commentary on the legendry Saul Bass.
• http://vimeo.com/tag:kinetictypography – Films tagged ‘Kinetic Typography’ on Vimeo

Sound

Sound design for digital devices is incredibly hard to get right. If you don’t have access to Brian Eno or Robert Fripp then here’s some links that will guide you in the right direction.

• http://www.ubelly.com/2011/10/sound-and-sound-reproduction-a-conversation-with-gareth-jones – Record Producer and Mixer Gareth Jones talks about sound for small speakers
• http://channel9.msdn.com/blogs/jaime+rodriguez/windows-phone-design-days-audio – Matthew Bennett, Senior Sound & Sensory Designer on Windows Phone demonstrates how to create mobile audio that sings.

Expert opinions on Metro Principles

In this series of short films, I approached leading experts in the fields of type, sound, way finding and architecture that are relevant to the Metro design language. This made for some insightful conversations which you can view here.

Elliot Jay Stocks and Erik Spiekermann talk about typography in the digital domain. How you should approach the screen as ‘bad paper’ and be cognisant of it’s limitations. Watch the film.

Record producer Gareth Jones talks about the sound war and how to make the most of audio on small devices providing some tips learned in his years of sound production experience. Watch the film.

Tony Howard, the Managing Director of the London based Transport Design Consultancy drawing on his global experience discussion his approach to way finding in airports and train stations. Watch the film.

Architect Duncan McLeod muses on how space and light can be used as materials within buildings. Watch the film.