Hvordan designe gode sider ved hjelp av
blokker?
Intranettet
30.06.2020
Brukerne scanner hjemmesider i
en F-formasjon
Hvordan designe gode hjemmesider?
Grupper innhold som hører sammen
Ca. 80% scanner siden for å finne den informasjonen de leter etter.
For å imøtekomme det, bør man gruppere det som hører sammen.
Lag et tydelig hierarki
Avgjør hvilke innholdselementer som er mere og mindre viktige og velg blokker deretter.
«Færre lag»
Når hierarkiet på en
hjemmeside er veldig dypt må man ofte lete lenge for å finne det man leter etter. Prøv å
unngå nye sider hvis en tekst er på under ca. 15 linjer.
Hvordan designe gode hjemmesider?
Unngå for lange sider
Bruk velegnede bilder Gode link beskrivelser
Linker bør ha en beskrivende tekst og CTA-knapper et aktivt verb
Alt innhold på en side kjemper om brukerens oppmerksomhet.
Bildene viser ekte og naturlige mennesker i
hverdagssituasjoner. Enkel bakgrunn og tydelige objekter.
Er teksten noe som egner seg til å vises visuelt? Unngå
bilder av hjemmesider, pdf osv.
Retningslinjer for valg av bilder
• Ekte og naturlige mennesker
• Autentiske og troverdige situasjoner
• Nordisk minimalisme
• Bilder uten for mye bakgrunnsstøy
• Vis mangfold og verdighet
Designteori
Alignment
God alignment Dårlig alignment Dårlig alignment
Alignment handler om å plassere
visuelle elementer langs en ofte usynlig linje.
Loven om nærhet Elementer som står nære hverandre oppleves som hørende sammen
3 bredder
på blokkene
Hvilke blokker finnes i wordpress og hvordan bruke de?
https://adinet.web.headspin.no/ressurs/design-hvilke-blokker-finnes/
Forside fagområde
Sidetype
• Forside fagområde (Demens)
• Forskning
• Nyheter langlesing Brukes:
Standard
Sidetype
• Fagområdesidene (Fakta om demens, aldring og psykisk helse og etc.)
Brukes:
Underside
Sidetype
• Underside på fagområde
(Alzheimers sykdom etc.)
• Nyheter
• Forskningsprosjekter (Forskning)
Brukes:
Headlines
Paragraph
Blokker
Image
Bilde og tekst
Trekkspill-liste 1
Trekkspill-liste 2
Blokker
Lenke Knapper
Vimeo
Infoboks
Nyhetsbrev
Blokker
Ikonmeny
Ikonkolonner
Quote
Pullquote
Blokker
Gallery
Sidebar
Columns
Temabokser
Blokker
CTA-banner
