Your SlideShare is downloading. ×
designingforwindowsphoneby   Neelima Salvi
objective                                                  learn, implement & deliver                                     ...
metrolanguage
© microsoft
focus onUser ExperienceVisual DesignApplication Goal
common examplewe use ketchup bottles
who amongst usNever struggledwith a ketchup bottle?
which of these two bottles isEASIER to get the ketchup out from?
userexperience
1
2
3
4
5
6
is this awindow
visualdesign
What if you do not target the red marked area?
achievinggoal
focus onUser ExperienceVisual DesignApplication Goal
clear   accessibleeasy    usable
theming   Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
blue             bluered              redmango            mangogreen            greenmagenta          magentapurple       ...
theming
theming
start tile
start tile             x
splashscreen
splash screen                x
segoe WP
text sizelowercaseexception of section titlesif brand guidelines insiston a different case, thenensure that the use of the...
Visuallanguage
visual languagemetroicons
visual languageforeground or background color of a control
visual languagex
1simple        color   2dimensional
composition
element alignment    element spacing
element alignmentA                       B
element alignment          24px                        24pxx
element alignment                 ELEMENT SPACINGDETAILS                        DETAILS                          DETAILSna...
element alignment                 ELEMENT SPACINGDETAILS                       DETAILS                          DETAILSnam...
element spacing        ELEMENT SPACINGPICTURES               PICTURES           A                      B
element spacing    ELEMENT SPACINGPICTURES               PICTURES           x
element spacing                    ELEMENT SPACINGDETAILS                                   DETAILSname       lara sheffer...
element spacing                    ELEMENT SPACINGDETAILS                                   DETAILSname       lara sheffer...
buttons placementamsterdam                                                    amsterdamlorem ipsum dolor sit amet, consect...
don’tbreak theGRID
lists adorners                                              ELEMENT SPACINGshare              share                     sh...
lists adorners                                          ELEMENT SPACINGshare              share                 sharefaceb...
feedback controls color ELEMENT SPACINGshare        sharef facebook    f facebookt twitter     t  email           email  f...
feedback controls colorshare        sharef facebook    f facebookt twitter     t  email           email  favorite        f...
feedback controls buttonLOCATION                      LOCATIONamsterdam                     amsterdamBoerhaavelaan 7,     ...
feedback controls button   ELEMENT SPACI -LOCATIONamsterdamBoerhaavelaan 7,2500 DL Den HaagApollolaan 138 AmsterdamNetherl...
there is noselected state
headingsheadings should be left alignedshould not have backgrounds,borders, underline, or any otherkind of decoration.
headingsthe exception to this is panorama pane titles, which may usecorporate branding.
pivot controls pivot pages                                   ELEMENT SPACINGall pivot controls should have at least       ...
pivot controls master-detail view                                           ELEMENT SPACINGx the pivotfilter-results viewn...
pivot controls master-detail view                                   ELEMENT SPACINGpivots should contain pages of homogeno...
pivot controls controls not permitted in pivots                                        ELEMENT SPACINGx   toggle switchesx...
panorama controls scrollable panesSPACING                               ELEMENTpanorama panes should either scroll vertica...
panorama controls scrollable panesSPACING                                      ELEMENTx   panorama panes should either scr...
panorama controls floating buttonsSPACING                             ELEMENTx
panorama controls controls not permitted                                           ELEMENT SPACINGx   toggle switchesx   s...
dialog boxes     placementdelete                                        deleteare you sure to delete this record?         ...
language & tone
language & tone    error message                                      Contents NDP1. 1sp 1.x     Unhandled Exception      ...
language & tone    error message make sure you typed the           make sure you typed the name correctly, and then       ...
typos
typosx   the app should not have any spelling mistakes. Copy    that is spelt incorrectly looks bad and could negatively  ...
pagetransitions
page transitions
TY             neelima salvithank you!   Design Consultant@amileens    neelima.salvi@gmail.com
Windows phone UI Design Guidelines
Windows phone UI Design Guidelines
Windows phone UI Design Guidelines
Windows phone UI Design Guidelines
Windows phone UI Design Guidelines
Upcoming SlideShare
Loading in...5
×

Windows phone UI Design Guidelines

4,299

Published on

