SlideShare ist ein Scribd-Unternehmen logo
1 von 48
Downloaden Sie, um offline zu lesen
Introduksjonskurs i
web design 1.0




Historikk
Kundeanalyse             Are Sleveland
Informasjonsarkitektur   VJU Brand and Business Innovation
Are Sleveland



Min Design   Haave Reklamebyrå       Melvær& Lien   VJU


     MMM




  1997                                                    2012
Egersund
Grøsfjell Slakterforretning
Design følelsen av et nettsted
God design løser oppgaver, påvirker
         og skaper verdi
Hovedfaser
1. Informasjonsarkitektur   - Planlegge nettside
2. Wireframing              - Lage skisser
3. Design                   - Visuell kommunikasjon
                            - Every pixel counts
                            - Responsivt design
                            - Bildekonvertering
                            - Sosiale medier
                            - Apps vs web
Dagen idag

1. Print vs web
2. Introduksjon
3. Historikk
4. Online designer
5. Utlevering av oppgave
6. Kundebrief
7. Planlegge webside struktur
Print                                                 Web
Statisk innhold                           Dynamisk innhold
Begrenset Interaktiv                        Svært interaktiv
mye design kontroll                    mindre design kontroll
Tekst, bilder, former, tekstur   Tekst, bilder, former, tekstur,
                                       audio, video, animation
Fastsatt etter publisering         Justerbar etter publisering
Kostbar publiserings prosess      Billig og direkte publisering
1-veis kommunikasjon               2-veis kommunikasjon
250 år
Sir Tim Berner Lee
If you can't link to it, like it, tweet about it...
   If you don't put it on the web, you lose.




                   Sir Tim Berner Lee
Web 1.0
        «Read-only web»


            250.000 sider




publisert
 innhold
                            bruker-
                            generert
                            innhold




      45 millioner brukere



        1996
Web 2.0
       «Read-write web»


        80.000.000 sider




publisert
 innhold
                             bruker-
                             generert
                             innhold




       1 milliard+ brukere



        2006
«Web 3.0 ultimately
will be seen as
applications that are
pieced together»
   Web 3.0

          Eric Schmidt - Google
Augmentet Reality
Et bindeledd mellom virkelig og virtuell verden
Kundebrief
8-punkts modellen
1. Hva er målet?
- Letter å navigere
- Mer brukervennlig
- Innbydende
- Sterkere identitet
- Forenklet - ta vekk unødvendig informasjon
- Få fram det viktigste på forsiden
- Vise bredde. Grottene og Akvariet.
- Mer bruk av lokalene
2. Hvem snakker vi til?
- Studenter
- Konsertgjengere
3. Hva hindrer oss i å nå målet?
- Ulike interne oppfatninger
- Forvirrende identitet
- Tung strukturert nettside
- For mye informasjon på forsiden
- Utdatert informasjon
- Lange tekster
4. Hva kan vi gjøre?
- Rydde i strukturen
- Forenkle budskap
- Fjerne unødvendig informasjon
- Gjøre alle lokalene tydeligere
- Fremheve Grottene som et fritidssted
5. Hva mener de om oss?
- Svart og skummelt
- Skittent
- Snevert tilbud
- Jeg passer ikke inn her
- Lite gjennomført
6. Hva vil vi de skal mene?
- Åpent for alle
- Ikke bare konserter
- Billig utested for studenter
- Samlingspunkt
- Bredt tilbud
7. Hva kan vi kommunisere?
- Billig for studenter
- Varierte tilbud
- Alle rettigheter i Grottene
- Åpent for alle
8. Hvordan kan vi si det?
- Reindyrke image
- Klarere struktur
- Bevisst på budskap
- Happy Hour
- God gjenkjennelses effekt. Nett, Facebook, Twitter
Informasjonsarkitektur
Gjør det enkelt for brukeren å finne fram
Gjør det lett å skjønne hvor nytt innhold
hører hjemme.
Er skalerbar, så den kan utvides med nytt innhold uten
at du trenger å bygge den om.
Innhold ikke blir duplisert i løsningen.
Informasjonsarkitektur

