Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Windows phone UI Design Guidelines Slide 1 Windows phone UI Design Guidelines Slide 2 Windows phone UI Design Guidelines Slide 3 Windows phone UI Design Guidelines Slide 4 Windows phone UI Design Guidelines Slide 5 Windows phone UI Design Guidelines Slide 6 Windows phone UI Design Guidelines Slide 7 Windows phone UI Design Guidelines Slide 8 Windows phone UI Design Guidelines Slide 9 Windows phone UI Design Guidelines Slide 10 Windows phone UI Design Guidelines Slide 11 Windows phone UI Design Guidelines Slide 12 Windows phone UI Design Guidelines Slide 13 Windows phone UI Design Guidelines Slide 14 Windows phone UI Design Guidelines Slide 15 Windows phone UI Design Guidelines Slide 16 Windows phone UI Design Guidelines Slide 17 Windows phone UI Design Guidelines Slide 18 Windows phone UI Design Guidelines Slide 19 Windows phone UI Design Guidelines Slide 20 Windows phone UI Design Guidelines Slide 21 Windows phone UI Design Guidelines Slide 22 Windows phone UI Design Guidelines Slide 23 Windows phone UI Design Guidelines Slide 24 Windows phone UI Design Guidelines Slide 25 Windows phone UI Design Guidelines Slide 26 Windows phone UI Design Guidelines Slide 27 Windows phone UI Design Guidelines Slide 28 Windows phone UI Design Guidelines Slide 29 Windows phone UI Design Guidelines Slide 30 Windows phone UI Design Guidelines Slide 31 Windows phone UI Design Guidelines Slide 32 Windows phone UI Design Guidelines Slide 33 Windows phone UI Design Guidelines Slide 34 Windows phone UI Design Guidelines Slide 35 Windows phone UI Design Guidelines Slide 36 Windows phone UI Design Guidelines Slide 37 Windows phone UI Design Guidelines Slide 38 Windows phone UI Design Guidelines Slide 39 Windows phone UI Design Guidelines Slide 40 Windows phone UI Design Guidelines Slide 41 Windows phone UI Design Guidelines Slide 42 Windows phone UI Design Guidelines Slide 43 Windows phone UI Design Guidelines Slide 44 Windows phone UI Design Guidelines Slide 45 Windows phone UI Design Guidelines Slide 46 Windows phone UI Design Guidelines Slide 47 Windows phone UI Design Guidelines Slide 48 Windows phone UI Design Guidelines Slide 49 Windows phone UI Design Guidelines Slide 50 Windows phone UI Design Guidelines Slide 51 Windows phone UI Design Guidelines Slide 52 Windows phone UI Design Guidelines Slide 53 Windows phone UI Design Guidelines Slide 54 Windows phone UI Design Guidelines Slide 55 Windows phone UI Design Guidelines Slide 56 Windows phone UI Design Guidelines Slide 57 Windows phone UI Design Guidelines Slide 58 Windows phone UI Design Guidelines Slide 59 Windows phone UI Design Guidelines Slide 60 Windows phone UI Design Guidelines Slide 61 Windows phone UI Design Guidelines Slide 62 Windows phone UI Design Guidelines Slide 63 Windows phone UI Design Guidelines Slide 64 Windows phone UI Design Guidelines Slide 65 Windows phone UI Design Guidelines Slide 66 Windows phone UI Design Guidelines Slide 67 Windows phone UI Design Guidelines Slide 68 Windows phone UI Design Guidelines Slide 69 Windows phone UI Design Guidelines Slide 70 Windows phone UI Design Guidelines Slide 71 Windows phone UI Design Guidelines Slide 72 Windows phone UI Design Guidelines Slide 73 Windows phone UI Design Guidelines Slide 74 Windows phone UI Design Guidelines Slide 75 Windows phone UI Design Guidelines Slide 76 Windows phone UI Design Guidelines Slide 77 Windows phone UI Design Guidelines Slide 78 Windows phone UI Design Guidelines Slide 79
Upcoming SlideShare
Android vs iPhone - Differences in UI Patterns and Design
Next

18 Likes

Share

