0
designing    mobile   experiences            by Brian Fling                             MADE WITH LOVE IN SEATTLE BY
what does it take tocreate an amazingmobile experience?                MADE WITH LOVE IN SEATTLE BY
these experiences arenot made in Photoshop                MADE WITH LOVE IN SEATTLE BY
1965   MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
He never made anymoney from it.              MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
FAIL   MADE WITH LOVE IN SEATTLE BY
why didmy father fail?             MADE WITH LOVE IN SEATTLE BY
2000   MADE WITH LOVE IN SEATTLE BY
3DEF      MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
2Ways ofMakingMoney inMobile          MADE WITH LOVE IN SEATTLE BY
Ringtones.        MADE WITH LOVE IN SEATTLE BY
CarrierLogos.          MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Lost ourbacking & failed.             MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
why does innovativetechnology fail, whileothers succeed?                  MADE WITH LOVE IN SEATTLE BY
a mobile design & developmentfirm located in Fremonta few of our clients...
“We could build the best mobile app  ever made, but if our customers don’t  know why it’s good, then it could bea mobile d...
mobile is reallydamn hard...          ... it always has been                       MADE WITH LOVE IN SEATTLE BY
the craft of just creatinggreat mobile design isnot enough                    MADE WITH LOVE IN SEATTLE BY
ls                       tec      oa                          hn     sg                          ica es                   ...
increases                                          dispenses                       ls                                     ...
mobile is reallydamn hard.                   MADE WITH LOVE IN SEATTLE BY
examples           MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, ...
disrupt                   ls                                  tec                 oabusiness                              ...
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
example          MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
refresh product lines before they   become tired.happy with just 50%
a bold vision empowerspeople to cross thechasm together.                MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
“As long as a function is confined toa small area on a wafer, the amountof capacitance which must be drivenis distinctly li...
+ 9 years =              MADE WITH LOVE IN SEATTLE BY
1970           1980   1990     2000          2010                    2020computing          mainframe        pc’s         ...
1970           1980     1990          2000             2010                         2020computing          mainframe      ...
1970           1980     1990            2000             2010                         2020computing          mainframe    ...
1970           1980        1990               2000                2010                      2020computing          mainfra...
1970           1980           1990               2000                2010                      2020computing          main...
1970           1980           1990               2000                2010                      2020computing          main...
1970           1980           1990               2000                2010                      2020computing          main...
MOBILE BOOTCAMP            MADE WITH LOVE IN SEATTLE BY
‣ designed to get brands on the mobile path  quickly‣ it lasts from 1-5 days depending on the size  and scope of the proje...
disrupt                   ls                                  tec                 oabusiness                              ...
mobile is anentirely new breed.               MADE WITH LOVE IN SEATTLE BY
‣ Platform Aesthetic   ‣ Interactions‣ Many Resolutions     ‣ Motion‣ Pixels per Inch      ‣ Transitions‣ Orientation     ...
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Trans...
Phones areabout makingthe most ofthe moment,simple tasks,& context.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
think of your app as a     great book.  with a great beginning, middle and end                                  MADE WITH ...
Tablets areabout focus,consumption,simple tasks& portability.
examples           MADE WITH LOVE IN SEATTLE BY
JOINT VENTURE           MADE WITH LOVE IN SEATTLE BY
us                 themmobile experts        customer experts             the product                                     ...
‣ The BBC app was designed by pinch/zoom‣ BBC hired pinch/zoom based on their deep knowledge and over a  decade’s experien...
‣ iPad users are incredibly sophisticated‣ Users have an expectation of the “Apple Aesthetic” when it comes to  interactio...
disrupt                                         device                   ls                                  tec          ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
example          MADE WITH LOVE IN SEATTLE BY
p/z universalbuild a website that provided the bestpossible experience to the context.      iPad         iPhone        Des...
MADE WITH LOVE IN SEATTLE BY
1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework
a hexadecimal what?                MADE WITH LOVE IN SEATTLE BY
the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as...
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Asset Library                                   App Flow      Reference                                                   ...
CARMEN   agile product management                          MADE WITH LOVE IN SEATTLE BY
A Fully Agile Agency                                      From Start to FinishThis document contains confidential informat...
you can createinnovative technologythat succeeds.                MADE WITH LOVE IN SEATTLE BY
you can design mobileexperiences thatempower.                MADE WITH LOVE IN SEATTLE BY
ls                       tec      oa                          hn     sg                          ica es                   ...
ls                         tec        oa                            hn      sg                            ica   esTrust th...
mobiledesign.org
Get in TouchTHANK YOU!                 Find Out How We Can Help You.                                   Brian Fling        ...
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Designing mobile experiences
Upcoming SlideShare
Loading in...5
×

Designing mobile experiences

4,466

Published on

In this talk I talk about what it takes to create an amazing mobile experience, be innovative and include some tips and tricks we've learned at pinch/zoom to be successful.

Published in: Design, Business, Education
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,466
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
242
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

