Metoder til godt webdesign er en væsentlig ingrediens i skabelsen af brugergrænseflader. Listen er er langt fra fuldkommen, men et udpluk af metoder, der er gode til at skabe brugervenligt webdesign.
Da jeg i 1995 trådte ind på kommunikationsstudiet, begyndte et byggeprojekt med masser af teorier og metoder til at arbejde strategisk med kommunikation.
Nu er jeg beskikket som censor på praktikernes uddannelse i Multimediedesign og kan ikke lade være med at smile over at Minervamodellen stadig er i spil. Den var en del af mit speciale for 20 år siden. Mange modeller er kommet til og giver mange gode værktøjer til det praktiske kommunikationsarbejde.
I en række artikler opsamles en stor del af de metoder multimediedesignere støder på og bruger i rapporter på studiet – til inspiration i kommunikationsarbejde og kommunikationsstudiet.
KOMMUNIKATIONSMETODER
Hent inspiration inden for:
Tøv ikke med at skrive en kommentar eller sende en mail, med forslag til ændringer – janne@bavnhoej.dk
webdesign
12 design principles
De 12 principper giver guider til hvor man skaber godt design. Udtryk og design er væsentlig for hvordan vi læser og interagerer med brugergrænseflader – tekster, billeder, grafikker osv.
Designprincipper handler om:
kontrast, balance, betoning, proportion, hierarki, gentagelse, rytme, mønster, hvidt rum (white space), bevægelse, variation og enhed.
Læs fx. Gode designprincipper eller Breaking Down the Principles of Design
7 ingredienser til high end
Hvad kræver det for udvikle en en hjemmeside fra at være god til at være avanceret? Hvad er
væsentlige ingredienser? Der kan de “7 ingredienser til high end oplevelse” være en metode at bruge:
Layout, Billedsprog, Interaktivitet, Branding, Video, Beskeder og Ydeevne
Læs fx whitepaper: The 7 Ingredients of a High-End Experience
Brandboard
En brand board er et kort og letlæseligt dokument, der indeholder alle de visuelle elementer i et brand.
Normalt viser det variationer af et logo, farvepalette, skrifttyper, typografi og grafiske elementer såsom teksturer, mønstre og stylede billeder.
Læs fx What is a brandbord
Flowchart
Flowchart er en illustration af den rejse en bruger kan tage i et system.
Det består ret enkelt af forskellige pile og kasser.
Med et flowchart får man fuldt overblik over hvilke sider hjemmesiden skal bestå af og hvordan de skal være placeret i forhold til hinanden.
Læs fx Flowchart eller se filmen creating flowchart
Gestaltlove
Gestaltlovene blev udviklet i 1920’erne af en gruppe tyske psykologer. De udførte en række forsøg om, hvordan vi som mennesker sanser. Perceptionspsykologi beskæftiger sig ikke kun med synet men med alle sanser. På den baggrund formulerede de lovene:
- Nærhed/gruppering
- Lighed
- Lukkethed
- Forbundethed/fortsættelse
- Figur og baggrund (Prægnans)
- Symmetri og orden
Læs fx Gestaltlovene eller se filmen Gestaltlovene – Designprincipper
Moodboard
Et moodboard er som ordet antyder en stemningstavle.
Moodboards er en art visuel repræsentation, der består af en collage af billeder, farver og tekster, der har til formål at formidle en generel idé eller en stemning om et bestemt emne.
Læs fx. Moodboard eller se filmen How to make af moodboard
Style tile
A UI designers pocket sized cheat sheet!
Style tile bruges typisk i indledningen af designfasen og er en visualisering af designelementer, men ikke hele designet
Style Tiles er mere præcist og beskrivende end et moodboard, men mindre konkret end en wireframe eller en designmanual.
Læs fx Style tile
USER JOURNEY MAP
Et User journey map er et diagram, der visuelt illustrerer brugerflowet gennem en hjemmeside. Dvs. fra indledende kontakt eller opdagelse, gennem processen med at udføre den opgave man forventer, til exit.
Læs fx. Moodboard eller Journeymapping 101
Wireframes
I en wireframe tegner man en illustration af en hjemmesides grænseflade. Fokus er på hvad der skal være hvor og på hvilket indhold og funktionaliteter den skal have.
Wireframes er typisk ret enkle uden formgivning, farve eller grafik, som kan bruges til at teste brugers opgave og funktionaliteter.
Læs fx. Wireframing eller se How To Create Your First Wireframe
