Windows 8 UX Design             Welcome to Metro | Windows 8 Design LanguageAll rights reserved | Tal Florentin, UX Vision...
Where does Metro come from?             The origins of Windows8 design languageAll rights reserved | Tal Florentin, UX Vis...
Metro – Sleek, quick and modern •   Consolidating groups of common tasks to speed up usage (Gestalt) •   Large hubs over s...
The origins of Metro: Bauhouse • Bauhaus - a German modernist school of design • Extreme Reductionism (Minimalism) • Reduc...
The origins of Metro: International Typography Our lives are constantly in motion, so we need to have to be able to glance...
The origins of Metro: Emotional Impact Through Motion • The power of kinetic typography • Movement brings the text and sha...
The basics of the Metro-Style designAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
5 Leading Principles Used to help you choose throughout the way •   Show pride in craftsmanship (‫)אמנות‬ •   Be fast and ...
:Leading Guidelines Focus: • Be great at one thing • Let people interact with content. Put the content in the front • Do m...
Leading Guidelines Visual Design: • Sweet the details • Use balance, symmetry and hierarchy to foster trust and sense of i...
Anatomy of the metro style appAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
The basic concept of the canvas                   That is your content canvas                       This is the ScreenWind...
Using horizontal layout with visual cues            A                  B            C                              DWindow...
The basic concept of the canvas            A                  B   C                              DWindows 8 UX Design Lang...
Tiles Tiles = application shortcutsWindows 8 UX Design Language                                                          1...
Single Canvas Things move in and out with motion rather than pop up in layers                                        This ...
Single Canvas Things move in and out with motion rather than pop up in layers                                        This ...
View States 3 main application view states  Full Screen View                Snapped View                Fill ViewWindows 8...
App modes to fit view states  Full Screen View             Snapped View                    Fill View      A               ...
Bars                    This is the screen                This is the screen                                              ...
Context Menus                                               Up to 5 items                               Option   1        ...
Dialogs                                                          Lightbox              Modal Dialog     This is the screen...
Metro-style NavigationAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Navigation BasicsHub page                       Section page         Details PageWindows 8 UX Design Language             ...
Wizard-oriented navigation modelWindows 8 UX Design Language                                                             2...
Detailed Screen Layout                Back                          Header                     Nav Bar                    ...
Detailed Screen Layout                       Header   On Canvas ControlsWindows 8 UX Design Language                      ...
Detailed Screen Layout                       Header                                                  Correct GroupingWindo...
Navigation MapWindows 8 UX Design Language                                                        29                      ...
Header top navigation                                        Header Navigation                      Section A   Section B ...
Layout Grid StructureAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Unit = 20px                                           Top header = 7 Units (140px)               6 Units                  ...
2 Units                                                  ½ UnitWindows 8 UX Design Language                               ...
1 Unit                                                    ½ UnitWindows 8 UX Design Language                              ...
4 UnitWindows 8 UX Design Language                                                                 35                     ...
Case StudyAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
General App NavigationWindows 8 UX Design Language                                                        37              ...
Date filtering (the iPad style)Windows 8 UX Design Language                                                            38 ...
Date filtering (the win8 style)Windows 8 UX Design Language                                                            39 ...
Skype Metro – What’s your guess?Windows 8 UX Design Language                                                             4...
Skype MetroWindows 8 UX Design Language                                                        41                         ...
Windows 8 UX Design Language                                                        42                               All r...
Windows 8 UX Design Language                                                        43                               All r...
Windows 8 UX Design Language                                                        44                               All r...
How do people use the tablet?All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Most Common Tablet Grips        • 1 hand holding,                           • 2 hand holding,          1 hand interacting ...
Most Common Tablet Grips        • Device rests on table/legs              • Device rests on table,          2 hands fully ...
Optimal Touch Areas    For InteractionWindows 8 UX Design Language                                                        ...
Optimal Touch Areas    For ReadingWindows 8 UX Design Language                                                        49  ...
To be continued…All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
Upcoming SlideShare
Loading in …5
×

UXV certification - sessions 22 - mobile - metro

536
-1

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

