Post on 28-Dec-2015
Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices
Lanny Geffen, Creative Director, Digiflare
Agenda: Metro style background & design
principles Layout and typography Navigation design Filters, pivots, sorts, and views Command design Touch design
Three key influences Modern design – Bauhaus
International typographic style – Swiss design
Motion design – Cinematography
Why Swiss design? Focus on cleanliness, readability and beautiful graphic
design.
The tools of Swiss design: Typography Grid Bold flat color
Photography in place of illustration or drawings
Three key influences Modern design – Bauhaus
International typographic style – Swiss design
Motion design – Cinematography
Three key influences Modern design – Reduce to the essence
International typographic style – Clear, honest, and beautiful
Motion design – Bring it to life
Metro style design principles
Pride in craftsmanship Be fast and fluid Authentically digital Do more with less Win as one
Pride in craftsmanship
Sweat the details Make it safe and reliable Balance, symmetry, hierarchy Align to the grid
Be fast and fluid
Life is mobile Delight with motion Design for touch Intuitive interaction Be responsive and ready Immersive and compelling
Filters, pivots, sorts and views
Give users control over the way they experience content
Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task
Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)
Filters, pivots, sorts and views
Give users control over the way they experience content
Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task
Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)
command design
Use the canvas for all core scenarios
Use the charms to enable the most common app commands (search, share, devices, settings)
Use the app bar to display commands on-demand
Use context menus for clipboard actions, or commands that apply to content that cannot be selected (like an image)
command placements
Step 1: organize commands
What commands should appear throughout the app?
What comands should show only on certain pages?
What commands should use charms or go in settings?
command placements
Step 2: command sets
What commands should appear throughout the app?
What comands should show only on certain pages?
What commands should use charms or go in settings?
Live tilesNotificationFlipViewText boxesSpell checkingThumbnailsFlyoutsMessage dialogsContext menusTooltips
ButtonsTimePickersDatePickersCheck boxesRadio buttonsSelect controlSlidersToggle switchesRating controlsProgress controls
so much more…
Win as one
Fit into the UI model Reduce redundancy Work together to complete scenarios Tool and templates are designed to scale
ResourcesDesign assets: http://msdn.microsoft.com/library/windows/apps/hh700403
Windows 8 Dev Center:http://msdn.microsoft.com/en-us/windows/apps/
Build 2011:channel9.msdn.com/Events/BUILD/BUILD2011
AttributionThis presentation leveraged materials and information from:
“Designing Metro style: principles and personality” (2011) by Samual Moreau, Director UX Design and Research, Microsoft, watch it here:http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395T
MSDN Windows 8 developer center, “User experience (UX) design patterns for Metro style apps”:http://msdn.microsoft.com/en-us/library/windows/apps/hh770552