What makes your app grouse - #appfest Sydney
Upcoming SlideShare
Loading in...5
×
 

What makes your app grouse - #appfest Sydney

on

  • 907 views

My design keynote presentation from Microsoft #appfest in Sydney February 2013

My design keynote presentation from Microsoft #appfest in Sydney February 2013

Statistics

Views

Total Views
907
Views on SlideShare
870
Embed Views
37

Actions

Likes
6
Downloads
9
Comments
0

1 Embed 37

https://twitter.com 37

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • XXX grouse pic?
  • Xxx Diagram fromtechedXxx or transition 2nd point
  • XXX phone pics
  • AndReliableAdaptableThe right offeringDelivered the right way
  • Your turnChris Bernard: This app is the best app in its category at ___________
  • Functional MinimalismHave an identity in the store
  • Best app statement is about starting with people and a problem.Not starting with codeNot even starting with colours, fonts and logos
  • People-in
  • After the break:- we’ll get on to layout.
  • Functional minimalism, as well as VisualRemove features
  • A grab-bag of tips
  • A grab-bag of pro-tips
  • A grab-bag of pro-tips
  • Templates
  • Metro uses large blocks of bright colourBut We don’t want an angry fruit salad
  • Especially if you’re not confident
  • Even though I said be minimalist,One thing that you have to communicate is the structure
  • The page should have a topography
  • Nuclear option