Transcript of "Designing mobile experiences"

  1. 1. designing mobile experiences by Brian Fling MADE WITH LOVE IN SEATTLE BY
  2. 2. what does it take tocreate an amazingmobile experience? MADE WITH LOVE IN SEATTLE BY
  3. 3. these experiences arenot made in Photoshop MADE WITH LOVE IN SEATTLE BY
  4. 4. 1965 MADE WITH LOVE IN SEATTLE BY
  5. 5. MADE WITH LOVE IN SEATTLE BY
  6. 6. MADE WITH LOVE IN SEATTLE BY
  7. 7. MADE WITH LOVE IN SEATTLE BY
  8. 8. MADE WITH LOVE IN SEATTLE BY
  9. 9. MADE WITH LOVE IN SEATTLE BY
  10. 10. MADE WITH LOVE IN SEATTLE BY
  11. 11. MADE WITH LOVE IN SEATTLE BY
  12. 12. MADE WITH LOVE IN SEATTLE BY
  13. 13. MADE WITH LOVE IN SEATTLE BY
  14. 14. MADE WITH LOVE IN SEATTLE BY
  15. 15. He never made anymoney from it. MADE WITH LOVE IN SEATTLE BY
  16. 16. MADE WITH LOVE IN SEATTLE BY
  17. 17. MADE WITH LOVE IN SEATTLE BY
  18. 18. MADE WITH LOVE IN SEATTLE BY
  19. 19. FAIL MADE WITH LOVE IN SEATTLE BY
  20. 20. why didmy father fail? MADE WITH LOVE IN SEATTLE BY
  21. 21. 2000 MADE WITH LOVE IN SEATTLE BY
  22. 22. 3DEF MADE WITH LOVE IN SEATTLE BY
  23. 23. MADE WITH LOVE IN SEATTLE BY
  24. 24. MADE WITH LOVE IN SEATTLE BY
  25. 25. MADE WITH LOVE IN SEATTLE BY
  26. 26. 2Ways ofMakingMoney inMobile MADE WITH LOVE IN SEATTLE BY
  27. 27. Ringtones. MADE WITH LOVE IN SEATTLE BY
  28. 28. CarrierLogos. MADE WITH LOVE IN SEATTLE BY
  29. 29. MADE WITH LOVE IN SEATTLE BY
  30. 30. MADE WITH LOVE IN SEATTLE BY
  31. 31. Lost ourbacking & failed. MADE WITH LOVE IN SEATTLE BY
  32. 32. MADE WITH LOVE IN SEATTLE BY
  33. 33. why does innovativetechnology fail, whileothers succeed? MADE WITH LOVE IN SEATTLE BY
  34. 34. a mobile design & developmentfirm located in Fremonta few of our clients...
  35. 35. “We could build the best mobile app ever made, but if our customers don’t know why it’s good, then it could bea mobile design & developmentfirm located in Fremont the worst app ever made. —Scott Dierdorfa few of our clients... @sdierdorf
  36. 36. mobile is reallydamn hard... ... it always has been MADE WITH LOVE IN SEATTLE BY
  37. 37. the craft of just creatinggreat mobile design isnot enough MADE WITH LOVE IN SEATTLE BY
  38. 38. ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals
  39. 39. increases dispenses ls tec oaproductivity soda hn sg ica es lg sweet sin spot oa bu ls user goals as easy to use
  40. 40. mobile is reallydamn hard. MADE WITH LOVE IN SEATTLE BY
  41. 41. examples MADE WITH LOVE IN SEATTLE BY
  42. 42. MADE WITH LOVE IN SEATTLE BY
  43. 43. MADE WITH LOVE IN SEATTLE BY
  44. 44. MADE WITH LOVE IN SEATTLE BY
  45. 45. MADE WITH LOVE IN SEATTLE BY
  46. 46. MADE WITH LOVE IN SEATTLE BY
  47. 47. Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, Content ProxySERVICES ScreenshotConcept, Strategy, Design & DevelopmentDESCRIPTION PlaceholderWe designed and developed an application for ADP customers tocomplete common tasks related to HR, payroll, and benefits in amobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.
  48. 48. disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals
  49. 49. MADE WITH LOVE IN SEATTLE BY
  50. 50. MADE WITH LOVE IN SEATTLE BY
  51. 51. MADE WITH LOVE IN SEATTLE BY
  52. 52. MADE WITH LOVE IN SEATTLE BY
  53. 53. MADE WITH LOVE IN SEATTLE BY
  54. 54. example MADE WITH LOVE IN SEATTLE BY
  55. 55. MADE WITH LOVE IN SEATTLE BY
  56. 56. refresh product lines before they become tired.happy with just 50%
  57. 57. a bold vision empowerspeople to cross thechasm together. MADE WITH LOVE IN SEATTLE BY
  58. 58. MADE WITH LOVE IN SEATTLE BY
  59. 59. “As long as a function is confined toa small area on a wafer, the amountof capacitance which must be drivenis distinctly limited.” —Gordon E. Moore April 19, 1965 MADE WITH LOVE IN SEATTLE BY
  60. 60. + 9 years = MADE WITH LOVE IN SEATTLE BY
  61. 61. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  62. 62. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  63. 63. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY
  64. 64. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY
  65. 65. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  66. 66. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  67. 67. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 HTML5 MADE WITH LOVE IN SEATTLE BY
  68. 68. MOBILE BOOTCAMP MADE WITH LOVE IN SEATTLE BY
  69. 69. ‣ designed to get brands on the mobile path quickly‣ it lasts from 1-5 days depending on the size and scope of the project‣ we create a shared vision of how mobile is meant to improve your business‣ we discover what you do well‣ we uncover areas where you can improve‣ we define what success will look like‣ we define how mobile will improve your bottom line‣ the result is a mobile strategy that you can start on today that will take you into tomorrow MADE WITH LOVE IN SEATTLE BY
  70. 70. disrupt ls tec oabusiness hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  71. 71. mobile is anentirely new breed. MADE WITH LOVE IN SEATTLE BY
  72. 72. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective ‣ Iconography‣ Dimension
  73. 73. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions
  74. 74. Phones areabout makingthe most ofthe moment,simple tasks,& context.
  75. 75. MADE WITH LOVE IN SEATTLE BY
  76. 76. MADE WITH LOVE IN SEATTLE BY
  77. 77. think of your app as a great book. with a great beginning, middle and end MADE WITH LOVE IN SEATTLE BY
  78. 78. Tablets areabout focus,consumption,simple tasks& portability.
  79. 79. examples MADE WITH LOVE IN SEATTLE BY
  80. 80. JOINT VENTURE MADE WITH LOVE IN SEATTLE BY
  81. 81. us themmobile experts customer experts the product MADE WITH LOVE IN SEATTLE BY
  82. 82. ‣ The BBC app was designed by pinch/zoom‣ BBC hired pinch/zoom based on their deep knowledge and over a decade’s experience of creating mobile experiences‣ pinch/zoom & BBC designed the iPad app as a new means to connect people to the wealth of BBC content‣ We worked with BBC to define strategy, pricing, wording, content, design, interactions and more‣ pinch/zoom created an interaction concept to test with 32 users between Dec 2010 and Feb 2011 in New York‣ New York-based usability firm, Creative Good facilitated the usability tests‣ We did rapid design iteration based on real-time user and client feedback
  83. 83. ‣ iPad users are incredibly sophisticated‣ Users have an expectation of the “Apple Aesthetic” when it comes to interaction and user experience. Pixel perfection is important.‣ Users prefer Need-driven over Marketing-driven Design‣ Users are in control of their iPad experience, and will remove, close, delete or leave anything they perceive as marketing or advertising activity.‣ Less is more‣ This is true when talking about animations or content on each screen. Users have an expectation of interactions but are impatient with too much animation.‣ Gestures Matter‣ Web metaphors, like scrolling are considered “cheap” or “lower quality.” Users prefer “native” metaphors like swiping.
  84. 84. disrupt device ls tec oabusiness constraints hn sg ica es lg sweet sin spot oa bu ls user goals empower users
  85. 85. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  86. 86. example MADE WITH LOVE IN SEATTLE BY
  87. 87. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website
  88. 88. MADE WITH LOVE IN SEATTLE BY
  89. 89. 1x HTML5 Markup1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts1x Hexadecimal CSS Framework
  90. 90. a hexadecimal what? MADE WITH LOVE IN SEATTLE BY
  91. 91. the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
  92. 92. the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.
  93. 93. MADE WITH LOVE IN SEATTLE BY
  94. 94. MADE WITH LOVE IN SEATTLE BY
  95. 95. MADE WITH LOVE IN SEATTLE BY
  96. 96. MADE WITH LOVE IN SEATTLE BY
  97. 97. MADE WITH LOVE IN SEATTLE BY
  98. 98. Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  99. 99. CARMEN agile product management MADE WITH LOVE IN SEATTLE BY
  100. 100. A Fully Agile Agency From Start to FinishThis document contains confidential information and is provided for private review only. Do not distribute without permission.
  101. 101. you can createinnovative technologythat succeeds. MADE WITH LOVE IN SEATTLE BY
  102. 102. you can design mobileexperiences thatempower. MADE WITH LOVE IN SEATTLE BY
  103. 103. ls tec oa hn sg ica es lg sweetsin spot oabu ls user goals MADE WITH LOVE IN SEATTLE BY
  104. 104. ls tec oa hn sg ica esTrust the Triangle! lg sweet sin spot oa bu ls user goals MADE WITH LOVE IN SEATTLE BY
  105. 105. mobiledesign.org
  106. 106. Get in TouchTHANK YOU! Find Out How We Can Help You. Brian Fling Founder & CEO@fling brian@pinchzoom.com +1 206 351-6060book mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×