Windows Phone DesignMaria Nasioti, UX/UI Designer & DeveloperTwitter: @Maria_NasTuesday, June 18, 13
Tuesday, June 18, 13
VisualsLayoutWindows Phone CompositionMotion & TransitionsTuesday, June 18, 13
VisualsTuesday, June 18, 13
VISUALSThemesTuesday, June 18, 13
VISUALSAccent BrushesTuesday, June 18, 13
VISUALSColorsTuesday, June 18, 13
VISUALSThemed Controls & TilesTuesday, June 18, 13
VISUALSTheme HowtoAlways check your apps in both dark and light theme.If you utilizing system theme’s, use a basic color s...
VISUALSIconographySome actions are difficult to clearlyconvey with text or images.In these cases, use simple geometricicon...
VISUALSIconographyTuesday, June 18, 13
VISUALSImageryTuesday, June 18, 13
VISUALSIcons & Imagery HowtoGo simple and geometric with icons.Don’t be afraid to go big.Layer your imagery with content.A...
VISUALSFontsTuesday, June 18, 13
VISUALSCustom FontsUse custom fonts to showcase yourown BRAND in a very personal way.Find the typography that best reflect...
VISUALSFonts HowtoAvoid using font sizes that are smaller than 15pt in size.If using colorized fonts, use high contrast co...
VISUALSGlobalizations & LocalizationBi-Directional Layouts. Right to Left.East Asian vertical text. Japan style.Localizati...
LayoutTuesday, June 18, 13
LAYOUTResolutionsSupport 3 resolutions.Tuesday, June 18, 13
LAYOUTGraphic Resolution HowtoTo display a splash screen for all resolutions, use a single image that is768x1280.If you ca...
LAYOUTThe GridThe grid system is an aid, not aguarantee. It permits a number ofpossible uses and each designer canlook for...
LAYOUTThe GridTuesday, June 18, 13
LAYOUTThe GridTuesday, June 18, 13
LAYOUTThe GridTuesday, June 18, 13
Use Grid everywhere. Tiles,Panorama, custom pages, listsetcTuesday, June 18, 13
LAYOUTThe GridTuesday, June 18, 13
LAYOUTThe GridTuesday, June 18, 13
LAYOUTThe Grid HowtoUse order to create the perception of simplicity.Establish a rhythm and cadence with the grid.Then bre...
LAYOUTPagesTuesday, June 18, 13
LAYOUTPanoramaTuesday, June 18, 13
LAYOUTPanoramaTuesday, June 18, 13
LAYOUTPanoramaTuesday, June 18, 13
LAYOUTPanorama HowtoExpansive or overviewTop Level. Nothing than data and Navigation.Use a minimized AppBar, portrait only...
LAYOUTPanorama ExamplesTuesday, June 18, 13
LAYOUTPivotsTuesday, June 18, 13
LAYOUTPivots HowtoPivots control should be used only to display items or data of similar typeUse a full AppBar7 Panels or ...
LAYOUTPivots ExamplesTuesday, June 18, 13
LAYOUTBasic PageTuesday, June 18, 13
LAYOUTAppBarTuesday, June 18, 13
LAYOUTAppBarTuesday, June 18, 13
LAYOUTStructureTuesday, June 18, 13
Motions & TransitionsTuesday, June 18, 13
MOTIONWhy Motion?Motions delights the users.Motions adds more interactions.Motion gives the impression of enhanced perform...
MOTIONIt’s like a movieAn action movie isn’t 100% action.Highs (Defining moments)Lows (Consistent, not distracting but sti...
MOTIONTransitionsTriggered by user action.Transitions provide a mental breadcrumb for the user as they navigate theUI.Tues...
MOTIONRulesEstablish physics.Sense of how gravity works on the device that the user can relate to.Gravity is always the sa...
MOTIONMotions HowToIt doesn’t matter how long an animation takes, it matters how long youthink it takes.Under 500ms is ins...
Examples.Tuesday, June 18, 13
Tuesday, June 18, 13
Tuesday, June 18, 13
Tuesday, June 18, 13
Thank you! So say we all.Twitter: @Maria_NasTuesday, June 18, 13
Upcoming SlideShare
Loading in …5
×

Windows phone 8 Design

570 views

Published on

Published in: Design, Technology, Art & Photos
  • Be the first to comment

Windows phone 8 Design

  1. 1. Windows Phone DesignMaria Nasioti, UX/UI Designer & DeveloperTwitter: @Maria_NasTuesday, June 18, 13
  2. 2. Tuesday, June 18, 13
  3. 3. VisualsLayoutWindows Phone CompositionMotion & TransitionsTuesday, June 18, 13
  4. 4. VisualsTuesday, June 18, 13
  5. 5. VISUALSThemesTuesday, June 18, 13
  6. 6. VISUALSAccent BrushesTuesday, June 18, 13
  7. 7. VISUALSColorsTuesday, June 18, 13
  8. 8. VISUALSThemed Controls & TilesTuesday, June 18, 13
  9. 9. VISUALSTheme HowtoAlways check your apps in both dark and light theme.If you utilizing system theme’s, use a basic color scheme.Don’t be afraid to use accent brushes. They are simple way to make yourapp feel native to the device.Tuesday, June 18, 13
  10. 10. VISUALSIconographySome actions are difficult to clearlyconvey with text or images.In these cases, use simple geometricicons instead of images or extra text.Tuesday, June 18, 13
  11. 11. VISUALSIconographyTuesday, June 18, 13
  12. 12. VISUALSImageryTuesday, June 18, 13
  13. 13. VISUALSIcons & Imagery HowtoGo simple and geometric with icons.Don’t be afraid to go big.Layer your imagery with content.Add noise to gradient to prevent “banding”.Tuesday, June 18, 13
  14. 14. VISUALSFontsTuesday, June 18, 13
  15. 15. VISUALSCustom FontsUse custom fonts to showcase yourown BRAND in a very personal way.Find the typography that best reflectsyour app’s personality.Tuesday, June 18, 13
  16. 16. VISUALSFonts HowtoAvoid using font sizes that are smaller than 15pt in size.If using colorized fonts, use high contrast colors at smaller point sizes toenhance readability.Since Segoe is such an integral part of the UI experience, use alternativefonts sparingly in applications.Tuesday, June 18, 13
  17. 17. VISUALSGlobalizations & LocalizationBi-Directional Layouts. Right to Left.East Asian vertical text. Japan style.Localization.Tuesday, June 18, 13
  18. 18. LayoutTuesday, June 18, 13
  19. 19. LAYOUTResolutionsSupport 3 resolutions.Tuesday, June 18, 13
  20. 20. LAYOUTGraphic Resolution HowtoTo display a splash screen for all resolutions, use a single image that is768x1280.If you can’t use a graphic for each resolution, use a graphic for the highestresolution.Tuesday, June 18, 13
  21. 21. LAYOUTThe GridThe grid system is an aid, not aguarantee. It permits a number ofpossible uses and each designer canlook for a solution appropriate topersonal style. But one must learn whoto use the grid; it’s an that requirespractice.Josef Muller-BrockmannTuesday, June 18, 13
  22. 22. LAYOUTThe GridTuesday, June 18, 13
  23. 23. LAYOUTThe GridTuesday, June 18, 13
  24. 24. LAYOUTThe GridTuesday, June 18, 13
  25. 25. Use Grid everywhere. Tiles,Panorama, custom pages, listsetcTuesday, June 18, 13
  26. 26. LAYOUTThe GridTuesday, June 18, 13
  27. 27. LAYOUTThe GridTuesday, June 18, 13
  28. 28. LAYOUTThe Grid HowtoUse order to create the perception of simplicity.Establish a rhythm and cadence with the grid.Then break it to make the content pop.Tuesday, June 18, 13
  29. 29. LAYOUTPagesTuesday, June 18, 13
  30. 30. LAYOUTPanoramaTuesday, June 18, 13
  31. 31. LAYOUTPanoramaTuesday, June 18, 13
  32. 32. LAYOUTPanoramaTuesday, June 18, 13
  33. 33. LAYOUTPanorama HowtoExpansive or overviewTop Level. Nothing than data and Navigation.Use a minimized AppBar, portrait only.5 Panels or less.Returning users should be taken back to the pane where they left off.Tuesday, June 18, 13
  34. 34. LAYOUTPanorama ExamplesTuesday, June 18, 13
  35. 35. LAYOUTPivotsTuesday, June 18, 13
  36. 36. LAYOUTPivots HowtoPivots control should be used only to display items or data of similar typeUse a full AppBar7 Panels or less.Never place a pivot control inside to another pivot control.Never place a pivot control inside a panorama control.Don’t use scroll elements like maps or bar inside a pivot control.Limit pivot’s header text to a max of one or two words.Never use an edit control within a pivot.Tuesday, June 18, 13
  37. 37. LAYOUTPivots ExamplesTuesday, June 18, 13
  38. 38. LAYOUTBasic PageTuesday, June 18, 13
  39. 39. LAYOUTAppBarTuesday, June 18, 13
  40. 40. LAYOUTAppBarTuesday, June 18, 13
  41. 41. LAYOUTStructureTuesday, June 18, 13
  42. 42. Motions & TransitionsTuesday, June 18, 13
  43. 43. MOTIONWhy Motion?Motions delights the users.Motions adds more interactions.Motion gives the impression of enhanced performance.Motion adds personality.Motion adds consistency.Motion adds elegance.Tuesday, June 18, 13
  44. 44. MOTIONIt’s like a movieAn action movie isn’t 100% action.Highs (Defining moments)Lows (Consistent, not distracting but still delightful)How is it edited for the biggest impact.Tuesday, June 18, 13
  45. 45. MOTIONTransitionsTriggered by user action.Transitions provide a mental breadcrumb for the user as they navigate theUI.Tuesday, June 18, 13
  46. 46. MOTIONRulesEstablish physics.Sense of how gravity works on the device that the user can relate to.Gravity is always the same.Transitions are directional.Enter, exit, forward, backward.Create the medal model of where items live.If it didn’t change don’t move it.Tuesday, June 18, 13
  47. 47. MOTIONMotions HowToIt doesn’t matter how long an animation takes, it matters how long youthink it takes.Under 500ms is instant.Use easing to our advantage.Not what you thought you saw.For time-consuming processes, provide feedback.Tuesday, June 18, 13
  48. 48. Examples.Tuesday, June 18, 13
  49. 49. Tuesday, June 18, 13
  50. 50. Tuesday, June 18, 13
  51. 51. Tuesday, June 18, 13
  52. 52. Thank you! So say we all.Twitter: @Maria_NasTuesday, June 18, 13

×