Modern Design Principles (MS)
description
Transcript of Modern Design Principles (MS)
![Page 1: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/1.jpg)
Modern Design Principles (MS)
![Page 2: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/2.jpg)
Back in the days
This was how an RSS reading application looked like..
In Modern Design it would look like..
![Page 3: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/3.jpg)
![Page 4: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/4.jpg)
![Page 5: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/5.jpg)
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
![Page 6: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/6.jpg)
Lots of templates in Visual Studio to get you started
![Page 7: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/7.jpg)
Lots of on-screen functionalityLots of chrome.. Not so much content.
![Page 8: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/8.jpg)
![Page 9: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/9.jpg)
Choosing the right tool
VS == codeBlend == layout
Beginners => Easy StartAdvanced => High Productivity
![Page 10: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/10.jpg)
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
![Page 11: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/11.jpg)
Positive and negative space
1 2 3
![Page 12: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/12.jpg)
1
3
2
Size and proportion
![Page 13: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/13.jpg)
Where did the buttons go?
The AppBar is for commanding both functionality and navigation
![Page 14: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/14.jpg)
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
![Page 15: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/15.jpg)
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
![Page 16: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/16.jpg)
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
![Page 17: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/17.jpg)
Command glyphs
Segoe UI Symbol font ships in Windows 8.1
Glyphs in app bar are 14pts
![Page 18: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/18.jpg)
Common command glyphs
Glyphs with standard meaning
Consistent across commanding pattern
Add
Remove Search
Edit
Pin
Sort
Filter
Favorite
Refresh
Download
![Page 19: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/19.jpg)
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
![Page 20: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/20.jpg)
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
![Page 21: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/21.jpg)
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
![Page 22: Modern Design Principles (MS)](https://reader036.fdocuments.net/reader036/viewer/2022062310/568164d2550346895dd6ff82/html5/thumbnails/22.jpg)
A lot of ItemControls – a lot of different features
FlipViewListBoxComboBoxGridViewItemsControlListViewEct.