Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webdesign<br />Vennesla Videregående Skole<br />
Intro Webdesign<br />Mediefag, 1mk<br />
Et nettsted bør ha:<br />Gjennomført og gjennomtenkt design.<br />Attraktivt for brukerne å ”undersøke” nettstedet.<br />S...
Utvikling av webdesign<br />Mange hensyn å ta :<br />Visuelt – siden skal se pen og ryddig ut.<br />Kommunikasjon - det er...
Stil<br />mønster eller mal for websidene på et nettsted.  <br />Bestå av:- bestemte fargevalg- skrifttyper - skriftstørre...
Farger<br />Hvilke farger som skal brukes på et nettsted: avgjørende for hvilket inntrykk de besøkende får<br />Farger app...
Farger	<br />Fargevalget: konsekvent i hele nettstedet.<br />Frihet i henhold til fargenyanser:<br />Skriftfargen bør: - p...
Leselighet<br />”Leseligheten” angir det visuelle inntrykket vi får av teksten, – altså hvor godt ser/oppfatter jeg tekste...
Lesbarhet <br />”Lesbarhet” angir hvor lett det er å oppfatte innholdet/meningen med teksten:-lesbarheten er altså lav hvi...
Strukturering av websider<br />gjennomtenkt struktur på navigeringen mellom de ulike sidene.<br />Strukturen skal sørge fo...
Strukturering av websider<br />Strukturkart over nettstedet.<br />Lettere å: - se hvilke sider det skal være hyperkobling ...
Strukturmodeller<br />Det er vanlig å skille mellom 4 ulike strukturmodeller:<br />Hierarkisk struktur<br />Lineær struktu...
Hierarkisk struktur<br />Hierarkisk struktur = trestruktur sidene forgreines utover i nettstedet.<br />Etter at brukeren v...
Det er ikke mulig å hoppe direkte mellom grenene, men brukeren må alltid gå veien om ”startsiden”.<br />
Lineær struktur<br />Sidene inneholder kun link til neste (og evt. forrige) side.  <br />Brukeren tvinges å følge struktur...
Lineær struktur forts.<br />Hensiktsmessig hvis: ønsker kontroll over hvordan brukeren navigerer mellom sidene(f.eks. hvis...
Miks av hierarkisk og lineær<br />Her kan brukeren altså velge selv om han vil gå gjennom websidene i en forhåndsbestemt r...
Spindelvevstruktur<br />Her kan brukeren fritt bevege seg fra den ene websiden til en annen, uavhengig av rekkefølge og ev...
Upcoming SlideShare
Loading in …5
×

Webdesign intro

1,723 views

Published on

Hva må vi huske i webdesign

  • Be the first to comment

  • Be the first to like this

Webdesign intro

  1. 1. Webdesign<br />Vennesla Videregående Skole<br />
  2. 2. Intro Webdesign<br />Mediefag, 1mk<br />
  3. 3. Et nettsted bør ha:<br />Gjennomført og gjennomtenkt design.<br />Attraktivt for brukerne å ”undersøke” nettstedet.<br />Samme stil. <br />
  4. 4. Utvikling av webdesign<br />Mange hensyn å ta :<br />Visuelt – siden skal se pen og ryddig ut.<br />Kommunikasjon - det er viktig at nettstedet kommuniserer godt med brukeren. <br />Webdesign er selve mediet i budskapsformidlingen mellom sender og mottaker.<br />Teknologiske muligheter og begrensninger.<br />
  5. 5. Stil<br />mønster eller mal for websidene på et nettsted. <br />Bestå av:- bestemte fargevalg- skrifttyper - skriftstørrelser- plassering av navigasjonsverktøy- osv..<br />
  6. 6. Farger<br />Hvilke farger som skal brukes på et nettsted: avgjørende for hvilket inntrykk de besøkende får<br />Farger appellerer i stor grad til følelser.<br />
  7. 7. Farger <br />Fargevalget: konsekvent i hele nettstedet.<br />Frihet i henhold til fargenyanser:<br />Skriftfargen bør: - passe sammen med- skape en kontrast til bakgrunnsfargen.<br />
  8. 8. Leselighet<br />”Leseligheten” angir det visuelle inntrykket vi får av teksten, – altså hvor godt ser/oppfatter jeg teksten:- for liten kontrast mellom fargen på bakgrunnen og fargen på fonten gir dårlig leselighet.<br />Her er det altfor liten kontrast mellom bakgrunn og skrift. Resultatet er dårlig leselighet.<br />
  9. 9. Lesbarhet <br />”Lesbarhet” angir hvor lett det er å oppfatte innholdet/meningen med teksten:-lesbarheten er altså lav hvis teksten er skrevet med et innviklet språk – leseren forstår ikke !<br />Bla, bla,bla og lignende <br />
  10. 10. Strukturering av websider<br />gjennomtenkt struktur på navigeringen mellom de ulike sidene.<br />Strukturen skal sørge for at brukeren på en oversiktelig måte finner fram til den informasjonen han/hun søker.<br />
  11. 11. Strukturering av websider<br />Strukturkart over nettstedet.<br />Lettere å: - se hvilke sider det skal være hyperkobling mellom- gruppere informasjonen som hører logisk sammen<br />
  12. 12. Strukturmodeller<br />Det er vanlig å skille mellom 4 ulike strukturmodeller:<br />Hierarkisk struktur<br />Lineær struktur<br />Kombinasjon av hierarkisk og lineær struktur<br />Spindelvev struktur<br />
  13. 13. Hierarkisk struktur<br />Hierarkisk struktur = trestruktur sidene forgreines utover i nettstedet.<br />Etter at brukeren vises ”startsiden” kan han/hun bevege seg nedover en av ”grenene”. <br />
  14. 14. Det er ikke mulig å hoppe direkte mellom grenene, men brukeren må alltid gå veien om ”startsiden”.<br />
  15. 15. Lineær struktur<br />Sidene inneholder kun link til neste (og evt. forrige) side. <br />Brukeren tvinges å følge strukturen webdesigner har lagt opp til.<br />
  16. 16. Lineær struktur forts.<br />Hensiktsmessig hvis: ønsker kontroll over hvordan brukeren navigerer mellom sidene(f.eks. hvis det er viktig at info’en kommer i en bestemt rekkefølge og ingenting bør hoppes over.) <br />
  17. 17. Miks av hierarkisk og lineær<br />Her kan brukeren altså velge selv om han vil gå gjennom websidene i en forhåndsbestemt rekkefølge (lineær), eller gå fra et nivå til et annet (hierarkisk).<br />Kombinerer de beste fra begge modellene.<br />
  18. 18. Spindelvevstruktur<br />Her kan brukeren fritt bevege seg fra den ene websiden til en annen, uavhengig av rekkefølge og evt. emne. <br />Strukturen krever at brukerenkjenner nettstedet godt, ellersvil han/hun lett kunne gå seg bort.<br />

×