Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smart First, Phones Later (V2 extended)

Smart First, Phones Later (V2 extended)

An extended version of the talk, given at the following conferences
May 16 2015 #WCUC15, Riga, Latvia
June 4 2015 #FILIVE, Las Vegas, USA

Tin Kadoic

May 16, 2015
Tweet

More Decks by Tin Kadoic

Other Decks in Design

Transcript

  1. @tinkadoic
    #smartfirst
    Jun 4 2015 #FILIVE
    smart first,

    phones later
    Taking Responsive a Step Further

    View Slide

  2. @tinkadoic
    #smartfirst
    Jun 4 2015 #FILIVE
    smart first,

    phones later
    Taking Responsive a Step Further

    View Slide

  3. @tinkadoic
    @fivenyc

    View Slide

  4. View Slide

  5. View Slide

  6. http://www.lukew.com/ff/entry.asp?1943

    View Slide

  7. View Slide

  8. @tinkadoic
    #smartfirst
    r
    rozo
    romeo

    View Slide

  9. @tinkadoic
    #smartfirst
    Please, can the application do the
    hard work, so I don't have to.

    View Slide

  10. @tinkadoic
    #smartfirst
    responsive
    /1

    View Slide

  11. @tinkadoic
    #smartfirst
    1,25 M
    1,000 M
    750 M
    500 M
    250 M
    0
    1995 1999 2003 2007 2011
    Smartphones
    & Tablets
    PCs

    View Slide

  12. @tinkadoic
    #smartfirst
    from desktop to mobile
    LukeW

    View Slide

  13. f-st.co/TbPSuLr

    View Slide

  14. @tinkadoic
    #smartfirst
    .lasvegas {
    float: left;
    margin-left: -17.0886076%;
    width: 14.556962%;
    }

    View Slide

  15. @tinkadoic
    #smartfirst
    responsive web design rwd
    = crafting sites to provide an optimal viewing experience
    1. A flexible, grid-based layout
    2. Flexible images and media
    3. Media queries

    View Slide

  16. View Slide

  17. screen
    size

    View Slide

  18. The web is 95% typography.

    View Slide

  19. @tinkadoic
    #smartfirst
    http://viljamis.com/blog/2012/typography/

    View Slide

  20. @tinkadoic
    #smartfirst

    View Slide

  21. @tinkadoic
    #smartfirst
    Century Expanded

    View Slide

  22. @tinkadoic
    #smartfirst
    iA Writer

    View Slide

  23. @tinkadoic
    #smartfirst
    http://webdesign.maratz.com/lab/responsivetypography/

    View Slide

  24. @tinkadoic
    #smartfirst

    View Slide

  25. @tinkadoic
    #smartfirst

    View Slide

  26. @tinkadoic
    #smartfirst
    http://www.staggeringbeauty.com/

    View Slide

  27. @tinkadoic
    #smartfirst
    The Rain Room

    View Slide

  28. School of Design Zagreb

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. @tinkadoic
    #smartfirst
    beyond
    rwd

    View Slide

  35. Designing responsive experiences rather than
    responsive sites, apps, software.

    View Slide

  36. @tinkadoic
    #smartfirst
    scenarios
    /2

    View Slide

  37. context
    location
    user needs
    history
    user
    patterns
    ecosystem
    brand
    people
    hardware
    time
    screen
    size
    body
    feelings content
    trends

    View Slide

  38. @tinkadoic
    #smartfirst
    1
    Responsive to
    location

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. @tinkadoic
    #smartfirst
    if !airplaneMode {
    showStandupReminder();
    }

    View Slide

  45. @tinkadoic
    #smartfirst
    2
    Responsive to
    user needs

    View Slide

  46. Foursquare

    View Slide

  47. @tinkadoic
    #smartfirst
    The data is already there.

    View Slide

  48. Density

    View Slide

  49. Product Hunt

    View Slide

  50. Timeful

    View Slide

  51. View Slide

  52. View Slide

  53. @tinkadoic
    #smartfirst
    3
    Responsive to
    context

    View Slide

  54. View Slide

  55. View Slide

  56. Google Now

    View Slide

  57. 1
    2
    3

    View Slide

  58. Now on Tap

    View Slide

  59. @tinkadoic
    #smartfirst
    4
    Responsive to
    history

    View Slide

  60. Runkeeper

    View Slide

  61. @tinkadoic
    #smartfirst
    5
    Responsive to
    people

    View Slide

  62. Nuzzel

    View Slide

  63. View Slide

  64. @tinkadoic
    #smartfirst
    6
    Responsive to
    ecosystem

    View Slide

  65. Gmail

    View Slide

  66. View Slide

  67. View Slide

  68. @tinkadoic
    #smartfirst
    7
    Responsive to
    user pattern

    View Slide

  69. iTunes

    View Slide

  70. Foursquare

    View Slide

  71. Croatia
    @tinkadoic
    Meaning full comment
    @tinkadoic location
    Meaning full comment
    @tinkadoic
    Existing
    Proposed
    Periscope

    View Slide

  72. DO by IFTTT

    View Slide

  73. @tinkadoic
    #smartfirst
    8
    Responsive to
    hardware

    View Slide

  74. Ministry of Sound

    View Slide

  75. View Slide

  76. @tinkadoic
    #smartfirst
    Amazon Dash

    View Slide

  77. Bret Victor

    View Slide

  78. @tinkadoic
    #smartfirst
    9
    Responsive to
    brand

    View Slide

  79. Timehop

    View Slide

  80. Sleepbot

    View Slide

  81. @tinkadoic
    #smartfirst
    10
    Responsive to
    time

    View Slide

  82. e.flux

    View Slide

  83. @tinkadoic
    #smartfirst
    11
    Responsive to
    emotion

    View Slide

  84. VS
    positive
    negative

    View Slide

  85. Swarm

    View Slide

  86. Citymapper

    View Slide

  87. @tinkadoic
    #smartfirst
    12
    Responsive to
    body

    View Slide

  88. View Slide

  89. Hangry

    View Slide

  90. View Slide

  91. @tinkadoic
    #smartfirst
    13
    Responsive to
    content

    View Slide

  92. Luka

    View Slide

  93. Biophilia / Polyfauna

    View Slide

  94. @tinkadoic
    #smartfirst
    14
    Responsive to
    trends

    View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. Yo B*****

    View Slide

  99. context
    location
    user needs
    history
    user
    patterns
    ecosystem
    brand
    people
    hardware
    time
    screen
    size
    body
    feelings content
    trends

    View Slide

  100. @tinkadoic
    #smartfirst
    ixd laws
    /3

    View Slide

  101. The Three Laws Of Robotics IxD

    View Slide

  102. @tinkadoic
    #smartfirst
    harm your work
    waste your time
    be humane
    /1
    /2
    /3

    View Slide

  103. @tinkadoic
    #smartfirst
    conclusion
    /5

    View Slide

  104. @tinkadoic
    #smartfirst
    Polite software has common sense.
    Polite software is responsive.

    View Slide

  105. momify
    the interface

    View Slide

  106. @tinkadoic
    #smartfirst
    responsive =
    Intelligent?

    View Slide

  107. @tinkadoic
    #smartfirst
    In a mobile-first world,

    can we finally start designing
    smart first and phones later?

    View Slide

  108. @tinkadoic
    #smartfirst
    highfive
    http://bit.ly/smartfirst-v2

    View Slide

  109. @tinkadoic
    #smartfirst
    Resources
    — http://uxdiogenes.com/blog/the-three-laws-of-interaction-design
    — http://www.amazon.com/gp/product/0201379376
    — http://wwword.com/2387/style/on-design/ways-of-seeing/
    — https://developers.google.com/webmasters/mobile-sites/get-started/
    — http://czechandslovakpavilion.cz/
    — http://www.trypap.com/
    — http://webdesign.maratz.com/lab/responsivetypography/realtime/
    — http://alistapart.com/column/font-hinting-and-the-future-of-responsive-typography/
    #figure2
    — http://viljamis.com/blog/2013/prototyping-responsive-typography/
    — http://informationarchitects.net/blog/the-web-is-all-about-typography-period/

    View Slide