Hva er Wireframe?
På norsk: Wireframe
Kort forklart
En wireframe er en enkel, svart-hvitt skisse av en nettside- eller app-layout som viser struktur og funksjonalitet uten designdetaljer.
Eksempel
Hva en wireframe viser:
- Sideoppsett og struktur
- Hvor innhold plasseres
- Navigasjonsplassering
- Knapp- og skjemaplasseringer
- Brukerflyt mellom skjermer
Hva en wireframe ikke viser:
- Farger
- Bilder
- Faktisk tekstinnhold
- Endelig styling
- Merkevareelementer
Wireframe-eksempel:
+---------------------------+
| [Logo] [Nav] [Nav] [☰] |
+---------------------------+
| |
| [Hero-bildeområde] |
| |
| [Overskrift-placeholder] |
| [Underoverskrift her] |
| |
| [CTA-knapp] |
+---------------------------+
Bare bokser og etiketter. Ingen design.
Forklaring
Typer wireframes
Lav-fidelity (lo-fi): Håndtegnet eller veldig enkel digital. Raskt å lage, bra for tidlige ideer. Bare bokser og linjer.
Mellom-fidelity: Mer detaljert, digital. Viser faktiske elementstørrelser. Grunnleggende hierarki synlig.
Høy-fidelity (hi-fi): Veldig detaljert, nær endelig. Ekte proporsjoner og mellomrom. Kan inkludere noe plassholderinnhold.
Wireframing-verktøy
- Enkle: Penn og papir, Balsamiq
- Mellom: Figma, Sketch, Adobe XD
- Samarbeid: Miro, FigJam
Wireframe-prosess
- Definer brukermål og flyter
- Skisser grove oppsettalternativer
- Velg beste tilnærming
- Forfin til detaljerte wireframes
- Få interessenttilbakemelding
- Gå til visuelt design
Hvorfor det er viktig
For bedriftseiere
Wireframes sparer penger. Det er billig å flytte bokser rundt. Dyrt å redesigne kodede nettsider. Fang problemer tidlig.
Wireframes fokuserer på funksjon. Uten farger og bilder fokuserer alle på: Fungerer dette oppsettet? Er flyten logisk?
Wireframes muliggjør samarbeid. Ikke-designere kan forstå og gi tilbakemelding på wireframes. Lavere terskel for innspill.
Wireframes er ikke sluttproduktet. De er et planleggingsverktøy. Ikke bedøm den endelige looken fra wireframes.
Hva du bør se etter i wireframes
- Gir brukerflyten mening?
- Kan brukere finne det de trenger?
- Er de viktigste elementene fremtredende?
- Mangler noe eller er noe unødvendig?
- Matcher det forretningsmålene dine?
Trenger du hjelp med et digitalt prosjekt?
Vi bygger nettsider, apper og digitale løsninger for bedrifter.
Ta kontakt