Windows phone UI Design Guidelines

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Windows phone UI Design Guidelines

  1. 1. designing for windows phone by Neelima Salvi
  2. 2. objective learn, implement & deliver the best Source: User Experience Design Guidelines for Windows Phone http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
  3. 3. metro language
  4. 4. © microsoft
  5. 5. focus on User Experience Visual Design Application Goal
  6. 6. common example we use ketchup bottles
  7. 7. who amongst us Never struggled with a ketchup bottle?
  8. 8. which of these two bottles is EASIER to get the ketchup out from?
  9. 9. user experience
  10. 10. 1
  11. 11. 2
  12. 12. 3
  13. 13. 4
  14. 14. 5
  15. 15. 6
  16. 16. is this a window
  17. 17. visual design
  18. 18. What if you do not target the red marked area?
  19. 19. achieving goal
  20. 20. focus on User Experience Visual Design Application Goal
  21. 21. clear accessible easy usable
  22. 22. theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
  23. 23. blue blue red red mango mango green green magenta magenta purple purple lime lime teal teal brown brown pink dark pink light
  24. 24. theming
  25. 25. theming
  26. 26. start tile
  27. 27. start tile x
  28. 28. splash screen
  29. 29. splash screen x
  30. 30. segoe WP
  31. 31. text size lowercase exception of section titles if brand guidelines insist on a different case, then ensure that the use of the case is consistent across the app.
  32. 32. Visual language
  33. 33. visual language metro icons
  34. 34. visual language foreground or background color of a control
  35. 35. visual language x
  36. 36. 1 simple color 2 dimensional
  37. 37. composition
  38. 38. element alignment element spacing
  39. 39. element alignment A B
  40. 40. element alignment 24px 24px x
  41. 41. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY 10022, New York, NY 10022, birthday USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. A B C
  42. 42. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY New York, NY 10022, birthday 10022, USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. x
  43. 43. element spacing ELEMENT SPACING PICTURES PICTURES A B
  44. 44. element spacing ELEMENT SPACING PICTURES PICTURES x
  45. 45. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
  46. 46. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
  47. 47. buttons placement amsterdam amsterdam lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinar elit eu vestibulum elit eu vestibulum ok ok x
  48. 48. don’t break the GRID
  49. 49. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite A B C
  50. 50. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite x
  51. 51. feedback controls color ELEMENT SPACING share share f facebook f facebook t twitter t email email favorite favorite A B
  52. 52. feedback controls color share share f facebook f facebook t twitter t email email favorite favorite x
  53. 53. feedback controls button LOCATION LOCATION amsterdam amsterdam Boerhaavelaan 7, Boerhaavelaan 7, 2500 DL Den Haag 2500 DL Den Haag Apollolaan 138 Amsterdam Apollolaan 138 Amsterdam Netherlands Netherlands change change x
  54. 54. feedback controls button ELEMENT SPACI - LOCATION amsterdam Boerhaavelaan 7, 2500 DL Den Haag Apollolaan 138 Amsterdam Netherlands
  55. 55. there is no selected state
  56. 56. headings headings should be left aligned should not have backgrounds, borders, underline, or any other kind of decoration.
  57. 57. headings the exception to this is panorama pane titles, which may use corporate branding.
  58. 58. pivot controls pivot pages ELEMENT SPACING all pivot controls should have at least two pages in them
  59. 59. pivot controls master-detail view ELEMENT SPACING x the pivotfilter-results viewnever be used as wizard. master-detail, control should or as steps in a a
  60. 60. pivot controls master-detail view ELEMENT SPACING pivots should contain pages of homogenous information, like tabs.
  61. 61. pivot controls controls not permitted in pivots ELEMENT SPACING x toggle switches x sliders x map controls x browser control x horizontally scrollable area or a horizontal swipe gesture
  62. 62. panorama controls scrollable panesSPACING ELEMENT panorama panes should either scroll vertically or horizontally. not both.
  63. 63. panorama controls scrollable panesSPACING ELEMENT x panorama panes should either scroll vertically or horizontally. not both.
  64. 64. panorama controls floating buttonsSPACING ELEMENT x
  65. 65. panorama controls controls not permitted ELEMENT SPACING x toggle switches x sliders x map controls x browser control x application bars are not permitted on panorama controls.
  66. 66. dialog boxes placement delete delete are you sure to delete this record? are you sure to delete this record? yes no yes no x
  67. 67. language & tone
  68. 68. language & tone error message Contents NDP1. 1sp 1. x Unhandled Exception KB2416447_x86_ wrapper log Error C0000005 version bd ok ok do not use computer jargon, hexadecimal error codes, or text that assumes technical knowledge.
  69. 69. language & tone error message make sure you typed the make sure you typed the name correctly, and then name correctly, and then try again. try again. ok ok don’t forget that users are human beings ;)
  70. 70. typos
  71. 71. typos x the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
  72. 72. page transitions
  73. 73. page transitions
  74. 74. TY neelima salvi thank you! Design Consultant @amileens neelima.salvi@gmail.com
  • AshutoshChauhan26

    May. 24, 2021
  • MadhviJoshi

    Sep. 4, 2017
  • ssuser9b464c

    Nov. 3, 2016
  • abujraerr

    Jan. 6, 2016
  • EddieAntunes1

    May. 11, 2015
  • sandesign01

    Jul. 7, 2014
  • yanhuabai

    Jul. 1, 2014
  • therightangledesign

    Jun. 7, 2014
  • niteshp27

    Feb. 19, 2014
  • Kaboom

    Feb. 18, 2014
  • anishks1993

    Feb. 3, 2014
  • shaikhiftikhar

    Oct. 15, 2013
  • hoanphuc

    Sep. 12, 2013
  • mcmulder1

    Sep. 10, 2013
  • roychuang

    Feb. 2, 2013
  • tapodnyapanchal

    Jan. 21, 2013
  • amsumuhammed

    Nov. 28, 2012
  • akashaks2000

    Nov. 20, 2012

Views

Total views

7,456

On Slideshare

0

From embeds

0

Number of embeds

28

Actions

Downloads

2

Shares

0

Comments

0

Likes

18

×