Pro Yearly is on sale from $80 to $50! »

Unified Design:

Unified Design:

The nearly impossible act of unifying products across endless screens and countless platforms—regardless of where the experience starts, continues, and ends.

105561423ee019d76f409643dad0db22?s=128

Cameron Moll

May 17, 2016
Tweet

Transcript

  1. UNIFIED DESIGN @CAMERONMOLL Typefaces: Questa, Lulo Clean, Gotham, San Francisco,

    TVNord Condensed
  2. None
  3. None
  4. None
  5. The degree to which users successfully navigate new, unfamiliar experiences

    based on knowledge acquired in previous experiences. INTUITION
  6. None
  7. youtu.be/P0ukYf_xvgc

  8. Which of these is “TV”?

  9. The best interface is the one within reach. @CAMERONMOLL unified

    design
  10. 2007

  11. IPAD 1 IPAD MINI IPHONE 6+ IPHONE 5 IPHONE 4

    IPHONE 2G WATCH “Mobile” “Tablet”
  12. RWD

  13. screen size be like

  14. Source: d.pr/dUef

  15. None
  16. T typestructures.com

  17. None
  18. None
  19. T typestructures.com

  20. None
  21. None
  22. None
  23. Top banner Native app offer Bottom banner Content area

  24. None
  25. 49% of multi-screen users email themselves a link for continuing

    an activity on another device. Source: Google (d.pr/QBEp) @CAMERONMOLL unified design
  26. None
  27. mailtoself.com

  28. None
  29. Responsive web design ends where the browser ends. @CAMERONMOLL unified

    design
  30. None
  31. “MOBILE”

  32. NOUN?

  33. None
  34. None
  35. VERB?

  36. None
  37. None
  38. @jglovier

  39. ADJECTIVE?

  40. Photo Credit: d.pr/AoJa

  41. “MOBILE” Which parts of speech do we mean?

  42. We understood mobile just to be another screen.” “ JOHN

    DONAHOE
  43. The nouns, verbs, and adjectives of all screens are converging.

    @CAMERONMOLL unified design
  44. SMALLer screen “ ” @CAMERONMOLL unified design

  45. None
  46. The nouns, verbs, and adjectives of all screens are converging.

    interfaces @CAMERONMOLL unified design
  47. Your audience wants unified experiences. All you have to do

    is give it to them. @CAMERONMOLL unified design
  48. None
  49. None
  50. Facebook Ads

  51. OS X App Browser

  52. RWDRD RESPONSIVE DESIGN

  53. UD UNIFIED DESIGN

  54. Crafting a unified, cohesive experience regardless of where the experience

    begins, continues, and ends. UNIFIED DESIGN @CAMERONMOLL unified design
  55. None
  56. 1. Form and Function 2. Data Symmetry

  57. FUNCTION > FORM Right?

  58. None
  59. Coke bottle? (form unified)

  60. FUNCTION > FORM k ✌

  61. AMAZON SCREENS

  62. None
  63. Gmail ‘app’ on a Nokia 6680 (in 2007!)

  64. DATA SYMMETRY

  65. More than 40 percent of all online U.S. users start

    an activity on one device and finish on another. clickz.com/clickz/news/2333087/switching-between-devices-normal-for-40-of-us-web-users-facebook-study
  66. None
  67. None
  68. None
  69. Browser App

  70. Browser App

  71. best prac tices

  72. Unify your internet presence, not just your web presence. 1

    @CAMERONMOLL unified design
  73. None
  74. #mobilefirst #unit …but begin with the core

  75. Treat every facet of the user experience as a contributor

    to unity. 2 @CAMERONMOLL unified design
  76. None
  77. Branding is autocratic. Unified Design is duocratic. @CAMERONMOLL unified design

  78. Unified Design is the next frontier of branding. @CAMERONMOLL unified

    design
  79. Consider using web views when developing your native app. 3

    @CAMERONMOLL unified design
  80. “You’re already using web apps in native wrappers without even

    noticing it…. Web vs. native doesn’t matter anymore.” ignco.de/628
  81. None
  82. Unify actions, not just content. 4 @CAMERONMOLL unified design

  83. Sync verbs, not just nouns.” “ Josh Clark @CAMERONMOLL unified

    design
  84. None
  85. Store session data in the cloud, not locally. 5 @CAMERONMOLL

    unified design
  86. Hi Authentic Jobs, I have a job listing in my

    cart. However, when my boss tried to pay for it, he can’t see it. We’re using the same login.
  87. Replace ‘click’ with tap or press. 6 @CAMERONMOLL unified design

  88. None
  89. None
  90. None
  91. Replace ‘mobile’ with small, smallish, etc. 7 @CAMERONMOLL unified design

  92. None
  93. Eliminate big screen bloat. 8 @CAMERONMOLL unified design

  94. None
  95. authenticjobs.com

  96. None
  97. 1 TAP 3 TAPS CONTACT SELLER

  98. 1 TAP 7 TAPS GENIUS BAR RESERVATION

  99. Product unity? Platform unity?
 Both are important. 9 @CAMERONMOLL unified

    design
  100. None
  101. None
  102. None
  103. The best interface is the one within reach. @CAMERONMOLL unified

    design
  104. assumes every interface is the one within reach. The best

    user experience @CAMERONMOLL unified design
  105. THANK YOU @CAMERONMOLL Typefaces: Questa, Lulo Clean, Gotham, San Francisco,

    TVNord Condensed