Hvordan designe gode
sider ved hjelp av blokker?
Intranettet
30.06.2020
Brukerne scanner hjemmesider i en
F-formasjon
Hvordan designe gode hjemmesider?
Strukturer sidene så de er lett å scanne
Ca. 80% scanner siden for å finne den informasjonen de leter etter.
For å gjøre det lettere å scanne siden 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»
Som hovedregel har en enkelt ressurs ingen underside.
Hvordan designe gode hjemmesider?
Unngå for lange sider Gode link beskrivelser Bruk velegnede bilder 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
8 BILDESTIL
Retningslinjer for valg av bilder
• Ekte og naturlige mennesker
• Autentiske og troverdige situasjoner
• Nordisk minimalisme
• Bilder uten for mye bakgrunnsstøy
• Eldre mennesker som ikke ser for gamle ut
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 skal jeg velge?
• Hvor mange av brukerne er innholdet relevant for?
• Egner det seg til å vises visuelt?
• Se på oversikten jeg har laget i wordpress
Hvilke blokker finnes i wordpress og hvordan bruke de?
https://adinet.web.headspin.no/ressurs/design-hvilke-blokker-finnes/
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
Eksempler på ressurser
Merking av produkter
https://adinet.web.headspin.no/ressurs/merking-av-produkter/
Kontorer
https://adinet.web.headspin.no/ressurs/kontorer/
Timeregistrering
https://adinet.web.headspin.no/ressurs/timeregistrering/
Fou-kvalitetssystem
Gammel side
https://intern.aldringoghelse.no/fag-og-forskning/fou-kvalitetssystemet/
Første variant
https://adinet.web.headspin.no/ressurs/fou-kvalitetssystem-2/
Andre variant
https://adinet.web.headspin.no/ressurs/fou-kvalitetssystem-3/
Mangler vi en blokk?
https://www.aldringoghelse.no/koronaviruset/kompetansehevende-tiltak/lynkurs-i- pleie-og-omsorg/
