1 / 25

Designing for Windows Phone

Templarian.com. @Templarian. Austin Andrews. Designing for Windows Phone. About Me. 1. @Templarian. Standing Right There (or there ). Open Source. C#. Maven Wave. ASP.net. Iconography. Templarian.com. Make Metro Usable. 2. Keep it Simple and Consistent. Speed Limit. 30.

wind
Download Presentation

Designing for Windows Phone

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. Usability 4 • Controls • Spacing • Navigation • Prototyping SETTINGS system app 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 ✔ y item 1 description for item 1 x item 2 description for item 2 item 3 description for item 3

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

  8. Navigation • Limit to three Prototype pages deep main item view list about - 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 Sans Serif Here Serif

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

  12. Typography Continued 5 • App.xaml <Application.Resources> <ResourceDictionary> <FontFamily x:Key="ArcherBold"> Fonts/ArcherBold.ttf#Archer Bold </FontFamily> </ResourceDictionary> </Application.Resources> • Use <TextBlockFontFamily="{StaticResourceArcherBold}"> <Run FontFamily="{StaticResourceArcherBold}">

  13. Colors 5 • Accents • OEM Specific: blue brown green pink purple red teal lime magenta mango o2 htc nokia

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

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

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

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

  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. Things to Avoid • Drop shadows • Round corners • Uneven Backgrounds • 3D Text/Images/Icons example text text

  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

More Related