1. Designing for Windows Phone Templarian.com@Templarian Austin Andrews

2. About Me Standing Right There (or there ) Maven WaveTemplarian.com @Templarian ASP.netIconography Open Source C# 1

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

4. 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

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

6. 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 ✔

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

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

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

10. Sans Serif Sans = Without Here Serif Sans Serif

11. Demo: Custom Font Switch to Expression Design http://templarian.com/2011/08/06/tutorial_creating_an_icon/

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

13. nokia Colors Accents OEM Specific: 5 bluebrowngreenpinkpurple redteallimemagentamango o2htc

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

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

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

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

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

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

20. Demo: Creating an Icon Switch to Expression Design http://templarian.com/2011/08/06/tutorial_creating_an_icon/

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

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

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

24. References Arturo Toledo Senior UX Designer at MS; http://ux.artu.tv/ Second Reference

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