Hva synes du om disse nettstedene?

http://www.uio.no/adl/info/dbib.html

http://www.oi-lag.no/

http://www.shhk.net/

http://www.aawebmasters.com/

http://www.nb.no/tilgjengelig/OmIbsen/

http://www.sun-sentinel.com/broadband/theedge/( klikk på Multimedia Gallery og Photo Essays til venstre. Velg deretter f.eks. JUDAISM’S NEW CENTURY.)

Internett som medium

- brukeren bestemmer selv interaktivt rytme og retning i informasjonen

- det må være enkelt å trygt å navigere seg rundt

- brukeren må ta til seg informasjonen i visuell støy

- med god informasjonsstruktur og kommunikativ logikk vil brukeren føle

seg velkommen, skjønne at innholdet gjelder henne og ane at det ligger en

klar tanke bak. Dette skaper trygghet.

- informasjon bør være mottakerorientert, ikke avsenderorientert

- nettsider bør være horisontalt orienterte

- alle designelementer må være motiverte: støtte opp under innholdet

Design som problemløsende prosess

Forberedelse: målrettet helhetstenkning (innsamling og strukturering,formulering av problemet og verdier for arbeidet)

Inkubasjon: problemet synker ned i underbevisstheten(venting, følelse av usikkerhet, kaos)

Innsikt: den forløsende ideen kommer (gjerne etter brainstormeller bruk av andre teknikker. Begeistring!)

Utvikling: videreutvikling av ideen (praktisk bruk av virkemidlerog argumentasjon for at ideen er bra)

Forberedelsesfasen: målrettet helhetstenkning

Viktige spørsmål som må stilles når man skal få et nettsted på lufta er:

- Hvorfor skal nettstedet på lufta? Finnes det en målsetting?

- Hvem henvender man seg til?

- Hvordan skal man snakke med dem? Er innholdsstrukturen klar?

- Hva skal kommuniseres?

- Hvor saksaktuelt skal nettstedet være (statisk informativt, magasinform

eller nyhetsdrevet)?

- Hvor stor grad av interaktivitet skal man legge opp til?

- Hvordan vil du at målgruppen skal ta til seg informasjonen på nettstedet?

- Må man ta hensyn til et eksisterende designprogram?

- Hvilke tekniske forhold må man ta hensyn til?

- Hvordan er konkurransen?

Forberedelsesfasen: verdier

- verdier eller retningsgivende begreper kan være til hjelp i det kreative

arbeidet

- noen firmaer bruker slagord, slik adelsmenn brukte det i middelalderen

- selv om verdiene aldri blir sagt rett ut, skal de kunne gjenkjennes som en

følelse visuelt.

- brukt aktivt, vil man kunne skape en følelse av helhet over designen.

Hvilket firma hører til disse slagordene:

”Oss mennesker imellom”

”Noe for alle alltid”

”Born to be cheap”

”Et lite stykke Norge”

”Litt ditt…”

”Just do it”

Utviklingsfase, navigering

- navigeringen er det viktigste med hele nettstedet - god navigering baserer seg på riktig informasjonsarkitektur.

- tenk helhet for nettstedet; lag et visuelt konsept for navigeringen: - typografisk - farger - layout-grep

- tips: - pop-up menyer på mouseover for å lage et mindre støyende uttrykk - forrige side-lenke letter navigeringen - ”du-er-her”-visualisering kan brukes - mulighet for å komme tilbake - global navigasjonsmeny som følger nivåene - sti

http://www.bleed.no/

Utviklingsfasen, virkemidler

- Layout

- farger

- typografi

- illustrasjonselementer

Hvis man er ekstra heldig, vil bruken av virkemidler samsvare med det målgruppen forventer eller forstår, vi får fanget deres oppmerksomhet i en støyende mediahverdag og grunnlaget for god kommunikasjon er lagt.

Gå igjennom disse nettstedene og beskriv hvilke typer layout

dette minner dere om.

http://www.doga.no/

http://www.racecar.no/

http://www.moet.com/

http://nrksuper.no/superbarn/spill/ugler/baesjen.html)

http://www.sun-sentinel.com/broadband/theedge/( klikk på Multimedia Gallery og Photo Essays til venstre. Velg deretter f.eks. JUDAISM’S NEW CENTURY.)

http://www.innovasjonnorge.no/

Typer layout / metaforer- Avis: Rubrikk/spalteinndeling, store tekstmengder på liten plass. Bilder brukes som illustrasjoner til saker. Videre navigering i innholdet.

- Presentasjon: Man bruker flaten aktivt og baserer layouten på bilder, animasjoner, store, luftige horisontalt orienterte flater. Utradisjonell navigering.

- Opplevelse: faktisk informasjonsinnhenting er ikke primæraktiviteten for brukeren. Nettstedet baserer seg helt på bilder/animasjoner.

- Spill: Varierende layoutformer. Bruk av lyd, animasjoner eller levende bilder. Enkle navigeringsgrep for å spille og komme seg videre.

