Windows 8 Apps – Design Inspiration

I thought I’d post some links for inspiration when working on Windows applications. I’ve split this where I can into the areas I refer to when talking about the Windows UI as a design language for Windows Phone, but I’ve also added to this list so that it’s also relevant for the UI style on Windows 8. Airport Signage

Typography

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

Showcase
Learning

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.

Expert opinions on Windows UI 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 Windows design language. This made for some insightful conversations which you can view here.

Elliot Jay Stocks and Erik SpiekermannElliot 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.

Gareth JonesRecord 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.

Airport SignageTony 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.

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

Published by Spooner

Creative Technologist at Microsoft in the UK working in the Developer & Platform Evangelism group, he is at the forefront of emerging technologies being developed across Microsoft and champions their deployment to developers and digital agencies. His work is focused around mobile, the web and Natural User Interfaces.

5 Comments So Far, what do you think?

  1. Sam Sabri

    You should check out some posts from Arturo Toledo. http://ux.artu.tv/

    He is currently doing a 31 series post on the Metro Design Language and Windows Phone. However, from the first 5 posts I’ve already gained some insight that can be applied to Windows 8 or any experience that a user may interface with. :)

    Great article though, I’ve added it to my ever growing list of links and resources for all things Metro Design.

  2. Pingback:Metro Inspired Design

  3. Thiết kế website Metro UI

    i like win 8 , metro ui

  4. Pingback:Expression Lab » Blog Archive » Recursos para empezar a diseñar aplicaciones Windows 8 - Artículos, tutoriales y recomendaciones sobre User Experience, Usabilidad y Diseño de Interfaces.

  5. Pingback:inspiring Windows 8 app designs | jecaestevez@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>