Weitere ähnliche Inhalte

Ähnlich wie NKF web design 1

Sharepoint komfortabel tvangstrøye_Intralife2010
Sharepoint komfortabel tvangstrøye_Intralife2010Sharepoint komfortabel tvangstrøye_Intralife2010
Sharepoint komfortabel tvangstrøye_Intralife2010
Intralife
 

Ähnlich wie NKF web design 1 (20)

2009 03 24 Editors Meeting
2009 03 24 Editors Meeting2009 03 24 Editors Meeting
2009 03 24 Editors Meeting
 
Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3
 
Innholdsstrategi
InnholdsstrategiInnholdsstrategi
Innholdsstrategi
 
Hvilken nytte kan riktig bruk av BIM gi byggeprosjekter og involverte aktører?
Hvilken nytte kan riktig bruk av BIM gi byggeprosjekter og involverte aktører?Hvilken nytte kan riktig bruk av BIM gi byggeprosjekter og involverte aktører?
Hvilken nytte kan riktig bruk av BIM gi byggeprosjekter og involverte aktører?
 
NKF web design 2
NKF web design 2NKF web design 2
NKF web design 2
 
Intranett i NSB-konsernet
Intranett i NSB-konsernetIntranett i NSB-konsernet
Intranett i NSB-konsernet
 
131106 NBEF seminar FDVU-dataverktøy - BIM/åpenBIM
131106 NBEF seminar FDVU-dataverktøy - BIM/åpenBIM131106 NBEF seminar FDVU-dataverktøy - BIM/åpenBIM
131106 NBEF seminar FDVU-dataverktøy - BIM/åpenBIM
 
Årsmøte Inspirasjon Sørlandet, eDistribusjon og sosiale medier. 240309
Årsmøte Inspirasjon Sørlandet, eDistribusjon og sosiale medier. 240309Årsmøte Inspirasjon Sørlandet, eDistribusjon og sosiale medier. 240309
Årsmøte Inspirasjon Sørlandet, eDistribusjon og sosiale medier. 240309
 
Css3 media queries
Css3 media queriesCss3 media queries
Css3 media queries
 
Om sosiale medier, SpareBank 1 og 7 viktige trender - Hvor går den sosiale di...
Om sosiale medier, SpareBank 1 og 7 viktige trender - Hvor går den sosiale di...Om sosiale medier, SpareBank 1 og 7 viktige trender - Hvor går den sosiale di...
Om sosiale medier, SpareBank 1 og 7 viktige trender - Hvor går den sosiale di...
 
Hvordan kapitalisere på ditt intranett av Pia Fischer
Hvordan kapitalisere på ditt intranett av Pia FischerHvordan kapitalisere på ditt intranett av Pia Fischer
Hvordan kapitalisere på ditt intranett av Pia Fischer
 
Trygg på web trondheim
Trygg på web trondheimTrygg på web trondheim
Trygg på web trondheim
 
Trygg på web tana
Trygg på web tanaTrygg på web tana
Trygg på web tana
 
Trygg på web alta
Trygg på web altaTrygg på web alta
Trygg på web alta
 
Hvor går den sosiale digitale verden? Om sosiale medier og 7 viktige trender ...
Hvor går den sosiale digitale verden? Om sosiale medier og 7 viktige trender ...Hvor går den sosiale digitale verden? Om sosiale medier og 7 viktige trender ...
Hvor går den sosiale digitale verden? Om sosiale medier og 7 viktige trender ...
 
Trygg på web hamar
Trygg på web hamarTrygg på web hamar
Trygg på web hamar
 
Sharepoint komfortabel tvangstrøye_Intralife2010
Sharepoint komfortabel tvangstrøye_Intralife2010Sharepoint komfortabel tvangstrøye_Intralife2010
Sharepoint komfortabel tvangstrøye_Intralife2010
 
360 Fremtiden Er Her Idag
360   Fremtiden Er Her Idag360   Fremtiden Er Her Idag
360 Fremtiden Er Her Idag
 
