![Page 1: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/1.jpg)
Æstetik og funktionalitet – websiders udvikling historisk setAndreas Johannsen • Socialsquare16. november 2009Organisationen Danske Museer
![Page 2: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/2.jpg)
Hej, jeg er Andreas Johannsen
2
• Direktør og konsulent i Socialsquare• Ekspert i sociale medier• Dunkel fortid i CMS-branchen• www.socialsquare.dk • twitter.com/andjohan• [email protected] • +45 2620 3221
![Page 3: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/3.jpg)
3
![Page 4: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/4.jpg)
Hvad er et website?
4
![Page 5: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/5.jpg)
Vores opfattelse 5
![Page 6: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/6.jpg)
Internettet som en motorvej 6
![Page 7: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/7.jpg)
Internettet som et bibliotek 7
![Page 8: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/8.jpg)
Hjemmesiden som et domicil 8
![Page 9: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/9.jpg)
Deres opfattelse 9
![Page 10: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/10.jpg)
Internettet som et (parallelt) sted 10
![Page 11: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/11.jpg)
Internettet som marked 11
![Page 12: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/12.jpg)
Sitet som en begivenhed 12
![Page 13: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/13.jpg)
Hvad er design?
13
![Page 14: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/14.jpg)
Typer af design for websider
14
• Grafisk design• Informationsdesign• Systemdesign• Oplevelsesdesign• Socialt design
![Page 15: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/15.jpg)
15Grafisk design
![Page 16: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/16.jpg)
Informationsdesign 16
![Page 17: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/17.jpg)
Systemdesign 17
![Page 18: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/18.jpg)
Brugeroplevelsesdesign 18
![Page 19: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/19.jpg)
Socialt design 19
![Page 20: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/20.jpg)
20
![Page 21: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/21.jpg)
21
Designhistorien kort og æstetisk
![Page 22: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/22.jpg)
22
![Page 23: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/23.jpg)
• Fra tekst til grafik• Det kommercielle indtog• Dotcom-krise• Mediekonvergens• Web 2.0
![Page 24: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/24.jpg)
Tekst
24
![Page 25: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/25.jpg)
I begyndelsen var nørden...Begyndelsen -> midt 90'erne
• Lavet af autodidakte entusiaster, der ikke mødte forståelse eller opmærksomhed
• Ren tekst eller med meget simpel grafik• Nærmest ingen formateringsmuligheder• Ingen værktøjer andre end rå teksteditor
25
![Page 26: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/26.jpg)
26
![Page 27: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/27.jpg)
Kommercialisering
27
![Page 28: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/28.jpg)
Dotcom
28
![Page 29: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/29.jpg)
Dotcom
28
![Page 30: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/30.jpg)
Dotcom
28
![Page 31: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/31.jpg)
Der er penge i det!Midt 90'erne -> 2000
• Laves af ny branche: Webbureauer og reklamebureauers interaktive afdelinger
• Alt udfordres: Det er et nye medie, hvor ingen af de gamle regler gælder
• Der eksperimenteres med alt ofte på bekostning af brugerne
• Alle skal have det. Ingen ved hvorfor.• Visuelle værktøjer og CMS vinder frem
29
![Page 32: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/32.jpg)
30
![Page 33: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/33.jpg)
31
![Page 34: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/34.jpg)
Mediekonvergens
32
![Page 35: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/35.jpg)
Mediekonvergens
32
![Page 36: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/36.jpg)
Mediekonvergens
32
![Page 37: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/37.jpg)
MediekonvergensPost dotcom -> ...
• Eksisterende designere overtager web• Medievirksomhederne kommer• Eksisterende medier bruger web som en ny
kanal for eksisterende indhold, der bare reformateres
• Indholdet bliver ofte vigtigere end designet
33
![Page 38: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/38.jpg)
Web 2.0
34
![Page 39: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/39.jpg)
Web 2.0
34
![Page 40: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/40.jpg)
Web 2.0
34
![Page 41: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/41.jpg)
Web 2.0
34
![Page 42: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/42.jpg)
Web 2.0
34
![Page 43: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/43.jpg)
Web 2.0/det sociale web2004 -> ...
• Web designes (æstetisk) af eksisterende designere/grafikere
• Bestilles af eksisterende forretning• Æstetisk nær sammenhæng med øvrige
kommunikation• Brugerne kommer• Nettet faciliterer mødet mellem mennesker• Den sociale oplevelse bliver den vigtigste• Værktøjerne demokratiseres og gøres enkle 35
![Page 44: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/44.jpg)
36
![Page 45: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/45.jpg)
Hvem?
37
![Page 46: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/46.jpg)
De tidlige sites var lavet af glade amatører i hånden.
I begyndelsen var nørden
![Page 47: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/47.jpg)
Sites blev lavet af de nye webbureauer og reklamebureauernes interaktive afdelinger. Visuelle og mere avancerede værktøjer. Siden CMS.
Så opdagede nogen, at der var penge i det
![Page 48: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/48.jpg)
Nu er vi tilbage ved amatørerneInternettet designes i dag af dig og mig. De mest udbredte værktøjer er blogs og simple CMS'er, som alle kan bruge.
![Page 49: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/49.jpg)
41
Gerry McGovern (2003):"The hippie period is over"
![Page 50: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/50.jpg)
42
![Page 52: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/52.jpg)
44
Hippiernes "power to the people"er gået i opfyldelse
1971 2006
![Page 53: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/53.jpg)
Modtageren er også designer
45
![Page 54: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/54.jpg)
XML/RSS(og det semantiske web)
![Page 55: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/55.jpg)
47
![Page 56: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/56.jpg)
48
![Page 57: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/57.jpg)
![Page 58: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/58.jpg)
![Page 59: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/59.jpg)
Brugeren som informations-DJ 51
![Page 60: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/60.jpg)
Og når afsenderen prøver at styre modtagerens teknologi...
![Page 61: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/61.jpg)
![Page 62: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/62.jpg)
![Page 63: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/63.jpg)
![Page 64: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/64.jpg)
![Page 65: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/65.jpg)
![Page 66: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/66.jpg)
![Page 67: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/67.jpg)
![Page 68: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/68.jpg)
![Page 69: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/69.jpg)
61
![Page 70: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/70.jpg)
Betyder design reelt noget i dag?Æstetisk design nok mindre — men design for deltagelse og for deling er altafgørende!
![Page 71: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/71.jpg)
Et veldesignet site?
63
![Page 72: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/72.jpg)
Eller kan man tænke sig, at beslutningen tages et andet sted?Brugere spørger deres venner, hvad der er interessant, hvad der sker, hvor man skal gå hen, hvad man skal købe etc
![Page 73: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/73.jpg)
65
![Page 74: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/74.jpg)
66
Hvad driver udviklingen?
![Page 75: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/75.jpg)
• Opmarkeringsstandarder• HTML/CSS-specifikationer, browseres
fortolkning• Båndbredde
• Omfanget af data der kan overføres• Nærheden til forretningen• Mode, trends• Medieforståelsen
67
Drivkræfter
![Page 76: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/76.jpg)
Hvorfor er nettet anderledes end tidligere medier?
68
![Page 77: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/77.jpg)
Vi er bagud med forståelsen og forud med anvendelsen af nye medier og teknologier.
Nye medier i gamle klæder...
![Page 78: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/78.jpg)
Vi har set nettet som...
• En tryksag med strøm• Radio og TV med lav båndredde• Afløseren for brev (mail) og telefon (IM og
Skype)• ...og vi er først nu ved at se det som et
selvstændigt medium
70
![Page 79: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/79.jpg)
Gartner Hype Cyclefor Emerging Technologies 2006
71
![Page 80: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/80.jpg)
Brugerens mediumWeb er mere brugernes medium end afsenderens. De største sites i dag findes slet ikke, hvis der ikke var brugere. For at involvere brugerne, må de inddrages i designet.
![Page 81: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/81.jpg)
Kommunikationen er ikke længere et produktDet er en proces (som i o!ine kommunikation), og derfor er designet til stadighed til forhandling.
![Page 82: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/82.jpg)
Webmediet er alle medierFor første gang har få fået et medium, der simulerer alle andre medier. Hvordan designer man efter det?
![Page 83: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/83.jpg)
Designet skal...
• Hænge sammen med øvrige trykte kommunikation
• Hænge sammen med audio/visuelle kommunikation
• Kunne adskille formen fra indholdet• Rumme deltagelsen
• Gøre indholdet delbart, flytbart• Invitere til samtale, tilstedeværelse
75
![Page 84: Æstetik og funktionalitet — webdesigns historiske udvikling](https://reader033.vdocuments.site/reader033/viewer/2022051412/54bf10aa4a7959df7e8b459c/html5/thumbnails/84.jpg)
Tak