Designing for Windows Phone Austin Andrews

About Me Standing Right There (or there ) Maven ASP.netIconography Open Source C# 1

Keep it Simple and Consistent Make Metro Usable 30 Speed Limit 2

Overview Usability easy for users Type (fonts) built-in & custom Colors accents vs. custom Icons style & custom 3 GUIDELINES spacingtype list item button radio button toggle switch i

Usability Controls Spacing Navigation Prototyping 4 SETTINGS systemapp controls know what is available spacing pay attention prototyping will save you time

Controls Understand Available Controls – Including the app bar and status bar MSDN shows how in the Guidelines button item 1 description for item 1 item 2 description for item 2 item 3 description for item 3 x y ✔

Spacing 12 pixels – Left and right 24 pixels – Container Stock apps – Use as a base SETTINGS systemapp theme red date UTC-06 5

Navigation Limit to threePrototype pages deep main about item view list - will save you time

Typography System Resource – PhoneFontFamilyNormal – PhoneFontFamilyLight – PhoneFontFamilySemiBold – PhoneFontFamilySemiLight Local Resource – True Type Fonts included in the /Fonts folder

Sans Serif Sans = Without Here Serif Sans Serif

Demo: Custom Font Switch to Expression Design

Typography Continued App.xaml Fonts/ArcherBold.ttf#Archer Bold Use 5

nokia Colors Accents OEM Specific: 5 bluebrowngreenpinkpurple redteallimemagentamango o2htc

Colors Continued Using the Accents – Customized feel – Testing required Not Using the Accents – Brand recognition – Design time increased

Colors Continued SETTINGS systemapp theme red date UTC-06 SETTINGS systemapp theme red date UTC-06 6

Icons Icon Types – Applications – Games – App Bar Opacity and Metro Creating an Icon – Expression Design …

Application ^ Focusing on Apps Games – Almost anything is fine for game icons Icon Types ✔✔ ? ✔ ✔

Colors Continued Opacity Solid White 30% Opacity White Inherit Theme Color Max of 3 Objects – Train (main) – Clock – City Skyline Title Text App Title

Splash Screen Name Logo Optionally – Subtle background – Sponsor – Colored Icon

Demo: Creating an Icon Switch to Expression Design

Drop shadows Round corners Uneven Backgrounds 3D Text/Images/Icons Things to Avoid text example

Things to Avoid Continued Coloring the appbar Layering Opacity Gradients (maybe?) Leaving your branding till the very last step

Questions? Icons? Tiles? Interfaces? Expression Design? Expression Blend? XAML?

References Arturo Toledo Senior UX Designer at MS; Second Reference

Thank You Blog – templarian.com Windows Phone Icon Pack – Over 500 Icons under Creative Commons Slideshow – Found on the Blog