What makes your app grouse - #appfest Sydney

1,076 views

Published on

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

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,076
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
11
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. WHAT MAKES YOUR APP GROUSE? Shane Morris shane@automaticstudio.com.au @shanemo
    2. 2. I KNOW, YOU JUST WANT TO START CODING
    3. 3. FEATURES- OUT? OR PEOPLE-IN?
    4. 4. A BIT ABOUT ME
    5. 5. SOME GROUSE APPSCOCKTAIL FLOW (WINDOWS 8) QANTAS (WINDOWS PHONE)
    6. 6. WHAT MAKESTHOSE APPS GROUSE?
    7. 7. WHAT MAKES THOSE APPS GROUSE?WHAT WE SAWMINIMALISM GROUSE:VISUAL VISUALLYFUNCTIONAL FUNCTIONALLYSTANDARDSCONSISTENCYDISCOVERABILITYORIENTATIONSHALLOW NAVIGATIONHEADINGSBACKTRANSITIONS
    8. 8. PETER MERHOLZA GROUSE USER EXPERIENCE
    9. 9. A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
    10. 10. „BEST APP‟STATEMENT CONCEPTUAL DESIGN
    11. 11. “MY APP IS THE BEST APP FOR…” DO ONE THING WELL
    12. 12. EXERCISE MY APP IS THE BEST APP FOR…
    13. 13. “DO MORE WITH LESS” WINDOWS DESIGN PRINCIPLE
    14. 14. A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
    15. 15. PROCESSPLANNING YOUR APP‟S UX
    16. 16. PROCESSPLANNING YOUR APP‟S UX
    17. 17. 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
    18. 18. 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
    19. 19. EXERCISE LIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP. ALL SENTENCES START WITH “USERS CAN…”
    20. 20. NOW YOU HAVE YOUR USERSCENARIOS… PLEASE REMOVE HALF EXAMINE YOUR „BEST APP‟ STATEMENT
    21. 21. INFORMATION DESIGN
    22. 22. ConceptualINFORMATION design DESIGN Information design
    23. 23. NAVIGATION
    24. 24. INFORMATION DESIGNHIERARCHICAL NAVIGATION Hub Section Detail
    25. 25. INFORMATION DESIGN„DEFAULT‟ NAVIGATION STRUCTUREWINDOWS 8 WINDOWS PHONEHUB PANORAMA SECTION PIVOT DETAIL PAGE
    26. 26. HUBS ANDPANORAMAS
    27. 27. 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)
    28. 28. EXERCISE SKETCH OUT YOUR NAVIGATION STRUCTURE LOOK AT YOUR KEY SCENARIOS
    29. 29. INTERACTION DESIGN
    30. 30. Conceptual designINTERACTION Information design DESIGN Interaction design
    31. 31. INTERACTION DESIGN TIPSCONTENT AS CONTROLS TOUCH“DIRECT MANIPULATION” TARGET SIZE REACHMOVE OTHER COMMANDS OFF THE CANVAS OCCLUSIONCharmsApp BarContext menus…Except where you can‟t…
    32. 32. VISUAL DESIGN
    33. 33. Conceptual design Information designVISUAL DESIGN Interaction design Visual design
    34. 34. VISUALMINIMALISM EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT‟S EXISTENCE TO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
    35. 35. VISUAL DESIGNPRO TIP leave s**t out
    36. 36. VISUAL DESIGNPRO TIP turn s**t down
    37. 37. TEMPLATES AND GRIDS THE STANDARD TEMPLATES ARE A GOOD START
    38. 38. VISUAL DESIGNGRIDS
    39. 39. VISUAL DESIGNGRIDS
    40. 40. VISUAL DESIGNGRIDS
    41. 41. VISUAL DESIGNPRO TIP line s**t up
    42. 42. VISUAL DESIGNPRO TIP space s**t evenly
    43. 43. VISUALHIERARCHY USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
    44. 44. VISUAL DESIGNVISUAL HIERARCHY CASECOMMUNICATE A CLEAR HIERARCHYOF INFORMATIONTOOLS sizeTYPOGRAPHY size weight colour alignment alignment weightALIGNMENT proximity proximityWHITESPACE colour colour
    45. 45. 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
    46. 46. VISUAL DESIGNPRO TIP group s**t and sub-group s**t
    47. 47. ELEGANTVARIATION STRIVE FOR MEANINGFUL VARIETY
    48. 48. VISUAL DESIGNPRO TIP mix s**t up
    49. 49. COLOUR
    50. 50. VISUAL DESIGNBRAND COLOURS
    51. 51. 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)
    52. 52. HOW MANY COLOURS SHOULD I USE?BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR KULER.ADOBE.COM
    53. 53. VISUAL DESIGNPRO TIP you don‟t need a s**tload of colours
    54. 54. FOREGROUND AND BACKGROUNDCOLOURSCOOL COLOURS IN THE BACKGROUNDHOT COLOURS IN THE FOREGROUND
    55. 55. VISUAL DESIGNPRO TIP hot colours look s**thouse in the background
    56. 56. FONTS
    57. 57. VISUAL DESIGNHOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1(S**T) 1 5 (GROUSE)
    58. 58. 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
    59. 59. VISUAL DESIGNPRO TIP segoe is the s**t
    60. 60. BLAND APP? YOUR APP LOOKS GROUSE WITH A BEAUTIFUL PHOTO IN THE BACKGROUND
    61. 61. VISUAL DESIGNPRO TIP get a s**t-hot photo
    62. 62. RECAP
    63. 63. 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
    64. 64. WHATNEXT?
    65. 65. 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

    ×