Design for Windows Phone 7

Ulla Kirketerp TastesenGraphical/UX Designer

UX Camp CPH 2012-04-22

Agenda

• Windows Phone 7• Metro UI Principals

– Swiss Style Graphic Design– Panorama – Pivot– Tiles and Animations– Application Bar

• Good Design• Bad Design• Discussion

Windows Phone 7 People spend much time with their smartphones. Why not give them the stuff that is important to them easier and faster.

96 dpi480 x 800 px

Metro UI Principals

• Content upfront • Simplicity• Gives you the feeling of a magazine• Clean lines• Wide negative space• Strong typography• Alive and in motion• Remove all the extra “chrome”

Metro UI PrincipalsInspired from Swiss Style• International Style• Invented by Swiss Designers and later

emerged in Europe in the 1920’s and 1960’s• Minimal elements of style such as

typography and content layout rather than on textures and illustrations

• http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/

PanoramaPatented Metro UI

Pivot• Suited for more information such as lists• Easier to navigate through than the panorama

Tiles and Animations• Solid color or photos• Simple icons (especially if they are

used on application bar as well) • Double size gives a good effect• Simple animations to support the

interaction

• http://www.youtube.com/watch?v=OHYtxNdS4J8

Application Bar• Commonly used

commands

• Icons 26 x 26 px• Icons incl the circle

is 48 x 48 px•

Bad Design•Hard to visually separate tiles from tartan•The tartan does not support the horizontal navigation

Bad Design

- Content does not stand out- Use strong colors and patterns either on the content (e.g. tiles) or background image

Good Design

- Magazine feeling- Collage- Separate pages but in the same magazine- Dark screen, test your graphics

Discussion

Wireframe

Discussion

Rethink “about us”

LinksFree Icons• http://www.syncfusion.com/downloads/metrostudio

Design Guides• http://blendinsider.com/technical/ux-guidelines-for-metro-style-app-development-2011-10-2

1/• http://uxdesign.smashingmagazine.com/2011/12/20/introduction-designing-windows-phone

-7-metro/• http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx• http://ux.artu.tv/?page_id=190• http://www.jeff.wilcox.name/2011/03/metro-design-guide-v1/• http://channel9.msdn.com/events/MIX/MIX10/CL14• http://www.riagenic.com/archives/526• http://wmpoweruser.com/microsoft-patents-windows-phone-7-panoramic-ui/• http://wmpoweruser.com/microsoft-awarded-with-patent-on-metro-ui-on-windows-phones/

Swiss Style• http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/

Ulla Kirketerp Tastesenukt@mjolner.dk