windows 8 quick start ux
DESCRIPTION
1st part of myTRANSCRIPT
The system UX
Windows 8 Quick Start
Alexandre [email protected]|@alexmarreiros|
digitalmindignition.wordpress.com
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – Metro Concepts
“METRO IS A UNIFIED DESIGN LANGUAGE. WE CALL IT METRO
BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION.
IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY
AUTHENTIC.”Shane Morris
Inspired By the signage.All about content and clear communication
METRO DESIGN LANGUAGE 5
MODERN DESIGN
FORM FOLLOWS FUNCTION
MASS PRODUCTIONNow: Mass digitisation
historiarte1.wikispaces.com
Windows 8 Quick Start – Metro Concepts
*INFORMATION IS BEAUTIFUL
wikimedia.org
*international style
Windows 8 Quick Start – Metro Concepts
Windows 8 Quick Start – Metro Concepts
Windows 8 Quick Start – MetroPrinciples
But what are the Principles, For
Windows 8?
Windows 8 Quick Start – MetroPrinciples
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
*LOOK LIKE YOU BELONG
Windows 8 Quick Start – About The presentation Author
be fast and fluid*LIFE IS MOBILE
*DELIGHT WITH MOTION
*DESIGN FOR TOUCH
*INTUITIVE INTERACTION
*BE RESPONSIVE AND READY
*IMMERSIVE AND COMPELLING
*ORIENT WITH MOTION
Windows 8 Quick Start – About The presentation Author
authentically digital
*CLOUD CONNECTED
*DYNAMIC AND ALIVE
*BEAUTIFUL USE OF TYPOGRAPHY
*BOLD VIBRANT COLORS
*MOTION
Windows 8 Quick Start – About The presentation Author
do more with less*BE GREAT AT SOMETHING
*FOCUSED AND DIRECT
*CONTENT BEFORE CHROME
*INSPIRE CONFIDENCE
Windows 8 Quick Start – About The presentation Author
win as one
*FIT INTO THE UI MODEL
*REDUCE REDUNDANCY
*WORK TOGETHER TO COMPLETE SCENARIOS
*TOOLS AND TEMPLATES ARE DESIGNED TO SCALE
Windows 8 Quick Start – About The presentation Author
Where metro Lives?
Windows 8 Quick Start – About The presentation Author
METRO DESIGN LANGUAGE 16
Main Goals
*LOOKS EASY, EH?
*BUT YOUR MISTAKES ARE EVEN MORE OBVIOUS
*LESS VISUAL DEVICES TO Direct attention
Communicate grouping
Delight
Brand
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
metro is more than visual*ATTITUDE…
*NAVIGATION STYLE AND STRUCTURE
*INTERACTION STYLE AND STRUCTURE
*SILHOUETTE
*VISUAL LANGUAGE
*LIKE ALL GOOD DESIGN, DESIGNING FOR METRO DOES NOT START WITH VISUALS
METRO DESIGN LANGUAGE 18
getting metro right
*CONTENT BEFORE CHROME
*FUNCTIONAL MINIMALISM
*FLATTER, WIDER NAVIGATION
*INFORMATION HIERARCHY
*PLATFORM CONVENTIONS
Windows 8 Quick Start – About The presentation Author
METRO DESIGN LANGUAGE 19
content before chromeLET THE CONTENT BE THE INTERFACE
MOVE COMMANDS TO THE APP BAR
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
DEMO How Metro happens ?
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
VS
Windows 8 Quick Start – About The presentation Author
Windows 8 Quick Start – About The presentation Author
DEMO
Windows 8 Quick Start – About The presentation Author
References & must see http://blendinsider.com/technical/ux-g
uidelines-for-metro-style-app-development-2011-10-21/8 traits of great Metro style appsDesigning Metro style: principles and personality Designing Metro style apps that are touch-optimized Reach your customers’ devices with one beautiful HTML5 user interface
Alexandre [email protected]|@alexmarreiros|
digitalmindignition.wordpress.com
Windows 8 Quick Start – About The presentation Author
Thank You !