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 functionalityLots of chrome.. Not so much content.

Choosing the right tool

VS == codeBlend == layout

Beginners => Easy StartAdvanced => 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

1 2 3

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 rightCommands 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 leftShow 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

FlipViewListBoxComboBoxGridViewItemsControlListViewEct.