1 / 22

Modern Design Principles (MS)

Modern Design Principles (MS). Back in the days. This was how an RSS reading application looked like .. In Modern Design it would look like . Hubs & spoke navigation pattern. Hierarchical pattern Best for large collections of related content

africa
Download Presentation

Modern Design Principles (MS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Modern Design Principles (MS)

  2. Back in the days This washow an RSS readingapplicationlookedlike.. In Modern Design it would look like..

  3. Hubs & spokenavigation pattern • Hierarchical pattern • Best for large collections of related content • Content is separated into sections, levels of detail • Pattern provides intuitive navigation, promotes discovery

  4. Lots of templates in Visual Studio to getyoustarted

  5. Lots of on-screen functionality Lots of chrome.. Not so muchcontent.

  6. Choosing the right tool • VS == code • Blend == layout • Beginners => Easy Start • Advanced => High Productivity

  7. Grid • Clean, straightforward, consistent • Consistent alignment provides rhythm and structure • Formed by the content itself • No gridlines • Crisp edges let content shine • Negative space communicates relationships • Design with size, proportion and position • Emphasize content relationships on page • Economize pixels via placement of important content

  8. Positive and negative space 1 2 3

  9. Size and proportion 1 2 3

  10. Where did the buttons go? The AppBaris for commanding bothfunctionality and navigation

  11. App bars • Top app bar is generally reserved for navigation • Bottom app bar is generally reserved for commanding • Displayed on-demand by edge gesture, Win+Z or selection • Dismissed after tapping command, light dismiss, de-selection

  12. App bar controls • Used for commanding • Resides on bottom of page • Standard • Made up of app bar buttons, toggles, separators • Automatic layout of commands • Primary on right, secondary on left • Automatic resizing/dropping of labels • Custom • Use any controls, layout • Retains standard personality

  13. Navigation bar control • Top app bar is recommended for navigation • Consistent and predictable • Provides direct navigation without browsing • NavBar control provides common patterns • Pagination, panning and scrolling • Manual, data binding

  14. Command glyphs • Segoe UI Symbol font ships in Windows 8.1 • Glyphs in app bar are 14pts                                  

  15. Common command glyphs • Glyphs with standard meaning • Consistent across commanding pattern     Pin Remove Edit Add Search      Refresh Sort Favorite Download Filter

  16. Command layout • Predictability • Consistent placement increases usability via muscle memory, feeling of quality • Ergonomics • Place common commands on the edges and within easy reach • Aesthetics • Intuitive command icons • Short, clear command labels • Fierce simplification of commands to reinforce scenarios

  17. Persistent commands on right • Commands that appear throughout the app • New/Add and Delete/Remove at far right • Provides user predictable experience, confidence • Within easy reach of swipe/tap

  18. Insert selection commands on left • Show commands based on item selection • Commands can be shown for single and/or multi-select • Commands insert on far left for ergonomics • Match the strong context of selection

  19. A lot of ItemControls – a lot of different features • FlipView • ListBox • ComboBox • GridView • ItemsControl • ListView • Ect.

More Related