Published in: Design, Business
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,299
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Windows phone UI Design Guidelines"

  1. 1. designingforwindowsphoneby Neelima Salvi
  2. 2. objective learn, implement & deliver the bestSource: User Experience Design Guidelines for Windows Phonehttp://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
  3. 3. metrolanguage
  4. 4. © microsoft
  5. 5. focus onUser ExperienceVisual DesignApplication Goal
  6. 6. common examplewe use ketchup bottles
  7. 7. who amongst usNever struggledwith a ketchup bottle?
  8. 8. which of these two bottles isEASIER to get the ketchup out from?
  9. 9. userexperience
  10. 10. 1
  11. 11. 2
  12. 12. 3
  13. 13. 4
  14. 14. 5
  15. 15. 6
  16. 16. is this awindow
  17. 17. visualdesign
  18. 18. What if you do not target the red marked area?
  19. 19. achievinggoal
  20. 20. focus onUser ExperienceVisual DesignApplication Goal
  21. 21. clear accessibleeasy usable
  22. 22. theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
  23. 23. blue bluered redmango mangogreen greenmagenta magentapurple purplelime limeteal tealbrown brownpink dark pink light
  24. 24. theming
  25. 25. theming
  26. 26. start tile
  27. 27. start tile x
  28. 28. splashscreen
  29. 29. splash screen x
  30. 30. segoe WP
  31. 31. text sizelowercaseexception of section titlesif brand guidelines insiston a different case, thenensure that the use of thecase is consistent acrossthe app.
  32. 32. Visuallanguage
  33. 33. visual languagemetroicons
  34. 34. visual languageforeground or background color of a control
  35. 35. visual languagex
  36. 36. 1simple color 2dimensional
  37. 37. composition
  38. 38. element alignment element spacing
  39. 39. element alignmentA B
  40. 40. element alignment 24px 24pxx
  41. 41. element alignment ELEMENT SPACINGDETAILS DETAILS DETAILSname lara sheffer name lara sheffer name lara sheffertelephone 3652466 telephone 3652466birthday 1 January 1980 birthday 1 January 1980 telephone 3652466address 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 SPACINGDETAILS DETAILS DETAILSname lara sheffer name lara sheffer name lara sheffertelephone 3652466 telephone 3652466birthday 1 January 1980 birthday 1 January 1980 telephone 3652466address 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 SPACINGPICTURES PICTURES A B
  44. 44. element spacing ELEMENT SPACINGPICTURES PICTURES x
  45. 45. element spacing ELEMENT SPACINGDETAILS DETAILSname lara sheffer name lara sheffer telephone 3652466telephone 3652466 birthday 1 January 1980birthday 1 January 1980 address 3 East 54th Street 18th Flooraddress 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
  46. 46. element spacing ELEMENT SPACINGDETAILS DETAILSname lara sheffer name lara sheffer telephone 3652466telephone 3652466 birthday 1 January 1980birthday 1 January 1980 address 3 East 54th Street 18th Flooraddress 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
  47. 47. buttons placementamsterdam amsterdamlorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinarelit eu vestibulum elit eu vestibulum ok ok x
  48. 48. don’tbreak theGRID
  49. 49. lists adorners ELEMENT SPACINGshare share sharefacebook > facebook f facebooktwitter > twitter t twitteremail > email emailfavorite > favorite favorite A B C
  50. 50. lists adorners ELEMENT SPACINGshare share sharefacebook > facebook f facebooktwitter > twitter t twitteremail > email emailfavorite > favorite favorite x
  51. 51. feedback controls color ELEMENT SPACINGshare sharef facebook f facebookt twitter t email email favorite favorite A B
  52. 52. feedback controls colorshare sharef facebook f facebookt twitter t email email favorite favorite x
  53. 53. feedback controls buttonLOCATION LOCATIONamsterdam amsterdamBoerhaavelaan 7, Boerhaavelaan 7,2500 DL Den Haag 2500 DL Den HaagApollolaan 138 Amsterdam Apollolaan 138 AmsterdamNetherlands Netherlands change change x
  54. 54. feedback controls button ELEMENT SPACI -LOCATIONamsterdamBoerhaavelaan 7,2500 DL Den HaagApollolaan 138 AmsterdamNetherlands
  55. 55. there is noselected state
  56. 56. headingsheadings should be left alignedshould not have backgrounds,borders, underline, or any otherkind of decoration.
  57. 57. headingsthe exception to this is panorama pane titles, which may usecorporate branding.
  58. 58. pivot controls pivot pages ELEMENT SPACINGall pivot controls should have at least two pages in them
  59. 59. pivot controls master-detail view ELEMENT SPACINGx 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 SPACINGpivots should contain pages of homogenous information, like tabs.
  61. 61. pivot controls controls not permitted in pivots ELEMENT SPACINGx toggle switchesx slidersx map controlsx browser controlx horizontally scrollable area or a horizontal swipe gesture
  62. 62. panorama controls scrollable panesSPACING ELEMENTpanorama panes should either scroll vertically or horizontally. not both.
  63. 63. panorama controls scrollable panesSPACING ELEMENTx panorama panes should either scroll vertically or horizontally. not both.
  64. 64. panorama controls floating buttonsSPACING ELEMENTx
  65. 65. panorama controls controls not permitted ELEMENT SPACINGx toggle switchesx slidersx map controlsx browser controlx application bars are not permitted on panorama controls.
  66. 66. dialog boxes placementdelete deleteare 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 okdon’t forget that users are human beings ;)
  70. 70. typos
  71. 71. typosx the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
  72. 72. pagetransitions
  73. 73. page transitions
  74. 74. TY neelima salvithank you! Design Consultant@amileens neelima.salvi@gmail.com

×