UXV certification - sessions 22 - mobile - metro

  1. 1. Windows 8 UX Design Welcome to Metro | Windows 8 Design LanguageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  2. 2. Where does Metro come from? The origins of Windows8 design languageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  3. 3. Metro – Sleek, quick and modern • Consolidating groups of common tasks to speed up usage (Gestalt) • Large hubs over small buttons • Animation, movement and transitions for live response and continuity • Scrolling canvasWindows 8 UX Design Language 3 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  4. 4. The origins of Metro: Bauhouse • Bauhaus - a German modernist school of design • Extreme Reductionism (Minimalism) • Reducing design to its functionWindows 8 UX Design Language 4 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  5. 5. The origins of Metro: International Typography Our lives are constantly in motion, so we need to have to be able to glance at these kind of signs, get the information and keep going • Swiss Typography Movement: • Minimal & simple 2D 1-color icons • Good typography • Large text that catches the eye • Segeo font family • No capitals • No bolds • No rounded corners • No shadows and 3D effectsWindows 8 UX Design Language 5 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  6. 6. The origins of Metro: Emotional Impact Through Motion • The power of kinetic typography • Movement brings the text and shapes to life • Creating an emotional responseWindows 8 UX Design Language 6 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  7. 7. The basics of the Metro-Style designAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  8. 8. 5 Leading Principles Used to help you choose throughout the way • Show pride in craftsmanship (‫)אמנות‬ • Be fast and fluid • Be authentically digital • Do more with less • Win as oneWindows 8 UX Design Language 8 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  9. 9. :Leading Guidelines Focus: • Be great at one thing • Let people interact with content. Put the content in the front • Do more with less - Reduce your design to its essentials Interaction, Usability and Experience • Design for intuitive interaction - take advantage of what people already know: Remember, People come to see the content, not to interact with the app • Bring life to the app by creating a sense of continuity and telling a story • Delight your users with motion and use it to create meaningful transitions • Design for touchWindows 8 UX Design Language 9 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  10. 10. Leading Guidelines Visual Design: • Sweet the details • Use balance, symmetry and hierarchy to foster trust and sense of integrity • Use typography beautifully, • Use bold, vibrant colors • Align the app layout to the grid • Promote consistency Technology • Connect to the cloud and to other apps and platforms (task continuity, social sharing, etc.)Windows 8 UX Design Language 10 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  11. 11. Anatomy of the metro style appAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  12. 12. The basic concept of the canvas That is your content canvas This is the ScreenWindows 8 UX Design Language 12 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  13. 13. Using horizontal layout with visual cues A B C DWindows 8 UX Design Language 13 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  14. 14. The basic concept of the canvas A B C DWindows 8 UX Design Language 14 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  15. 15. Tiles Tiles = application shortcutsWindows 8 UX Design Language 15 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  16. 16. Single Canvas Things move in and out with motion rather than pop up in layers This is the screenWindows 8 UX Design Language 16 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  17. 17. Single Canvas Things move in and out with motion rather than pop up in layers This is the screenWindows 8 UX Design Language 17 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  18. 18. View States 3 main application view states Full Screen View Snapped View Fill ViewWindows 8 UX Design Language 18 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  19. 19. App modes to fit view states Full Screen View Snapped View Fill View A A A B C Other Other C B C BWindows 8 UX Design Language 19 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  20. 20. Bars This is the screen This is the screen Application Bar Application Bar: Charms Bar: Views and actions Standard options available from every app: - Cross app search - Share app content - Connect to devices - App settings - Start - back to main Start screenWindows 8 UX Design Language 20 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  21. 21. Context Menus Up to 5 items Option 1 Option 2 Option 3 Option 4 Option 5Windows 8 UX Design Language 21 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  22. 22. Dialogs Lightbox Modal Dialog This is the screenWindows 8 UX Design Language 22 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  23. 23. Metro-style NavigationAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  24. 24. Navigation BasicsHub page Section page Details PageWindows 8 UX Design Language 24 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  25. 25. Wizard-oriented navigation modelWindows 8 UX Design Language 25 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  26. 26. Detailed Screen Layout Back Header Nav Bar Header Menu Home Home Link Display Modes Actions: Filter, sort, new…. App BarWindows 8 UX Design Language 26 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  27. 27. Detailed Screen Layout Header On Canvas ControlsWindows 8 UX Design Language 27 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  28. 28. Detailed Screen Layout Header Correct GroupingWindows 8 UX Design Language 28 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  29. 29. Navigation MapWindows 8 UX Design Language 29 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  30. 30. Header top navigation Header Navigation Section A Section B Section CWindows 8 UX Design Language 30 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  31. 31. Layout Grid StructureAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  32. 32. Unit = 20px Top header = 7 Units (140px) 6 Units 2.5 Units 6.5 UnitsWindows 8 UX Design Language 32 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  33. 33. 2 Units ½ UnitWindows 8 UX Design Language 33 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  34. 34. 1 Unit ½ UnitWindows 8 UX Design Language 34 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  35. 35. 4 UnitWindows 8 UX Design Language 35 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  36. 36. Case StudyAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  37. 37. General App NavigationWindows 8 UX Design Language 37 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  38. 38. Date filtering (the iPad style)Windows 8 UX Design Language 38 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  39. 39. Date filtering (the win8 style)Windows 8 UX Design Language 39 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  40. 40. Skype Metro – What’s your guess?Windows 8 UX Design Language 40 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  41. 41. Skype MetroWindows 8 UX Design Language 41 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  42. 42. Windows 8 UX Design Language 42 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  43. 43. Windows 8 UX Design Language 43 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  44. 44. Windows 8 UX Design Language 44 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  45. 45. How do people use the tablet?All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  46. 46. Most Common Tablet Grips • 1 hand holding, • 2 hand holding, 1 hand interacting 2 thumbs interacting • right/bottom areas best for interaction • Right/left bottom areas best for interaction • Low right corner hidden • Anchored thumbs – better accuracy • Minimal Reach – better • Touch middle of the screen requires • Read/browse, Light typing alternative position • Gaming, Read/browse, Light typingWindows 8 UX Design Language 46 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  47. 47. Most Common Tablet Grips • Device rests on table/legs • Device rests on table, 2 hands fully interactive Interaction from a distance • bottom area best for interaction • bottom area best for interaction • Lower corners covered by hands • Touching upper areas may move device off • Reduce need for reaching higher areas balanceWindows 8 UX Design Language 47 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  48. 48. Optimal Touch Areas For InteractionWindows 8 UX Design Language 48 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  49. 49. Optimal Touch Areas For ReadingWindows 8 UX Design Language 49 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  50. 50. To be continued…All rights reserved | Tal Florentin, UX Vision Ltd. © 2012

×