Download - Webdesign prosessen komprimert
![Page 1: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/1.jpg)
Webdesign
Vennesla Videregående Skole
![Page 2: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/2.jpg)
Funksjonell webdesign
Introduksjon
![Page 3: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/3.jpg)
Visuell kommunikasjon
Teori +
Praktisk trening =
Dyktig webdesigner
![Page 4: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/4.jpg)
Utvikling av webdesign
Mange hensyn å ta :
Visuelt – siden skal se pen og ryddig ut.
Kommunikasjon - det er viktig at nettstedet kommuniserer godt med brukeren.
Webdesign er selve mediet i budskapsformidlingen mellom sender og mottaker.
Teknologiske muligheter og begrensninger.
![Page 5: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/5.jpg)
Oppstartsfasen
Hva skal vi oppnå?
Hva skal vi si?
Hvem skal vi si det til?
Hvor skal vi si det?
Når skal vi si det?
![Page 6: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/6.jpg)
Hvem skal vi si det til?
En målgruppe er et gitt antall personer med en eller flere fellesnevnere.
![Page 7: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/7.jpg)
Fokus på målgruppen
Ha målgruppen i tankene når du utformer budskapet!
Det er den /de som skal bli interessert, imponert , overbevist og lignende
IKKE
du, vennene dine, klassen din!
![Page 8: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/8.jpg)
Hold orden!
Grafisk design er visuell kommunikasjon!
Det er ikke vår smak eller våre oppfatninger, men budskap, målgruppe og målsetning som skal styre prosessen!
![Page 9: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/9.jpg)
Grafisk design innebærer å skape orden.
Man skal gjøre et stoff tilgjengelig og klart for målgruppen.
NB! Orden i seg selv er ikke særlig oppsiktvekkende, man må skape interesse!
![Page 10: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/10.jpg)
Vær kreativ!
Man må utforme budskapet på en interessant og original måte!
![Page 11: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/11.jpg)
Bruk kontrast!
Mennesker elsker kontraster.
Forskjeller i:
Størrelse, Størrelse, størrelse
Farge, farge, farge, fargeForm, form, form, formRetning, gnintreRStyrke, styrke, Styrke
![Page 12: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/12.jpg)
Kontrast
Ulike former for kontrast:
Pirrer netthinnen og vekker interesse (forhåpentligvis)
![Page 13: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/13.jpg)
System av formelementer
Bruk layout, grid, grafisk profil til å skape system!
Enkelt modulsystem skaper ikke hindringer:
Mulighet for ulike varianter, likevel gjenkjennelsesverdi hos brukeren.
![Page 14: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/14.jpg)
Grafisk profil
Konsekvent bruk av enkelte elementer .
Skaper gjenkjennelse hos mottakeren.
![Page 15: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/15.jpg)
Typografi
Typografi betyr ”bokstavlære” Generelle ord og uttrykk i typografien :
Angivelse pr. bokstav, se. illustrasjon :• Seriff• x-høyde
Leselighet – hvor godt ser jeg teksten ? Lesbarhet – forstår jeg det som står det ?
![Page 16: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/16.jpg)
Typografi – font
Det finnes tusenvis med fonter (skrifttyper), og det utvikles stadig nye.
Fontene grupperes i ”font-familier” etter bestemte kjennetegn og særtrekk (kategorier). De fem vanligste familiene :
Antikva Grotesk Egyptienne Kalligrafisk Fantasi
![Page 17: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/17.jpg)
Fonter for web: Grotesk
Grotesk familien ; Består av skrifter uten seriffer (”sans-seriff”) !
En stor fordel med slike skrifter er at de er lette å oppfatte, og de brukes derfor ofte i overskrifter og barnebøker.
![Page 18: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/18.jpg)
Fonter for web: Grotesk
De fungerer meget godt på skjerm.
Vanligste font :
VerdanaTahomaHelveticaGeorgia
(I prioritert rekkefølge)
![Page 19: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/19.jpg)
Verdana sine fortrinn
Bred typekropp, skaper luft og lys.
Robust, alt ”når fram” til øyet.
Fem ganger lettere å lese enn georgia
Dobbelt så lesbar som arial
![Page 20: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/20.jpg)
Fonter
Bruk få, gode og leselige fonter!
Mange å velge mellom, morsomme å leke med, men ikke like funksjonelle!
![Page 21: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/21.jpg)
Fonter forts.
Dersom spesielle eller sjeldne skrifttyper (eks. en fantasi skrift):lagre og legg inn som bilde.
Unngå:problemer med at besøkende som ikke har akkurat den spesielle skrifttypen går glipp av hele teksteffekten.
![Page 22: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/22.jpg)
Få fonter
Bruk helst en, maks to fonter i en og samme jobb.
Dersom det er to: kontrast!
![Page 23: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/23.jpg)
Komposisjon
Hvordan plassere ulike elementer i forhold til hverandre.
Symmetrisk
Asymmetrisk Balanse
Radial
![Page 24: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/24.jpg)
Symmetrisk balanse
![Page 25: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/25.jpg)
Asymmetrisk balanse
![Page 26: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/26.jpg)
Radial balanse
![Page 27: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/27.jpg)
Bilder og illustrasjoner
Bilde sier mer enn tusen ord!
Uten form, farge, bilder: Alle budskap se ut som Norges lover.
Tenk funksjonelt og psykologisk, ikke bare dekorativt!
![Page 28: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/28.jpg)
Farger
Farger er mer enn dekor.
Signalisere Skape atmosfære Gi tilleggsinformasjon Gjenkjennelse Appellere til følelser
![Page 29: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/29.jpg)
Bryt normer og regler
Mange av de beste resultatene innen visuell kommunikasjon :
- kommet ved at ”vedtatte” regler er brutt!
NB! Husk at designeren da har kjent og behersket de.
![Page 30: Webdesign prosessen komprimert](https://reader034.vdocuments.pub/reader034/viewer/2022052622/558c8c40d8b42a6c678b4708/html5/thumbnails/30.jpg)
Velkommen blank skjerm!
Når man har kunnskap om design og layout:
Det blanke ark blir en medspiller!
Viten skaper trygghet, man blir modigere!!