Embed Size (px)
DESCRIPTION
My design keynote presentation from Microsoft #appfest in Sydney February 2013
Citation preview
I KNOW, YOU JUST WANT
TO START CODING
FEATURES-OUT?OR PEOPLE-IN?
A BIT ABOUT ME
SOME GROUSE APPSCOCKTAIL FLOW (WINDOWS 8) QANTAS (WINDOWS PHONE)
WHAT MAKES THOSE APPS
GROUSE?
WHAT WE SAWMINIMALISMVISUALFUNCTIONAL
STANDARDSCONSISTENCY
DISCOVERABILITY
ORIENTATIONSHALLOW NAVIGATIONHEADINGSBACKTRANSITIONS
WHAT MAKES THOSE APPS GROUSE?
GROUSE:VISUALLYFUNCTIONALLY
A GROUSE USER EXPERIENCEPETER MERHOLZ
THE RIGHT…
IDEA(Start here)
STRUCTURE
INTERFACE
VISUALS
(THEN CODE… )
A GROUSE USER EXPERIENCE
Conceptual design
Visual design
‘BEST APP’ STATEMENT
CONCEPTUAL DESIGN
“MY APP IS THE BEST APP
FOR…”DO ONE THING WELL
EXERCISEMY APP IS THE BEST APP FOR…
“DO MORE WITH LESS”
WINDOWS DESIGN PRINCIPLE
THE RIGHT…
IDEA(Start here)
STRUCTURE
INTERFACE
VISUALS
(THEN CODE… )
A GROUSE USER EXPERIENCE
Conceptual design
Visual design
PLANNING YOUR APP’S UXPROCESS
PLANNING YOUR APP’S UXPROCESS
PLANNING YOUR APP’S UX1. DECIDE WHAT YOUR APP IS GREAT AT
2. DECIDE WHAT USER ACTIVITIES TO SUPPORT
3. DECIDE WHAT FEATURES TO INCLUDE
4. DECIDE HOW TO MONETIZE YOUR APP
5. DESIGN THE UI FOR YOUR APP
6. MAKE A GOOD FIRST IMPRESSION
7. PROTOTYPE AND VALIDATE YOUR DESIGN
PROCESS
msdn.microsoft.com/en-US/library/windows/apps/hh465427
PLANNING YOUR APP’S UX1. DECIDE WHAT YOUR APP IS GREAT AT
2. DECIDE WHAT USER ACTIVITIES TO SUPPORT
3. DECIDE WHAT FEATURES TO INCLUDE
4. DECIDE HOW TO MONETIZE YOUR APP
5. DESIGN THE UI FOR YOUR APP
6. MAKE A GOOD FIRST IMPRESSION
7. PROTOTYPE AND VALIDATE YOUR DESIGN
PROCESS
msdn.microsoft.com/en-US/library/windows/apps/hh465427
EXERCISELIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP.
ALL SENTENCES START WITH “USERS CAN…”
NOW YOU HAVE
YOUR USER SCENARIOS…
PLEASE REMOVE HALFEXAMINE YOUR ‘BEST APP’ STATEMENT
INFORMATION DESIGN
INFORMATION DESIGN
Conceptual design
Visual design
NAVIGATION
HIERARCHICAL NAVIGATIONINFORMATION DESIGN
Hub
Section
Detail
‘DEFAULT’ NAVIGATION STRUCTURE
WINDOWS 8
HUB SECTION DETAIL
INFORMATION DESIGN
WINDOWS PHONE
PANORAMA PIVOT PAGE
HUBS AND
PANORAMAS
HUB / PANORAMA TIPSTHE APP’S VALUE PROPOSITION SHOULD BE IMMEDIATELY CLEARTHINK “MAGAZINE COVER”REFLECT THE START SCREEN TILES AND CONTENT
MAKE IT CLEAR THERE IS MORE CONTENT OFF THE EDGE“PEEK”DON’T BE PREDICTABLE IF CONTENT IS NOT PREDICTABLE
YOU DON’T HAVE TO DEFAULT TO THE FIRST PANEL(PHONE)
INFORMATION DESIGN
NON-STANDARD GROUP SIZES ARE OK
PAY ATTENTION TO READING ORDERA LIST IS BETTER IF THERE IS AN IMPLIED ORDER.
MINIMISE INTERACTIVITYAVOID GESTURES THAT INTERFERE WITH PANNING THE PANORAMA
DON’T USE CONTROLS TO NAVIGATE WITHIN THE PANORAMA
EXERCISESKETCH OUT YOUR NAVIGATION STRUCTURELOOK AT YOUR KEY SCENARIOS
INTERACTION DESIGN
INTERACTION DESIGN
Conceptual design
Visual design
INTERACTION DESIGN TIPSCONTENT AS CONTROLS“DIRECT MANIPULATION”
MOVE OTHER COMMANDS OFF THE CANVASCharmsApp BarContext menus…Except where you can’t…
TOUCHTARGET SIZEREACHOCCLUSION
VISUAL DESIGN
VISUAL DESIGN
Conceptual design
Visual design
VISUAL MINIMALISM
EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT’S EXISTENCETO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
PRO TIP leave s**t outVISUAL DESIGN
PRO TIP turn s**t downVISUAL DESIGN
TEMPLATES AND GRIDS
THE STANDARD TEMPLATES ARE A GOOD START
GRIDSVISUAL DESIGN
GRIDSVISUAL DESIGN
GRIDSVISUAL DESIGN
PRO TIP line s**t upVISUAL DESIGN
PRO TIP space s**t evenlyVISUAL DESIGN
VISUALHIERARCHY
USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
VISUAL HIERARCHY
COMMUNICATE A CLEAR HIERARCHY OF INFORMATION
TOOLSTYPOGRAPHY size colour weightALIGNMENTWHITESPACE
VISUAL DESIGN
size
colour
CASE
alignment alignmentweight
proximitycolour
proximity
VISUAL HIERARCHY
USE TYPOGRAPHY TO COMMUNICATE THE HIERARCHY OF INFORMATION Experiment with font weight and colour,
rather than introducing additional font sizes.
TAKE ADVANTAGE OF BUILT-IN STYLES IN EXPRESSION BLEND / VISUAL STUDIO
VISUAL DESIGN
PRO TIP group s**tand sub-group s**t
VISUAL DESIGN
ELEGANT VARIATION
STRIVE FOR MEANINGFUL VARIETY
PRO TIP mix s**t upVISUAL DESIGN
COLOUR
BRAND COLOURSVISUAL DESIGN
HOW MANY COLOURS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER
VISUAL DESIGN
1 (S**T)
5(GROUSE)
THAT’S HOW MANY COLOURS YOU SHOULD USE
(PLUS BLACK AND WHITE)
BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR
HOW MANY COLOURS SHOULD I USE?
KULER.ADOBE.COM
PRO TIP you don’t need a s**tload of colours
VISUAL DESIGN
FOREGROUND AND BACKGROUND COLOURSCOOL COLOURS IN THE BACKGROUND
HOT COLOURS IN THE FOREGROUND
PRO TIP hot colours look s**thouse in the background
VISUAL DESIGN
FONTS
HOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER
VISUAL DESIGN
1 (S**T)
5(GROUSE)
1
WHAT FONTS SHOULD I USE?WINDOWS PHONESEGOE WP
WINDOWS 8SEGOE UI CAMBRIAReadingCALLIBRIReading and Writing
VISUAL DESIGN
STANDARD FONT SIZES AND WEIGHTS ARE PROVIDED IN THE TEMPLATESDON’T VARY FROM THEM
IF YOU HAVE A COMPANY/BRAND FONTYOU CAN USE IT FOR MAJOR HEADINGS… if it is easy to distinguish from Segoe
PRO TIP segoe is the s**tVISUAL DESIGN
YOUR APP LOOKS GROUSEWITH A BEAUTIFUL PHOTO IN THE BACKGROUND
BLAND APP?
PRO TIP get a s**t-hot photo
VISUAL DESIGN
RECAP
PRO TIPSLEAVE S**T OUT
TURN S**T DOWN
LINE S**T UP
SPACE S**T EVENLY
GROUP S**TAND SUB-GROUP S**T
MIX S**T UP
YOU DON’T NEED A S**T-LOAD OF COLOURS
HOT COLOURS LOOK S**THOUSE IN THE BACKGROUND
SEGOE IT THE S**T
GET A S**T-HOT PHOTO
GROUSE APPS
PEOPLE-IN, NOT FUNCTIONS-OUT
FOLLOW THE GUIDELINES!DESIGN.WINDOWS.COMDEV.WINDOWSPHONE.COM/DESIGN
WHAT NEXT?
WHAT NEXT?
BEFORE YOU START CODING…CULL YOUR FEATURESSKETCH THE PAGE STRUCTURE AND NAVIGATION OF YOUR APPGROUP INFORMATION WITHIN PAGES
AS YOU CODE…THINK ABOUT The information hierarchy on your pages Templates, grids and alignment Standards and consistency
SOLVE DESIGN PROBLEMS BY REMOVING DETAIL, NOT ADDING
WHAT MAKES YOUR APP GROUSE?