- Historier: fortelles med mediets ikke-lineære kvaliteter ivaretatt. Tekst, lyd og bilder brukes for å fortelle en historie, og gi brukeren en god reise i fortellingen. Bruker fortellertekniske grep fra f.eks. TV/film.

- Skjemaer eller lister: brukeren skal søke seg frem til riktig informasjon, enten ved hjelp av lenkesamlinger eller søkefelt. Brukes til toveis kommunikasjon. Bruker ofte ikoner og skjematisk inndeling/boksing som grep.

Gå igjennom disse nettstedene og beskriv hvordan flaten brukes

http://www.nrk.no/

http://www.conductit.com/tour.asp

http://www.nav.no/

http://www.fysikkforeningen.no/index.php

http://akershus.kulturnett.no/Historie/Kunstner/index.html

Oppdeling og bruk av flaten

- venstre og toppmarg mest brukt

- mange bruker bokser fordi det er raskt og enkelt å programmere

- spalter brukes fordi man får plass til så mye tekst slik

- horisontalt orientert layout virker rolig, og anbefales fordi skjermformatet

er liggende

- vertikalt orientert layout virker mer aktivt

- dynamisk midtstilt design brukes for at tekst- og bildeflaten skal fylle

skjermbildet mer fornuftig om man har stor skjerm.

Generell komposisjon

- alle former i en bildeflate gir inntrykk av en viss tyngde

- symmetri eller asymmetri: harmoni eller bevegelse

- gylne snitt: plasserer blikkfanget

- vannrette og loddrette linjer gir ro, diagonale gir opplevelse av bevegelse

- kontraster skaper bevegelse, spenning og dynamikk

- viktigste prinsipp: å lede blikket (blikkfang, sti,visuell gruppering)

Farger

- Høy symbolverdi, vekker følelser, visualiserer verdier

- Kontraster: komplementær, Lys-mørk, Varm-kald

- Harmonier: utvalgte farger ved siden av hverandre eller motsatt side av

fargesirkel. Gråskala. http://www.sigdal.com/

- Pallett

- Hexadecimalfarger

Typografi

- Skrift meningsbærende i seg selv

- Funksjon: - skape stemning, oppmerksomhet, identifikasjon (logo)

- Leses i større mengder (brødtekst, innhold)

- Veilede, orientere (navigering)

- Lesbarhet: få skrifttyper, fethetsgrader, størrelser og farger

- Groteske skrifttyper virker mest lesbare på skjerm

-http://www.gullblyanten.no/formaal.html

- Typografisk logikk, CSS

Illustrasjonselementer

- fotografier, tegninger, designelementer, logoer, ikoner eller bakgrunner

- Bruken må støtte opp om innholdet

- Helhetlig stil, www.wobi.no

- Fotografier og bilder må fargejusteres og/eller beskjæres, www.uia.no/

- En bakgrunn fungerer best når den ikke prøver å være en forgrunn

http://www.of.fylkesbibl.no/bokflyt/index.htm

Hvilke historier forteller de påfølgende bildene?

Enkelhet er en dyd

- alt på siden skal ha en funksjon

- lag en ensartet fargepallett som følger hele siten

- bruk få skrifttyper, -snitt og -størrelser. Bestem deg for én størrelse på hovedoverskrifter, én til underoverskrifter og én til brødtekst. Unngå bruk av understreking, kursiv eller bare store bokstaver.

- ha én skrifttype for navigasjonstekst og én for øvrig tekst.

- Organisér tekst i avsnitt og/eller spalter. Ikke blande sentrert, venstrestilt og høyrestilt marg for tekst på samme side

- Definer en illustrasjonsstil og hold deg til denne.

- Bruk av illustrasjonselementer bør bygge opp under hovedidéen.

- Beskjæring understreker det som er viktig i bildet.

- Bilder med forskjellige farge- og lysstyrker må tilpasses hverandre

Nettdesignfaser

1. preget av begrensede designmuligheter. En side besto ofte av overskrift, tekst et firkantet foto, mer tekst osv. Sentrert, og lenkefargen var blå understreket.

Elementene ofte plassert uten mulighet til å ”feste” posisjonene; ”flytende design”

2. mulighet til å kontrollere elementenes plassering, ved å låse dem til celler i en tabell. Dette gjorde at det ble kontrollerte tilstander, men samtidig kunne uttrykket virke noe statisk.

3. Muligheten til å få mer flytende og luftig layout ved å kutte opp bilder og legge dem inn i celler i tabeller, som et puslespill; ”slicing and dicing”. I tillegg kan dynamiske elementer trigges fra server som følge av tidslinje eller valg hos bruker. Brukerdeltagelse, web2.

4. Med bl.a. Flash har man ytterligere mulighet til å lage design som er frigjort fra tradisjonell inndeling av skjermbildet, og man kan konsentrere seg om dynamisk historiefortelling med lyd og bilde.