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 full-size slide

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

    phones later
    Taking Responsive a Step Further

    View full-size slide

  3. @tinkadoic
    @fivenyc

    View full-size slide

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

    View full-size slide

  5. @tinkadoic
    #smartfirst
    r
    rozo
    romeo

    View full-size slide

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

    View full-size slide

  7. @tinkadoic
    #smartfirst
    responsive
    /1

    View full-size slide

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

    View full-size slide

  9. @tinkadoic
    #smartfirst
    from desktop to mobile
    LukeW

    View full-size slide

  10. f-st.co/TbPSuLr

    View full-size slide

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

    View full-size slide

  12. @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 full-size slide

  13. The web is 95% typography.

    View full-size slide

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

    View full-size slide

  15. @tinkadoic
    #smartfirst

    View full-size slide

  16. @tinkadoic
    #smartfirst
    Century Expanded

    View full-size slide

  17. @tinkadoic
    #smartfirst
    iA Writer

    View full-size slide

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

    View full-size slide

  19. @tinkadoic
    #smartfirst

    View full-size slide

  20. @tinkadoic
    #smartfirst

    View full-size slide

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

    View full-size slide

  22. @tinkadoic
    #smartfirst
    The Rain Room

    View full-size slide

  23. School of Design Zagreb

    View full-size slide

  24. @tinkadoic
    #smartfirst
    beyond
    rwd

    View full-size slide

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

    View full-size slide

  26. @tinkadoic
    #smartfirst
    scenarios
    /2

    View full-size slide

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

    View full-size slide

  28. @tinkadoic
    #smartfirst
    1
    Responsive to
    location

    View full-size slide

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

    View full-size slide

  30. @tinkadoic
    #smartfirst
    2
    Responsive to
    user needs

    View full-size slide

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

    View full-size slide

  32. Product Hunt

    View full-size slide

  33. @tinkadoic
    #smartfirst
    3
    Responsive to
    context

    View full-size slide

  34. @tinkadoic
    #smartfirst
    4
    Responsive to
    history

    View full-size slide

  35. @tinkadoic
    #smartfirst
    5
    Responsive to
    people

    View full-size slide

  36. @tinkadoic
    #smartfirst
    6
    Responsive to
    ecosystem

    View full-size slide

  37. @tinkadoic
    #smartfirst
    7
    Responsive to
    user pattern

    View full-size slide

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

    View full-size slide

  39. @tinkadoic
    #smartfirst
    8
    Responsive to
    hardware

    View full-size slide

  40. Ministry of Sound

    View full-size slide

  41. @tinkadoic
    #smartfirst
    Amazon Dash

    View full-size slide

  42. @tinkadoic
    #smartfirst
    9
    Responsive to
    brand

    View full-size slide

  43. @tinkadoic
    #smartfirst
    10
    Responsive to
    time

    View full-size slide

  44. @tinkadoic
    #smartfirst
    11
    Responsive to
    emotion

    View full-size slide

  45. VS
    positive
    negative

    View full-size slide

  46. @tinkadoic
    #smartfirst
    12
    Responsive to
    body

    View full-size slide

  47. @tinkadoic
    #smartfirst
    13
    Responsive to
    content

    View full-size slide

  48. Biophilia / Polyfauna

    View full-size slide

  49. @tinkadoic
    #smartfirst
    14
    Responsive to
    trends

    View full-size slide

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

    View full-size slide

  51. @tinkadoic
    #smartfirst
    ixd laws
    /3

    View full-size slide

  52. The Three Laws Of Robotics IxD

    View full-size slide

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

    View full-size slide

  54. @tinkadoic
    #smartfirst
    conclusion
    /5

    View full-size slide

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

    View full-size slide

  56. momify
    the interface

    View full-size slide

  57. @tinkadoic
    #smartfirst
    responsive =
    Intelligent?

    View full-size slide

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

    can we finally start designing
    smart first and phones later?

    View full-size slide

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

    View full-size slide

  60. @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 full-size slide