Trygg på web
Trygg på webTrygg på web
Trygg på web
 
Trygg på web kristiansund
Trygg på web kristiansundTrygg på web kristiansund
Trygg på web kristiansund
 

NKF web design 1

  • 1. Introduksjonskurs i web design 1.0 Historikk Kundeanalyse Are Sleveland Informasjonsarkitektur VJU Brand and Business Innovation
  • 2.
  • 3. Are Sleveland Min Design Haave Reklamebyrå Melvær& Lien VJU MMM 1997 2012
  • 4.
  • 5.
  • 6.
  • 9. Design følelsen av et nettsted God design løser oppgaver, påvirker og skaper verdi
  • 10.
  • 11. Hovedfaser 1. Informasjonsarkitektur - Planlegge nettside 2. Wireframing - Lage skisser 3. Design - Visuell kommunikasjon - Every pixel counts - Responsivt design - Bildekonvertering - Sosiale medier - Apps vs web
  • 12.
  • 13. Dagen idag 1. Print vs web 2. Introduksjon 3. Historikk 4. Online designer 5. Utlevering av oppgave 6. Kundebrief 7. Planlegge webside struktur
  • 14. Print Web Statisk innhold Dynamisk innhold Begrenset Interaktiv Svært interaktiv mye design kontroll mindre design kontroll Tekst, bilder, former, tekstur Tekst, bilder, former, tekstur, audio, video, animation Fastsatt etter publisering Justerbar etter publisering Kostbar publiserings prosess Billig og direkte publisering 1-veis kommunikasjon 2-veis kommunikasjon
  • 17.
  • 18.
  • 19. If you can't link to it, like it, tweet about it... If you don't put it on the web, you lose. Sir Tim Berner Lee
  • 20. Web 1.0 «Read-only web» 250.000 sider publisert innhold bruker- generert innhold 45 millioner brukere 1996
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. Web 2.0 «Read-write web» 80.000.000 sider publisert innhold bruker- generert innhold 1 milliard+ brukere 2006
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34. «Web 3.0 ultimately will be seen as applications that are pieced together» Web 3.0 Eric Schmidt - Google
  • 35. Augmentet Reality Et bindeledd mellom virkelig og virtuell verden
  • 36.
  • 38. 1. Hva er målet? - Letter å navigere - Mer brukervennlig - Innbydende - Sterkere identitet - Forenklet - ta vekk unødvendig informasjon - Få fram det viktigste på forsiden - Vise bredde. Grottene og Akvariet. - Mer bruk av lokalene
  • 39. 2. Hvem snakker vi til? - Studenter - Konsertgjengere
  • 40. 3. Hva hindrer oss i å nå målet? - Ulike interne oppfatninger - Forvirrende identitet - Tung strukturert nettside - For mye informasjon på forsiden - Utdatert informasjon - Lange tekster
  • 41. 4. Hva kan vi gjøre? - Rydde i strukturen - Forenkle budskap - Fjerne unødvendig informasjon - Gjøre alle lokalene tydeligere - Fremheve Grottene som et fritidssted
  • 42. 5. Hva mener de om oss? - Svart og skummelt - Skittent - Snevert tilbud - Jeg passer ikke inn her - Lite gjennomført
  • 43. 6. Hva vil vi de skal mene? - Åpent for alle - Ikke bare konserter - Billig utested for studenter - Samlingspunkt - Bredt tilbud
  • 44. 7. Hva kan vi kommunisere? - Billig for studenter - Varierte tilbud - Alle rettigheter i Grottene - Åpent for alle
  • 45. 8. Hvordan kan vi si det? - Reindyrke image - Klarere struktur - Bevisst på budskap - Happy Hour - God gjenkjennelses effekt. Nett, Facebook, Twitter
  • 46.
  • 47. Informasjonsarkitektur Gjør det enkelt for brukeren å finne fram Gjør det lett å skjønne hvor nytt innhold hører hjemme. Er skalerbar, så den kan utvides med nytt innhold uten at du trenger å bygge den om. Innhold ikke blir duplisert i løsningen.