modern design principles ms n.
Skip this Video
Loading SlideShow in 5 Seconds..
Modern Design Principles (MS) PowerPoint Presentation
Download Presentation
Modern Design Principles (MS)

Loading in 2 Seconds...

play fullscreen
1 / 22

Modern Design Principles (MS) - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
back in the days
Back in the days

This washow

an RSS readingapplicationlookedlike..

In Modern Design it would look like..

hubs spoke navigation pattern
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
lots of on screen functionality
Lots of on-screen functionality

Lots of chrome.. Not so muchcontent.

choosing the right tool
Choosing the right tool
  • VS == code
  • Blend == layout
  • Beginners => Easy Start
  • Advanced => High Productivity
  • 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
where did the buttons go
Where did the buttons go?

The AppBaris for commanding

bothfunctionality and navigation

app bars
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
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
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
Command glyphs
  • Segoe UI Symbol font ships in Windows 8.1
  • Glyphs in app bar are 14pts

common command glyphs
Common command glyphs
  • Glyphs with standard meaning
  • Consistent across commanding pattern











command layout
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
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
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
A lot of ItemControls – a lot of different features
  • FlipView
  • ListBox
  • ComboBox
  • GridView
  • ItemsControl
  • ListView
  • Ect.