nye medier - redaksjonell design
DESCRIPTION
forelesning om nye media for studenter ved KHIB på kurset digital redaksjonell design.TRANSCRIPT
![Page 1: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/1.jpg)
Hei!
Kjartan Bjørndal MichalsenInteraksjonsdesigner Logica UX
![Page 2: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/2.jpg)
User Experience - Brukeropplevelse
![Page 3: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/3.jpg)
Mobil: 40454554Mail: [email protected] / [email protected] Twitter: @liksomGtalk: [email protected]: kjartan.michalsen
![Page 4: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/4.jpg)
![Page 5: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/5.jpg)
Peppes Pizza
![Page 6: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/6.jpg)
Digital redaksjonell design.
Redaksjonell design på digitale flater.
![Page 7: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/7.jpg)
Nye media.Design.
![Page 8: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/8.jpg)
Media, medium.Gresk: medius = i midten
![Page 9: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/9.jpg)
![Page 10: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/10.jpg)
Interpersonlige media
• Hver deltager i kommunikasjonen har lik kontroll over innholdet som blir kommunisert. • Innholdet blir individualisert til det enkelte individ.
![Page 11: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/11.jpg)
![Page 12: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/12.jpg)
Massemedia
• Nøyaktig det samme innholdet går til alle mottakere • Den som sender har absolutt kontroll over innholdet og form
![Page 13: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/13.jpg)
![Page 14: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/14.jpg)
Nye media
• Unik tilpasset informasjon kan samtidig leveres til uendelig mange mennesker. • Alle individene involvert i kommunikasjonen har lik kontroll over innholdet.
![Page 15: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/15.jpg)
Nøkkelegenskaper - Nye media
1. Nummerisk Representasjon: Kan beskrives matematisk. Et nye media objekt kan manipuleres algoritmisk.
![Page 16: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/16.jpg)
![Page 17: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/17.jpg)
Nøkkelegenskaper - Nye media
2. Modularitet: Mediaelementer er samlinger av kvantifiserbare diskret målinger. Disse objektene kan igjen danne større objekter uten å miste sine identiteter.
![Page 18: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/18.jpg)
![Page 19: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/19.jpg)
Nøkkelegenskaper - Nye media
3. Automatisering: Den nummeriske representasjone og den modulære strukturen tillater automatisering av mange av operasjonene involvert i skapingen og manipulering av mediainnhold. Det tillater også indexering og strukturering av mediaobjekt, og dermed nye muligheter for å søke etter objekt.
![Page 20: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/20.jpg)
![Page 21: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/21.jpg)
Nøkkelegenskaper - Nye media
4. Variasjoner: Et nye media objekt er ikke noe som er fiksert, det er noe som kan eksistere i ulike, potensielt uendelige variasjoner. Dette er en konsekvens av den nummeriske representasjonen.
![Page 22: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/22.jpg)
![Page 23: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/23.jpg)
Nøkkelegenskaper - Nye media
5. Transkoding: Nye media objekt har to ulike lag: Det kulturelle laget og det digitale laget. Den kulturelle forståelsen av mediaobjektet, og den digital datastrømmen som tilsammen lager mediaobjektet.
![Page 24: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/24.jpg)
Det digitale laget påvirker det kulturelle laget, ved at datamaskinen modellerer verden, representerer data og gir oss mulighet til å manipulere innholdet.
Transkoding oppstår når man man tar media objektet og presenterer det samme digitale innholdet på nye måter i det kulturelle laget.
De to lagene påvirker hverandre, og henger sammen.
![Page 25: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/25.jpg)
![Page 26: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/26.jpg)
Konflikten
![Page 27: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/27.jpg)
Konflikten
Tradisjonell billedlig illusjonisme siden renessansen – skjermen (bildet, maleriet) er et vindu til et virtuelt rom. Noe å se inn i, men ikke interagere med.
![Page 28: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/28.jpg)
![Page 29: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/29.jpg)
Konflikten
Ny konvensjon fra 1981 – grafiske grensesnitt på dataskjerm.
Skjermen har et klart definert sett med kontroller, og blir derfor et virtuelt instrumentpanel.
![Page 30: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/30.jpg)
![Page 31: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/31.jpg)
Konflikten
Skjermen blir en slagmark for flere inkompatible definisjoner – Dybde / overflate, transparens / gjennomsiktighet og bilde som romlig illusjon / instrumentpanel for handling.
![Page 32: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/32.jpg)
Bare fordi det vises på en skjerm, er det ikke nødvendigvis nye media.
![Page 33: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/33.jpg)
Interaktivitet - interaksjon
Respons til menneskelig fysisk manipulering som berøring, bevegelse, kroppsspråk, lyd eller andre endringer i fysiologiske status.
![Page 34: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/34.jpg)
Interaktivitet
I interaksjonsprosessen bestemmer brukeren hvilke element man skal vise eller hvilken sti man skal følge.
![Page 35: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/35.jpg)
Interaktivitet
Med dette oppstår en unik variasjon av arbeidet.
Brukeren blir således medskaper av arbeidet.
![Page 36: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/36.jpg)
Interaktivitet – Åpen / lukket
Åpen – Elementene og strukturen blir enten modifisert eller generert der og da.
Lukket – Fikserte elementer arrangert i en satt tre-struktur.
![Page 37: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/37.jpg)
![Page 38: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/38.jpg)
![Page 39: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/39.jpg)
Flyt (Flow)
Den mest interaktive formen for bruker til datamaskin kommunikasjon kalles ofte flow. Når brukeren oppnår flow, kontrollerer de datamaskinen med en slik flyt at datamaskinen blir transparent.
![Page 40: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/40.jpg)
Flyt (Flow)
Mål: Digital redaksjonell design som er så bra at brukeren glemmer at han leser på en datamaskin/iPad/mobil/tablet/kindle/...
![Page 41: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/41.jpg)
Verktøy for digital Redaksjonell Design
![Page 42: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/42.jpg)
![Page 43: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/43.jpg)
![Page 44: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/44.jpg)
<h1>Overskrift</h1>
<p> lorem ipsum dolor sit amet </p>
![Page 45: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/45.jpg)
Interaktiv powerpoint(Eller google docs presentation)
Side A
Side B
Side C
![Page 46: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/46.jpg)
Side A
Tilbake til menyen
![Page 47: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/47.jpg)
Side B
Tilbake til menyen
![Page 48: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/48.jpg)
Side C
Tilbake til menyen
![Page 49: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/49.jpg)
Design
Tips.Triks.Trender.
![Page 50: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/50.jpg)
Typografi
Store, lesbare, spennende fonter.Bruk luft - uendelig lerret, brukerne scroller.På web – bruk typekit
![Page 51: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/51.jpg)
![Page 52: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/52.jpg)
Farger
Kontrast for lesbarhet.Flere farger. Komplimentærfarger.Gradienter.Transparens.Lyse farger.
![Page 53: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/53.jpg)
![Page 54: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/54.jpg)
Bilder & video
Store bilder. Slideshow. Mulighet for fullskjermsvisningIllustrativt stillbilde til brukeren velger å starte video
![Page 55: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/55.jpg)
![Page 56: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/56.jpg)
Touch-interaksjon
Store, tydelige knapper.Swipe og andre former for alternativ interaksjon
![Page 57: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/57.jpg)
![Page 58: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/58.jpg)
Animasjoner
Korte, raske introanimasjoner på scenenAnimasjoner på bevegelse (fra mus eller touch)Illustrasjonsanimasjoner.
![Page 59: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/59.jpg)
![Page 60: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/60.jpg)
Informasjonsgrafikk
Illustrasjoner og grafikk som raskt gir leseren oversiktInteraktiv informasjonsgrafikk
![Page 61: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/61.jpg)
![Page 62: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/62.jpg)
Hold det enkelt
MinimalistiskFokus på det viktigste
![Page 63: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/63.jpg)
![Page 64: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/64.jpg)
.. men glem smilende amerikanske mennesker og andre generiske bilder fra bildebyråer.
![Page 66: Nye medier - redaksjonell design](https://reader035.vdocuments.site/reader035/viewer/2022062419/5575e8e3d8b42af74e8b4c84/html5/thumbnails/66.jpg)
Workshopoppgave
Vinmonopolets magasin vinbladet.Lage interaktiv versjon av whiskey-feature.Lenker mellom de to sakene. Skal vise kommentarer fra brukere.Lag for iPad eller skjerm i valgfritt program.
http://d7.no/khibws og http://d7.no/khibws2