windows 8 quick start ux

The system UX

Windows 8 Quick Start

Alexandre Marreirosamarreiros@gmail.com|@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 Marreirosamarreiros@gmail.com|@alexmarreiros|

digitalmindignition.wordpress.com

Windows 8 Quick Start – About The presentation Author

Thank You !