Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1 @tinkadoic

Slide 3

Slide 3 text

ljeto 85’

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Turbo Pascal 7.0 h p://www.flickr.com/photos/66011859@N04/7013119175/

Slide 6

Slide 6 text

prvi posao

Slide 7

Slide 7 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 8

Slide 8 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 9

Slide 9 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 10

Slide 10 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 11

Slide 11 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 12

Slide 12 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 13

Slide 13 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 14

Slide 14 text

MIOC FER Studij dizajna Brlog MCWC Parsons school of Design Danas

Slide 15

Slide 15 text

što sam naučio

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Stvari nisu uvijek onakve kakvima se čine

Slide 18

Slide 18 text

Uvijek budite prisutni online

Slide 19

Slide 19 text

2 interaction design

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

About Face 3 — The essentials of Interaction Design

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

About Face 3 — The essentials of Interaction Design

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

3 dizajn kao alat

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Hrvatska Turistička zajednica, Sandro Dujmenović

Slide 53

Slide 53 text

Hrvatska Turistička zajednica, Sandro Dujmenović

Slide 54

Slide 54 text

Hrvatska Turistička zajednica, Sandro Dujmenović

Slide 55

Slide 55 text

Hrvatska Turistička zajednica, Sandro Dujmenović

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Honey™ -

Slide 58

Slide 58 text

Basecamp h p://www.basecamp.com

Slide 59

Slide 59 text

Basecamp h p://www.basecamp.com

Slide 60

Slide 60 text

Basecamp h p://www.basecamp.com

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

wasHere h p://washere.brlog.biz

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Kaminata, Iva Hrvatin

Slide 66

Slide 66 text

Kaminata, Iva Hrvatin

Slide 67

Slide 67 text

Web gaming — Studena, Brlog — Axon, Preloaded

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Axon

Slide 71

Slide 71 text

Axon

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

4 dizajn kao inspiracija

Slide 78

Slide 78 text

nove metode otvaraju mogućnost za nove ideje

Slide 79

Slide 79 text

Kickstarter h p://www.kickstarter.com

Slide 80

Slide 80 text

Studio Neat

Slide 81

Slide 81 text

Studio Neat

Slide 82

Slide 82 text

Makey Makey

Slide 83

Slide 83 text

Makey Makey

Slide 84

Slide 84 text

inspiracija u dizajnu kao benchmark za dobre stranice

Slide 85

Slide 85 text

Styleboost h p://styleboost.com

Slide 86

Slide 86 text

dimenzija vremena, tj. kako se digitalni proizvod koristi

Slide 87

Slide 87 text

Hoverstat.es h p://hoverstat.es

Slide 88

Slide 88 text

Hoverstat.es h p://hoverstat.es

Slide 89

Slide 89 text

mobilne aplikacije mogu biti dobro oblikovanje

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

5 dizajn kao način razmišljanja

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

kako fokusom i redukcijom dolazimo do novih pristupa i proizvoda

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

konstantna edukacija kao ključ uspjeha

Slide 105

Slide 105 text

ALA h p://www.alistapart.com

Slide 106

Slide 106 text

ALA h p://www.alistapart.com

Slide 107

Slide 107 text

ALA h p://www.alistapart.com

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

6 budućnost

Slide 112

Slide 112 text

budućnost je uzbudljiva

Slide 113

Slide 113 text

keyword responsive

Slide 114

Slide 114 text

Responsive layout h p://bostonglobe.com

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

keyword kinect

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

keyword 3d printing

Slide 121

Slide 121 text

Shapeways h p://shapeways.com

Slide 122

Slide 122 text

Shapeways h p://shapeways.com

Slide 123

Slide 123 text

keyword arduino

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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