1.
Webdesign<br />Vennesla Videregående Skole<br />

2.
Funksjonell webdesign<br />Introduksjon<br />

3.
Visuell kommunikasjon<br />Teori <br />+<br />Praktisk trening<br />=<br />Dyktig webdesigner<br />

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.
Oppstartsfasen<br />Hva skal vi oppnå?<br />Hva skal vi si?<br />Hvem skal vi si det til?<br />Hvor skal vi si det?<br />Når skal vi si det?<br />

6.
Hvem skal vi si det til?<br />En målgruppe er et gitt antall personer med en eller flere fellesnevnere.<br />

7.
Fokus på målgruppen<br />Ha målgruppen i tankene når du utformer budskapet!Det er den /de som skal bli interessert, imponert , overbevist og lignende IKKE<br />du, vennene dine, klassen din! <br />

8.
Hold orden!<br />Grafisk design er visuell kommunikasjon!<br />Det er ikke vår smak eller våre oppfatninger, men budskap, målgruppe og målsetning som skal styre prosessen!<br />

9.
Grafisk design innebærer å skape orden. <br />Man skal gjøre et stoff tilgjengelig og klart for målgruppen. <br />NB! Orden i seg selv er ikke særlig oppsiktvekkende, man må skape interesse!<br />

10.
Vær kreativ!<br />Man må utforme budskapet på en interessant og original måte!<br />

11.
Bruk kontrast!<br />Mennesker elsker kontraster.<br />Forskjeller i:Størrelse, Størrelse,størrelseFarge, farge, farge, fargeForm, form, form, formRetning, gnintreRStyrke, styrke, Styrke<br />

12.
Kontrast<br />Ulike former for kontrast:<br />Pirrer netthinnen og vekker interesse (forhåpentligvis)<br />

13.
System av formelementer<br />Bruk layout, grid, grafisk profil til å skape system!<br />Enkelt modulsystem skaper ikke hindringer:<br />Mulighet for ulike varianter, likevel gjenkjennelsesverdi hos brukeren.<br />

14.
Grafisk profil<br />Konsekvent bruk av enkelte elementer .<br />Skaper gjenkjennelse hos mottakeren.<br />

15.
Typografi<br />Typografi betyr ”bokstavlære”<br />Generelle ord og uttrykk i typografien :<br />Angivelse pr. bokstav, se. illustrasjon :<br />Seriff<br />x-høyde<br />Leselighet – hvor godt ser jeg teksten ?<br />Lesbarhet – forstår jeg det som står det ?<br />

16.
Typografi – font<br />Det finnes tusenvis med fonter (skrifttyper), og det utvikles stadig nye.<br />Fontene grupperes i ”font-familier” etter bestemte kjennetegn og særtrekk (kategorier). De fem vanligste familiene :<br />Antikva<br />Grotesk<br />Egyptienne<br />Kalligrafisk<br />Fantasi<br />

17.
Fonter for web: Grotesk<br />Grotesk familien ;<br />Består av skrifter uten seriffer (”sans-seriff”) !<br />En stor fordel med slike skrifter er at de er lette å oppfatte, og de brukes derfor ofte i overskrifter og barnebøker.<br />

18.
Fonter for web: Grotesk<br />De fungerer meget godt på skjerm. <br />Vanligste font : VerdanaTahomaHelveticaGeorgia<br />(I prioritert rekkefølge)<br />

19.
Verdana sine fortrinn<br />Bred typekropp, skaper luft og lys.<br />Robust, alt ”når fram” til øyet.<br />Fem ganger lettere å lese enn georgia<br />Dobbelt så lesbar som arial<br />

20.
Fonter<br />Bruk få, gode og leselige fonter!<br />Mange å velge mellom, morsomme å leke med, men ikke like funksjonelle!<br />

21.
Fonter forts.<br />Dersom spesielle eller sjeldne skrifttyper (eks. en fantasi skrift):lagre og legg inn som bilde. <br />Unngå:problemer med at besøkende som ikke har akkurat den spesielle skrifttypen går glipp av hele teksteffekten. <br />

22.
Få fonter<br />Bruk helst en, maks to fonter i en og samme jobb.<br />Dersom det er to: kontrast!<br />

23.
Komposisjon<br />Hvordan plassere ulike elementer i forhold til hverandre.<br />Symmetrisk<br />Asymmetrisk Balanse<br />Radial<br />

24.
Symmetrisk balanse<br />

25.
Asymmetrisk balanse<br />

26.
Radial balanse<br />

27.
Bilder og illustrasjoner<br />Bilde sier mer enn tusen ord!<br />Uten form, farge, bilder: Alle budskap se ut som Norges lover.<br />Tenk funksjonelt og psykologisk, ikke bare dekorativt!<br />

28.
Farger<br />Farger er mer enn dekor. <br />Signalisere<br />Skape atmosfære<br />Gi tilleggsinformasjon<br />Gjenkjennelse<br />Appellere til følelser<br />

29.
Bryt normer og regler<br />Mange av de beste resultatene innen visuell kommunikasjon :- kommet ved at ”vedtatte” regler er brutt!<br />NB! Husk at designeren da har kjent og behersket de.<br />

30.
Velkommen blank skjerm!<br />Når man har kunnskap om design og layout:Det blanke ark blir en medspiller!<br />Viten skaper trygghet, man blir modigere!!<br />