Transcript Design af websider

Websider og design
Dette Power Point består af 2 dele
Se hver del hver for sig, tag en pause imellem de 2 dele.
Første del
handler især om overvejelser omkring webstedet, før efter og under.
Anden del
handler kun om selve designet og de designregler der gælder når
man laver et websted.
Overvejelser omkring websiden
Første del
Image
Virksomhedens ståsted beskrives gennem virksomhedens
historie, kultur, vision og mission.
Visuel identitet er summen af virksomhedens synlige flader: Dens lokaliteter,
produktionsapparat, kommunikation, produkter og medarbejdernes fremtræden.
Virksomhedens image er summen af alle eksterne gruppers opfattelse af
virksomheden.
Hvad skal der tages hensyn til
Hvad skal man lægge vægt på
En brugerflade er det, der er mellem mennesket og maskinen.
Brugervenlighed kan udtrykkes med følgende grundlæggende
punkter;
Let at lære
Let at huske
Pålideligt
Effektivt at bruge
Tilfredsstillende at bruge
De 4 websidetyper
I princippet er der tale om fire forskellige typer websteder:
Test af websiden
Hvad kunne du gøre og overveje.
•Virker det på alle computere?
•Er downloadtiden tilfredsstillende?
•Virker alle links?
•Forstår brugeren, hvad der står på siderne?
•Mangler brugerne informationer?
•Oppetid?
•Hvad kan få systemet til at gå ned?
•Er der hjælpetekster?
•Kan brugeren søge hjælp online?
•Er anden dokumentation brugervenlig og forståelig?
•Virker siderne i alle browsere?
•Ser siderne ens ud i alle browsere på alle maskiner?
•Opsamles informationer og placeres de, hvor de skal?
•Opfyldes krav om brugervenlighed?
Design af websted
Praktisk fremstilling af websted, hvad ligger bag?
HTML: ”Hyper Text Markup Language” er et opmærkningssprog til hypertekster,
som blandt andet anvendes på World Wide Web.
Kildetekst er de HTML-koder, som er anvendt til opsætning af websider,
der fortolkes af en browser.
En web-editor er et program til udformning af websider f.eks. Microsoft
Sharepoint Designer eller på nettet prøv www.wix.com
Selve designet
Anden del
Design af websted
Nogle af de vigtige designregler
 Sådan læser øjet
 Brugervenlighed
 KISS (Keep it Simple and Straight)
 First Things First
 Gestaltlovene
 Farver
 Lær af andre
Design af websted
Et storyboard skaber overblik
Rough viser detaljer
Design af websted
Øjet følger pilens retning
Design af websted
Sådan læser man, hvad ser øjet først?
Først grafik
1. Levende billeder
2. Animation
3. Farvefotos
4. Sort/hvid
Så fremhævet tekst
Så brødtekst
1. Overskrift
2. Fremhævede citater
3. Indledninger
4. Mellemrubrik
Brødtekst kan
evt. sættes i
spalter eller i
en rulleskakt
Design af websteder og andre
elektroniske produktioner
Grafiske formater
Typisk er billeder i enten GIF-format eller JPG-format. Ved valg af filformat,
skal du tænke på:
•Krav til billedkvalitet
•Krav til computeren – download hastighed
BMP-format (Windows bitmap) gemme alle oplysninger om billedet og fylder
derfor meget.
GIF-format bør anvendes, hvis kontrasterne i en tegning er vigtige eller hvis
du skal bevare en gennemsigtig baggrund. GIF-formatet fylder meget lidt og
kan animeres (det prøver vi dog ikke i denne omgang). Mest til tegninger.
JPG-format (eller JPEG) kan komprimeres, hvilket betyder, at det mest
anvendte grafikformat til digital lagring af fotografiske billeder. Mest til
fotografier.
Typografier
Tekst på webstedet
Overskrift:
uden fødder
Brødtekst:
med fødder
Konsultativt skrift:
Skriv navn her
Displayskrift:
Ovenstående er kun nogle grundregler som gælder for produktioner
på papir. På en skræm er det lige omvendt her brug man overskrift
med fødder og brødtekst uden fødder.
Men uanset hvad, er det jo dig der bestemmer i sidste ende
Husk; at Explorer og andre browsere ikke kan vise alle de skrifttyper
der findes, så brug kun de mest almindelige!
Design af websted
KISS-reglen
Keep It Simpel And Stright
Hvad du kan trække fra, skal du trække fra.
Først når du ikke kan trække mere fra, er din publikation optimal.
Design af websted
FTF-reglen
First Things First
•Den vigtigste tekst placeres øverst på siden
•Den vigtigste sætning placeres først i et afsnit
•De vigtigste ord placeres først i en sætning
•Det vigtigste ord placeres først i en overskrift
Design af websted
Gestaltlove
• Loven om nærhed: Elementer, der er placeret nær hinanden, opfattes som
sammenhørende
• Loven om lighed: Elementer der ligner hinanden har noget til fælles. Det vil sige,
at f.eks. links og navigationsknapper bør udformes ens
• Loven om lukkethed: Elementer, der er lukket inde – f.eks. i en boks eller på en
speciel farvet baggrund – har noget til fælles
• Loven om forbundethed: Elementer, der er forbundne, er typisk af samme slags
eller har noget til fælles
I forbindelse med gestaltlovene nævnes normalt en femte lov:
• Loven om linjer: Reglen siger, at designelementer, som står på en linje, opfattes
som sammenhørende
Design af websted
Design af websted
1.
Tag hensyn til identiteten
Ved design skal du tegne virksomhedens profil for
derved at skabe genkendelsens glæde.
2.
Kend dit formål
Hvilken effekt vil du opnå med farverne?
3.
Tænk på målgruppen
Tilpas farverne til målgruppens holdninger,
demografiske forhold og æstetiske opfattelse.
4.
Start med baggrundsfarven
Den er det bærende element og sammenbinder de andre
designelementer. Derefter vælges farvekort.
5.
Vælg lyshed før kulør
Fastlæg om farveholdningen skal være f.eks. lys og
venlig, neddæmpet eller dyster. Vælg derefter lyshed.
Kontraster mellem lys og mørke fungerer ofte bedre end
kontraster mellem farver.
6.
Begræns antallet af farver
KISS-princippet.For mange forskellige farver kan ofte
virke uharmonisk eller uprofessionelt.
7.
Pas på de rene farver
Generelt bør det undgås at sætte for mange rene farver
sammen. Det giver flimmer eller virker uharmonisk.
8.
Brug naturlige farver
Vi reagerer stærkt på farver, som er sjældne i naturen.
De såkaldt ”syntetiske farver” kan let virke forvirrende
og uharmoniske.
9.
Vær original
Fraviger du de mange gode råd, kan du evt. opnå
opmærksomhedsskabende effekter, men det kræver et
godt kendskab til spilleregler for godt design for at få
succes!
Design af websted
Typer af hyperlink
•henvise til andre websider på eget websted - interne
•henvise til en side på et andet websted - eksterne
•henvise til en e-mailadresse og samtidig starte e-mailprogrammet
•være et link til at downloade en fil – f.eks. et PDF-dokument
•henvise til et andet sted på den aktuelle side (bogmærke).