250 likes | 365 Views
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.
E N D
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
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
Usability 4 • Controls • Spacing • Navigation • Prototyping SETTINGS system app 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 ✔ y item 1 description for item 1 x item 2 description for item 2 item 3 description for item 3
Spacing 5 • 12 pixels • Left and right • 24 pixels • Container • Stock apps • Use as a base SETTINGS system app theme red date UTC-06
Navigation • Limit to three Prototype pages deep main item view list about - 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 Sans Serif Here Serif
Demo: Custom Font Switch to Expression Design http://templarian.com/2011/08/06/tutorial_creating_an_icon/
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}">
Colors 5 • Accents • OEM Specific: blue brown green pink purple red teal lime magenta mango o2 htc nokia
Colors Continued • Using the Accents • Customized feel • Testing required • Not Using the Accents • Brand recognition • Design time increased
Colors Continued 6 SETTINGS SETTINGS system app system app theme theme red red date date UTC-06 UTC-06
Icons • Icon Types • Applications • Games • App Bar • Opacity and Metro • Creating an Icon • Expression Design …
Icon Types • Application ^ Focusing on Apps • Games • Almost anything is fine for game icons 𝒙 ✔ ✔ ✔ ✔ ?
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 http://templarian.com/2011/08/06/tutorial_creating_an_icon/
Things to Avoid • Drop shadows • Round corners • Uneven Backgrounds • 3D Text/Images/Icons example text text
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; http://ux.artu.tv/ • Second Reference
Thank You • Blog • templarian.com • Windows Phone Icon Pack • Over 500 Icons under Creative Commons • Slideshow • Found on the Blog