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

[HR] Interakcije 101

Tin Kadoic
November 05, 2012

[HR] Interakcije 101

Uvod u dizajn interakcije kroz tri točke: dizajn kao alat, dizajn kao inspiracija i dizajn kao način razmišljanja.

"Prazni" slideovi prikazuju video materijale.

Tin Kadoic

November 05, 2012
Tweet

More Decks by Tin Kadoic

Other Decks in Design

Transcript

  1. Uvod u oblikovanje interaktivnih medija i korisničkih iskustava
    Tin Kadoić
    FER 05.11.2012.
    Interakcije 101

    View Slide

  2. 1 @tinkadoic

    View Slide

  3. ljeto 85’

    View Slide

  4. LEGO h p://www.flickr.com/photos/kwl/3497587443/

    View Slide

  5. Turbo Pascal 7.0 h p://www.flickr.com/photos/[email protected]/7013119175/

    View Slide

  6. prvi posao

    View Slide

  7. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  8. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  9. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  10. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  11. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  12. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  13. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  14. MIOC FER
    Studij dizajna
    Brlog
    MCWC
    Parsons school of Design
    Danas

    View Slide

  15. što sam naučio

    View Slide

  16. Dizajn je strast, a ne profesija
    Andy Rutledge, Design professionalism

    View Slide

  17. Stvari nisu uvijek onakve
    kakvima se čine

    View Slide

  18. Uvijek budite prisutni online

    View Slide

  19. 2 interaction
    design

    View Slide

  20. 1980-tih Moggridge i Verplank,
    prvi puta koriste termin
    interaction design, tj. IxD

    View Slide

  21. termin se referira na
    proizvode industrijskog
    dizajna koji sadrže so ware

    View Slide

  22. — 1990 Royal College of Art
    — 2001 Institut IVREA
    — 2007 CIID

    View Slide

  23. Danas se predaje diljem svijeta
    — Zagreb, Studij Dizajna
    — Split, UMAS

    View Slide

  24. About Face 3 — The essentials of Interaction Design

    View Slide

  25. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    About Face 3 — The essentials of Interaction Design

    View Slide

  26. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    Sadržaj
    informacijski arhitekti
    copywriteri
    animatori
    dizajneri zvuka
    About Face 3 — The essentials of Interaction Design

    View Slide

  27. Forma
    vizualne komunikacije
    industrijsko oblikovanje
    Sadržaj
    Ponašanje
    informacijski arhitekti
    copywriteri
    animatori
    dizajneri zvuka
    Dizajneri
    interakcija
    About Face 3 — The essentials of Interaction Design

    View Slide

  28. the guiding principle of
    interactive media is not
    narrative — it is behaviour
    Khoi Vinh

    View Slide

  29. About Face 3 — The essentials of Interaction Design

    View Slide

  30. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici

    View Slide

  31. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici
    ...

    View Slide

  32. About Face 3 — The essentials of Interaction Design
    Build / Test
    Programeri
    Proizvod
    Korisnici
    ...
    Iniciraju
    Menadžeri
    Dizajn
    Dizajneri
    Build
    Programeri
    Test
    QA
    Proizvod
    Korisnici

    View Slide

  33. 3 dizajn
    kao alat

    View Slide

  34. Web
    — ORYX Grupa, Brlog
    — USA Today, FI
    — HTZ, SD

    View Slide

  35. ORYX Grupa h p://www.oryx-grupa.hr
    2011. Rebranding AMC-a
    ORYX Slobodno se zabavi

    View Slide

  36. ORYX Grupa — Zatečeno stanje h p://www.oryx-grupa.hr

    View Slide

  37. ORYX Grupa — IA h p://www.oryx-grupa.hr
    ORYX-GRUPA.HR + + +
    ORYX FB
    ORYX TW
    ORYX YT
    ORYX FL
    ASIS TW AŠ FB
    ASISTENCIJA RENT A CAR AUTOŠKOLA CENTAR ZA S V OSIGURANJE STANICA ZA TP
    DIGITALNI EKOSUSTAV 2011 ©BRLOG
    MAGAZIN
    1
    PRESS KUTAK
    2
    O NAMA
    4
    USLUGE
    3
    KONTAKT
    5
    USLUGE
    1
    FLOTA
    2
    POSLOVNICE
    3
    PRAVILA / PODRŠKA
    4
    TURISTIČKE INFO
    5
    O NAMA
    6
    KONTAKT
    7
    PREDNOSTI
    1
    CIJENE
    3
    ONLINE AŠ
    4
    USLUGE
    2
    TRENING
    1
    PO VOZILU
    .1
    PRISTUP
    .1
    VOZILA
    .2
    NAJAM VOZILA
    .1
    TRANSFER
    .2
    Lease 4 bizz
    .3
    CARGO
    .4
    INOZEMSTVO
    .7
    LIMO
    .6
    DODATNA OP
    .8
    AKTUALNO
    .9
    USLUGE
    .1
    UVOD
    .0
    UČLANI SE
    .5
    KATEGORIJE
    .1
    TAGOVI
    .2
    O NAMA
    .1
    GRUPACIJA
    .2
    KARIJERA
    .3
    PAKETI
    .2
    UŠTEDA
    .4
    CIJENE
    .3
    USLUGE
    .1
    UVOD
    .0
    UČLANI SE
    .5
    PAKETI
    .2
    UŠTEDA
    .4
    CIJENE
    .3
    TWITTER FEED
    .1
    HAC VIJESTI
    .2
    KAMERE
    .3
    VRIJEME
    .4
    KORISNO
    .5
    MAPA
    .1
    ZA TURISTE
    .2
    STANJE U P
    .3
    UVJETI KORIŠ
    .1
    FAQ
    .2
    FEEDBACK
    .3
    ZAPOSLENICI
    .3
    PRAĆENJE
    .1
    ISPITI
    .2
    UPIS
    .3
    NOVI VOZAČI
    .1
    POSTOJEĆI V
    .2
    KORPORATIVNE
    .3
    DODANA VRIJ
    .4
    GDJE SMO
    .5
    OSOBA
    .1
    IMOVINE
    .2
    VOZILA
    .3
    TRANSPORTA
    .4
    ODGOVOR.
    .5
    ALLIANZ
    .1
    CO
    .2
    EUROHERC
    .3
    PO TIPU
    .2
    ŠTO NUDIMO
    .1
    REF. LISTA
    .2
    EVENTI
    2
    CIJENE
    3
    O NAMA
    4
    KONTAKT
    5
    OSIGURANJE
    2
    KALKULATOR
    1
    PARTNERI
    3
    FAQ
    4
    OSIGURANJE
    2
    PRIPREMA
    3
    KALKULATOR
    1
    GDJE SMO
    4
    O NAMA
    5
    KONTAKT
    6
    ZABAVA
    5
    O NAMA
    6
    KONTAKT
    7
    O NAMA
    5
    KONTAKT
    6
    ČLANSTVO
    1
    POMOĆ NA CESTI
    2
    POMOĆ NA MORU
    3
    KARTA
    4
    STANJE U PROMETU
    5
    O NAMA
    6
    KONTAKT
    7
    KORISNICI
    ?
    - MOTOCIKLI
    - OSOBNI I KOMBIJI
    - KAMIJONI I AUTOBUSI
    * GENERALNO ŠTO JE OSIGURANJE +
    ODABIR TIPOVA OSIGURANJA
    - TSV
    - EKO DRIVE
    - POSEBNI TRENINZI
    * PAMETAN WIZARD
    KALKULATOR SVIH CIJENA
    * PAMETAN WIZARD ZA ODABIR
    VRSTE I PAKETA ASISTENCIJE.
    DOLAZIMO DO SADRŽAJA IZ
    KATEGORIJE 2 ILI 3
    * SVI ČLANCI SE KROZ
    TAGIRANJE I POVEZANE
    USLUGE PRIKAZUJU NA SVIM
    SESTRINJSKIM PORTALIMA
    NOVOSTI VEZANE UZ ORYX
    GRUPU I PRESS OBJAVE
    * SVI ČLANCI SE KROZ
    TAGIRANJE I POVEZANE
    USLUGE PRIKAZUJU NA SVIM
    SESTRINJSKIM PORTALIMA
    * INTERAKTIVNA LISTA SVIH
    REFERENCI SA GALERIJAMA
    KOD NEKIH DOGAĐAJA
    * USPOREDNE CIJENE SVIH
    TRENINGA ZA VOŽNJU

    View Slide

  38. ORYX Grupa — WF h p://www.oryx-grupa.hr
    oryx branding
    oryx grupa / asistencija / rentacar / autoškola / centarsv / osiguranje / stanica tp
    magazin - press kutak - usluge - o nama - kontakt
    search (+autocomplete)
    social
    button
    fotografija
    ili piktogram
    izdvojeni clanak / fotografija
    nekoliko izdvojenih clanaka - 1 - 2- 3
    kategorija
    naziv clanka
    usluge
    najviše / zadnje komentirane
    link na detaljno stanje
    prognoza
    live zadnje stanje na cesti
    (ili zadnji tweet)
    izdvojena usluga
    saznaj više
    karta
    kratki uvod (”lead”)
    kratki uvod (”lead”)
    saznaj više broj komentara ikone za vezane usluge
    1 tema naslov
    naše usluge
    novi vozači postojeći korporativno jednom
    traffic info
    hr

    View Slide

  39. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  40. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  41. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  42. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  43. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  44. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  45. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  46. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  47. ORYX Grupa h p://www.oryx-grupa.hr

    View Slide

  48. USA Today h p://www.usatoday.com

    View Slide

  49. USA Today h p://www.usatoday.com

    View Slide

  50. USA Today h p://www.usatoday.com

    View Slide

  51. USA Today h p://www.usatoday.com

    View Slide

  52. Hrvatska Turistička zajednica, Sandro Dujmenović

    View Slide

  53. Hrvatska Turistička zajednica, Sandro Dujmenović

    View Slide

  54. Hrvatska Turistička zajednica, Sandro Dujmenović

    View Slide

  55. Hrvatska Turistička zajednica, Sandro Dujmenović

    View Slide

  56. Web aplikacija
    — Honey™, Brlog
    — Basecamp, 37Signals

    View Slide

  57. Honey™ -

    View Slide

  58. Basecamp h p://www.basecamp.com

    View Slide

  59. Basecamp h p://www.basecamp.com

    View Slide

  60. Basecamp h p://www.basecamp.com

    View Slide

  61. Mobilna aplikacija
    — wasHere, Brlog
    — Clear, Realmac
    — Kaminata, SD

    View Slide

  62. wasHere h p://washere.brlog.biz

    View Slide

  63. Clear h p://www.realmacso ware.com/clear/

    View Slide

  64. Clear h p://www.realmacso ware.com/clear/

    View Slide

  65. Kaminata, Iva Hrvatin

    View Slide

  66. Kaminata, Iva Hrvatin

    View Slide

  67. Web gaming
    — Studena, Brlog
    — Axon, Preloaded

    View Slide

  68. Studena te vodi u London h p://brlog.biz/studena-case-study

    View Slide

  69. Studena te vodi u London h p://brlog.biz/studena-case-study

    View Slide

  70. Axon

    View Slide

  71. Axon

    View Slide

  72. Prostorna instalacija
    — B&Ž izložba, Brlog
    — Walk the light, Cinimod

    View Slide

  73. B&Ž izložba h p://www.izlozba.biz

    View Slide

  74. B&Ž izložba h p://www.izlozba.biz

    View Slide

  75. Walk The Light h p://cinimodstudio.com/project/walk-the-light-at-the-va/

    View Slide

  76. Walk The Light h p://cinimodstudio.com/project/walk-the-light-at-the-va/

    View Slide

  77. 4 dizajn kao
    inspiracija

    View Slide

  78. nove metode otvaraju
    mogućnost za nove ideje

    View Slide

  79. Kickstarter h p://www.kickstarter.com

    View Slide

  80. Studio Neat

    View Slide

  81. Studio Neat

    View Slide

  82. Makey Makey

    View Slide

  83. Makey Makey

    View Slide

  84. inspiracija u dizajnu kao
    benchmark za dobre stranice

    View Slide

  85. Styleboost h p://styleboost.com

    View Slide

  86. dimenzija vremena, tj. kako
    se digitalni proizvod koristi

    View Slide

  87. Hoverstat.es h p://hoverstat.es

    View Slide

  88. Hoverstat.es h p://hoverstat.es

    View Slide

  89. mobilne aplikacije mogu
    biti dobro oblikovanje

    View Slide

  90. Android niceties h p://androidniceties.tumblr.com

    View Slide

  91. 5 dizajn
    kao način
    razmišljanja

    View Slide

  92. zašto stvaratelji moraju
    razmišljati poput računala?

    View Slide

  93. Creators need to be able to
    see what they are doing.
    Bret Victor

    View Slide

  94. Scrubbing calculator
    vs
    60 + 140 + (8 x 20) + (9 x y) = 768
    h p://worrydream.com/ScrubbingCalculator

    View Slide

  95. Scrubbing calculator
    vs
    60 + 140 + (8 x 20) + (9 x y) = 768
    h p://worrydream.com/ScrubbingCalculator

    View Slide

  96. Dynamic pictures h p://worrydream.com/DynamicPicturesMotivation/

    View Slide

  97. Dynamic pictures h p://worrydream.com/DynamicPicturesMotivation/

    View Slide

  98. kako fokusom i redukcijom
    dolazimo do novih pristupa
    i proizvoda

    View Slide

  99. ... it is simplicity that is
    difficult to make.
    Bertholdt Brecht

    View Slide

  100. IA writer h p://www.iawriter.com

    View Slide

  101. IA writer h p://www.iawriter.com

    View Slide

  102. NYT h p://andyrutledge.com/news-redux.php

    View Slide

  103. NYT h p://andyrutledge.com/news-redux.php

    View Slide

  104. konstantna edukacija
    kao ključ uspjeha

    View Slide

  105. ALA h p://www.alistapart.com

    View Slide

  106. ALA h p://www.alistapart.com

    View Slide

  107. ALA h p://www.alistapart.com

    View Slide

  108. A book apart h p://www.abookapart.com

    View Slide

  109. ReWork h p://37signals.com/rework
    If given a choice between investing in someone who has read
    REWORK or has an MBA, I’m investing in REWORK every time.
    A must read for every entrepreneur.
    Mark Cuban, co-founder HDNet, owner of the Dallas Mavericks
    rework

    View Slide

  110. FFWD pro 2012 h p://2012.ffwd.pro/

    View Slide

  111. 6 budućnost

    View Slide

  112. budućnost je uzbudljiva

    View Slide

  113. keyword responsive

    View Slide

  114. Responsive layout h p://bostonglobe.com

    View Slide

  115. Responsive typography h p://informationarchitects.net/blog/responsive-typography/

    View Slide

  116. Responsive images h p://www.teehanlax.com/blog/readability-ipad-retina/

    View Slide

  117. keyword kinect

    View Slide

  118. V motion h ps://vimeo.com/45417241

    View Slide

  119. V motion h ps://vimeo.com/45417241

    View Slide

  120. keyword 3d printing

    View Slide

  121. Shapeways h p://shapeways.com

    View Slide

  122. Shapeways h p://shapeways.com

    View Slide

  123. keyword arduino

    View Slide

  124. Bakertweets, Poke London h p://bakertweets.com

    View Slide

  125. Bakertweets, Poke London h p://bakertweets.com

    View Slide

  126. Make something you love,
    and others will love it too.
    Simon Collins

    View Slide

  127. * hvala
    @tinkadoic
    h p://brlog.biz
    h p://studijdizajna.com

    View Slide