What makes your app grouse - #appfest Sydney What makes your app grouse - #appfest Sydney Presentation Transcript

  • WHAT MAKES YOUR APP GROUSE? Shane Morris shane@automaticstudio.com.au @shanemo
  • 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 MAKESTHOSE APPS GROUSE?
  • WHAT MAKES THOSE APPS GROUSE?WHAT WE SAWMINIMALISM GROUSE:VISUAL VISUALLYFUNCTIONAL FUNCTIONALLYSTANDARDSCONSISTENCYDISCOVERABILITYORIENTATIONSHALLOW NAVIGATIONHEADINGSBACKTRANSITIONS
  • PETER MERHOLZA GROUSE USER EXPERIENCE
  • A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
  • „BEST APP‟STATEMENT CONCEPTUAL DESIGN
  • “MY APP IS THE BEST APP FOR…” DO ONE THING WELL
  • EXERCISE MY APP IS THE BEST APP FOR…
  • “DO MORE WITH LESS” WINDOWS DESIGN PRINCIPLE
  • A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
  • PROCESSPLANNING YOUR APP‟S UX
  • PROCESSPLANNING YOUR APP‟S UX
  • PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3. DECIDE WHAT FEATURES TO INCLUDE4. DECIDE HOW TO MONETIZE YOUR APP5. DESIGN THE UI FOR YOUR APP6. MAKE A GOOD FIRST IMPRESSION7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
  • PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3. DECIDE WHAT FEATURES TO INCLUDE4. DECIDE HOW TO MONETIZE YOUR APP5. DESIGN THE UI FOR YOUR APP6. MAKE A GOOD FIRST IMPRESSION7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
  • EXERCISE LIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP. ALL SENTENCES START WITH “USERS CAN…”
  • NOW YOU HAVE YOUR USERSCENARIOS… PLEASE REMOVE HALF EXAMINE YOUR „BEST APP‟ STATEMENT
  • INFORMATION DESIGN
  • ConceptualINFORMATION design DESIGN Information design
  • NAVIGATION
  • INFORMATION DESIGNHIERARCHICAL NAVIGATION Hub Section Detail
  • INFORMATION DESIGN„DEFAULT‟ NAVIGATION STRUCTUREWINDOWS 8 WINDOWS PHONEHUB PANORAMA SECTION PIVOT DETAIL PAGE
  • HUBS ANDPANORAMAS
  • INFORMATION DESIGNHUB / PANORAMA TIPSTHE APP‟S VALUE PROPOSITION SHOULD BE NON-STANDARD GROUP SIZES ARE OKIMMEDIATELY CLEAR PAY ATTENTION TO READING ORDERTHINK “MAGAZINE COVER” A LIST IS BETTER IF THERE IS AN IMPLIEDREFLECT THE START SCREEN TILES AND ORDER.CONTENT MINIMISE INTERACTIVITYMAKE IT CLEAR THERE IS MORE CONTENT OFF THEEDGE AVOID GESTURES THAT INTERFERE WITH PANNING THE PANORAMA“PEEK”DON‟T BE PREDICTABLE IF CONTENT IS NOT DON‟T USE CONTROLS TO NAVIGATE WITHIN THEPREDICTABLE PANORAMAYOU DON‟T HAVE TO DEFAULT TO THEFIRST PANEL(PHONE)
  • EXERCISE SKETCH OUT YOUR NAVIGATION STRUCTURE LOOK AT YOUR KEY SCENARIOS
  • INTERACTION DESIGN
  • Conceptual designINTERACTION Information design DESIGN Interaction design
  • INTERACTION DESIGN TIPSCONTENT AS CONTROLS TOUCH“DIRECT MANIPULATION” TARGET SIZE REACHMOVE OTHER COMMANDS OFF THE CANVAS OCCLUSIONCharmsApp BarContext menus…Except where you can‟t…
  • VISUAL DESIGN
  • Conceptual design Information designVISUAL DESIGN Interaction design Visual design
  • VISUALMINIMALISM EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT‟S EXISTENCE TO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
  • VISUAL DESIGNPRO TIP leave s**t out
  • VISUAL DESIGNPRO TIP turn s**t down
  • TEMPLATES AND GRIDS THE STANDARD TEMPLATES ARE A GOOD START
  • VISUAL DESIGNGRIDS
  • VISUAL DESIGNGRIDS
  • VISUAL DESIGNGRIDS
  • VISUAL DESIGNPRO TIP line s**t up
  • VISUAL DESIGNPRO TIP space s**t evenly
  • VISUALHIERARCHY USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
  • VISUAL DESIGNVISUAL HIERARCHY CASECOMMUNICATE A CLEAR HIERARCHYOF INFORMATIONTOOLS sizeTYPOGRAPHY size weight colour alignment alignment weightALIGNMENT proximity proximityWHITESPACE colour colour
  • VISUAL DESIGNVISUAL HIERARCHYUSE TYPOGRAPHY TO COMMUNICATE THEHIERARCHY OF INFORMATION Experiment with font weight and colour, rather than introducing additional font sizes.TAKE ADVANTAGE OF BUILT-IN STYLES INEXPRESSION BLEND / VISUAL STUDIO
  • VISUAL DESIGNPRO TIP group s**t and sub-group s**t
  • ELEGANTVARIATION STRIVE FOR MEANINGFUL VARIETY
  • VISUAL DESIGNPRO TIP mix s**t up
  • COLOUR
  • VISUAL DESIGNBRAND COLOURS
  • VISUAL DESIGNHOW MANY COLOURS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1 THAT‟S HOW MANY COLOURS YOU SHOULD USE 5 (PLUS BLACK AND WHITE)(S**T) (GROUSE)
  • HOW MANY COLOURS SHOULD I USE?BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR KULER.ADOBE.COM
  • VISUAL DESIGNPRO TIP you don‟t need a s**tload of colours
  • FOREGROUND AND BACKGROUNDCOLOURSCOOL COLOURS IN THE BACKGROUNDHOT COLOURS IN THE FOREGROUND
  • VISUAL DESIGNPRO TIP hot colours look s**thouse in the background
  • FONTS
  • VISUAL DESIGNHOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1(S**T) 1 5 (GROUSE)
  • VISUAL DESIGNWHAT FONTS SHOULD I USE?WINDOWS PHONE STANDARD FONT SIZES AND WEIGHTS ARESEGOE WP PROVIDED IN THE TEMPLATES DON‟T VARY FROM THEMWINDOWS 8 IF YOU HAVE A COMPANY/BRAND FONTSEGOE UI YOU CAN USE IT FOR MAJOR HEADINGS…CAMBRIA if it is easy to distinguish from SegoeReadingCALLIBRIReading and Writing
  • VISUAL DESIGNPRO TIP segoe is the s**t
  • BLAND APP? YOUR APP LOOKS GROUSE WITH A BEAUTIFUL PHOTO IN THE BACKGROUND
  • VISUAL DESIGNPRO TIP get a s**t-hot photo
  • RECAP
  • GROUSE APPSPRO TIPSLEAVE S**T OUT PEOPLE-IN, NOT FUNCTIONS-OUTTURN S**T DOWN FOLLOW THE GUIDELINES!LINE S**T UP DESIGN.WINDOWS.COM DEV.WINDOWSPHONE.COM/DESIGNSPACE S**T EVENLYGROUP S**TAND SUB-GROUP S**TMIX S**T UPYOU DON‟T NEED A S**T-LOAD OF COLOURSHOT COLOURS LOOK S**THOUSEIN THE BACKGROUNDSEGOE IT THE S**TGET A S**T-HOT PHOTO
  • WHATNEXT?
  • WHAT MAKES YOUR APP GROUSE?WHAT NEXT?BEFORE YOU START CODING…CULL YOUR FEATURESSKETCH THE PAGE STRUCTURE AND NAVIGATION OF YOUR APPGROUP INFORMATION WITHIN PAGESAS YOU CODE…THINK ABOUT The information hierarchy on your pages Templates, grids and alignment Standards and consistencySOLVE DESIGN PROBLEMS BY REMOVING DETAIL, NOT ADDING