66
Hei! Kjartan Bjørndal Michalsen Interaksjonsdesigner Logica UX

Nye medier - redaksjonell design

Embed Size (px)

DESCRIPTION

forelesning om nye media for studenter ved KHIB på kurset digital redaksjonell design.

Citation preview

Page 1: Nye medier - redaksjonell design

Hei!

Kjartan Bjørndal MichalsenInteraksjonsdesigner Logica UX

Page 2: Nye medier - redaksjonell design

User Experience - Brukeropplevelse

Page 3: Nye medier - redaksjonell design

Mobil: 40454554Mail: [email protected] / [email protected] Twitter: @liksomGtalk: [email protected]: kjartan.michalsen

Page 4: Nye medier - redaksjonell design
Page 5: Nye medier - redaksjonell design

Peppes Pizza

Page 6: Nye medier - redaksjonell design

Digital redaksjonell design.

Redaksjonell design på digitale flater.

Page 7: Nye medier - redaksjonell design

Nye media.Design.

Page 8: Nye medier - redaksjonell design

Media, medium.Gresk: medius = i midten

Page 9: Nye medier - redaksjonell design
Page 10: Nye medier - redaksjonell design

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
Page 12: Nye medier - redaksjonell design

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
Page 14: Nye medier - redaksjonell design

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

Nøkkelegenskaper - Nye media

1. Nummerisk Representasjon: Kan beskrives matematisk. Et nye media objekt kan manipuleres algoritmisk.

Page 16: Nye medier - redaksjonell design
Page 17: Nye medier - redaksjonell design

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
Page 19: Nye medier - redaksjonell design

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
Page 21: Nye medier - redaksjonell design

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
Page 23: Nye medier - redaksjonell design

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

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
Page 26: Nye medier - redaksjonell design

Konflikten

Page 27: Nye medier - redaksjonell design

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
Page 29: Nye medier - redaksjonell design

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
Page 31: Nye medier - redaksjonell design

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

Bare fordi det vises på en skjerm, er det ikke nødvendigvis nye media.

Page 33: Nye medier - redaksjonell design

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

Interaktivitet

I interaksjonsprosessen bestemmer brukeren hvilke element man skal vise eller hvilken sti man skal følge.

Page 35: Nye medier - redaksjonell design

Interaktivitet

Med dette oppstår en unik variasjon av arbeidet.

Brukeren blir således medskaper av arbeidet.

Page 36: Nye medier - redaksjonell design

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
Page 38: Nye medier - redaksjonell design
Page 39: Nye medier - redaksjonell design

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

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

Verktøy for digital Redaksjonell Design

Page 42: Nye medier - redaksjonell design
Page 43: Nye medier - redaksjonell design
Page 44: Nye medier - redaksjonell design

<h1>Overskrift</h1>

<p> lorem ipsum dolor sit amet </p>

Page 45: Nye medier - redaksjonell design

Interaktiv powerpoint(Eller google docs presentation)

Side A

Side B

Side C

Page 46: Nye medier - redaksjonell design

Side A

Tilbake til menyen

Page 47: Nye medier - redaksjonell design

Side B

Tilbake til menyen

Page 48: Nye medier - redaksjonell design

Side C

Tilbake til menyen

Page 49: Nye medier - redaksjonell design

Design

Tips.Triks.Trender.

Page 50: Nye medier - redaksjonell design

Typografi

Store, lesbare, spennende fonter.Bruk luft - uendelig lerret, brukerne scroller.På web – bruk typekit

Page 51: Nye medier - redaksjonell design
Page 52: Nye medier - redaksjonell design

Farger

Kontrast for lesbarhet.Flere farger. Komplimentærfarger.Gradienter.Transparens.Lyse farger.

Page 53: Nye medier - redaksjonell design
Page 54: Nye medier - redaksjonell design

Bilder & video

Store bilder. Slideshow. Mulighet for fullskjermsvisningIllustrativt stillbilde til brukeren velger å starte video

Page 55: Nye medier - redaksjonell design
Page 56: Nye medier - redaksjonell design

Touch-interaksjon

Store, tydelige knapper.Swipe og andre former for alternativ interaksjon

Page 57: Nye medier - redaksjonell design
Page 58: Nye medier - redaksjonell design

Animasjoner

Korte, raske introanimasjoner på scenenAnimasjoner på bevegelse (fra mus eller touch)Illustrasjonsanimasjoner.

Page 59: Nye medier - redaksjonell design
Page 60: Nye medier - redaksjonell design

Informasjonsgrafikk

Illustrasjoner og grafikk som raskt gir leseren oversiktInteraktiv informasjonsgrafikk

Page 61: Nye medier - redaksjonell design
Page 62: Nye medier - redaksjonell design

Hold det enkelt

MinimalistiskFokus på det viktigste

Page 63: Nye medier - redaksjonell design
Page 64: Nye medier - redaksjonell design

.. men glem smilende amerikanske mennesker og andre generiske bilder fra bildebyråer.

Page 65: Nye medier - redaksjonell design

Eksempler

http://d7.no/khib

Page 66: Nye medier - redaksjonell design

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