30
Webdesign Vennesla Videregående Skole

Webdesign prosessen komprimert

  • Upload
    akh78

  • View
    778

  • Download
    1

Embed Size (px)

DESCRIPTION

Tips om fonter, form, stil ol

Citation preview

Page 1: Webdesign prosessen komprimert

Webdesign

Vennesla Videregående Skole

Page 2: Webdesign prosessen komprimert

Funksjonell webdesign

Introduksjon

Page 3: Webdesign prosessen komprimert

Visuell kommunikasjon

Teori +

Praktisk trening =

Dyktig webdesigner

Page 4: Webdesign prosessen komprimert

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

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

Hvem skal vi si det til?

En målgruppe er et gitt antall personer med en eller flere fellesnevnere.

Page 7: Webdesign prosessen komprimert

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

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

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

Vær kreativ!

Man må utforme budskapet på en interessant og original måte!

Page 11: Webdesign prosessen komprimert

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

Kontrast

Ulike former for kontrast:

Pirrer netthinnen og vekker interesse (forhåpentligvis)

Page 13: Webdesign prosessen komprimert

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

Grafisk profil

Konsekvent bruk av enkelte elementer .

Skaper gjenkjennelse hos mottakeren.

Page 15: Webdesign prosessen komprimert

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

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

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

Fonter for web: Grotesk

De fungerer meget godt på skjerm. 

Vanligste font :

VerdanaTahomaHelveticaGeorgia

(I prioritert rekkefølge)

Page 19: Webdesign prosessen komprimert

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

Fonter

Bruk få, gode og leselige fonter!

Mange å velge mellom, morsomme å leke med, men ikke like funksjonelle!

Page 21: Webdesign prosessen komprimert

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

Få fonter

Bruk helst en, maks to fonter i en og samme jobb.

Dersom det er to: kontrast!

Page 23: Webdesign prosessen komprimert

Komposisjon

Hvordan plassere ulike elementer i forhold til hverandre.

Symmetrisk

Asymmetrisk Balanse

Radial

Page 24: Webdesign prosessen komprimert

Symmetrisk balanse

Page 25: Webdesign prosessen komprimert

Asymmetrisk balanse

Page 26: Webdesign prosessen komprimert

Radial balanse

Page 27: Webdesign prosessen komprimert

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

Farger

Farger er mer enn dekor.

Signalisere Skape atmosfære Gi tilleggsinformasjon Gjenkjennelse Appellere til følelser

Page 29: Webdesign prosessen komprimert

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

Velkommen blank skjerm!

Når man har kunnskap om design og layout:

Det blanke ark blir en medspiller!

Viten skaper trygghet, man blir modigere!!