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 Content is separated into sections, levels of detail Pattern provides intuitive navigation, promotes discovery

Lots of templates in Visual Studio to get you started

Lots of on-screen functionality Lots of chrome.. Not so much content.

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

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

Positive and negative space 123

1 3 2 Size and proportion

Where did the buttons go? The AppBar is for commanding both functionality and navigation

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

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

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

Command glyphs Segoe UI Symbol font ships in Windows 8.1 Glyphs in app bar are 14pts

Common command glyphs Glyphs with standard meaning Consistent across commanding pattern Add Remove Search Edit Pin Sort Filter Favorite Refresh Download

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

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

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

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