Wireframes vs Mockups
Det er en enkel visuell representasjon av et grensesnitt.
| Wireframes | Mockups | |
|---|---|---|
| Definition | En wireframe er en visuell representasjon, vanligvis i gråtoner, som skisserer strukturen og funksjonaliteten til en nettside eller mobilapplikasjon før visuell design og innhold legges til. | En mockup er en statisk representasjon av et produkt, ofte brukt i produktdesign og utvikling for å vise hvordan det endelige produktet kan se ut og brukes. |
| Categories | Figma, Mockup, UI, UX, wireframe | UI, UX, design, mockup |
Hva er en wireframe?
Det er en enkel visuell representasjon av et grensesnitt.
Definisjon
En wireframe er en visuell representasjon, vanligvis i gråtoner, som skisserer strukturen og funksjonaliteten til en nettside eller mobilapplikasjon før visuell design og innhold legges til.
Hensikt
Wireframes brukes for å etablere det grunnleggende oppsettet og brukeropplevelsen, med fokus på brukervennlighet og navigering.
Bruk i design
De brukes i de tidlige fasene av designprosessen for å sikre at prosjektet utvikler seg i henhold til de avtalte målene, og for å legge til rette for brukervennlighet og fremtidig innholdsvekst.
Verktøy
Et av de mest brukte verktøyene for å lage wireframes er Figma.
Hva er en mockup?
Det er en statisk og visuell representasjon av et produkt.
Definisjon
En mockup er en statisk representasjon av et produkt, ofte brukt i produktdesign og utvikling for å vise hvordan det endelige produktet kan se ut og brukes.
Elementer
Den inkluderer designelementer som typografi, logoer, bilder, fargepaletter og navigasjonsvisualer som er en del av den endelige brukeropplevelsen.