Hopp til innhold

Arbeidsoppdrag

Lag wireframes

Øv deg på å lage forskjellige wireframes for å visualisere en plan for nettinnhold.

LK20
Notatblokk som viser oppbygging av nettside med bokser for tekst, bokser med kryss som betyr foto, og bokser med ei pil i en sirkel som betyr video. De ulike seksjonene er delt inn med horisontale streker. Foto.

Bruk penn og papir eller grafisk programvare for å visualisere en nettside eller app i en wireframe.

Før du gjør oppgavene kan det være lurt om du setter deg inn i wireframes og hvordan du kan lage dem.

1. Lag enkle wireframes

Nå skal du lage enkle av forsiden eller annen på flere nettsteder. Velg mellom versjonen du ser på pc eller mobilen. Bruk penn og papir eller digital programvare for å lage skissene.

Lag wireframe av forsiden eller en annen kjerneside på disse nettstedene:

  1. Uutilsynet

  2. ung.no

  3. Frifond

Refleksjon etter produksjon av wireframes

Sammenlign med en medelev.

Hvordan løser dere wireframe av disse sidene?

Er det lett å forstå wireframene til hverandre?

Hva er bra, og hva kan dere jobbe videre med?

Hva tenker dere om designet på disse kjernesidene?

Hvordan opplever du disse nettstedene som bruker?

2. Lag enkle skisser

Velg ett type nettsted fra lista under og lag tre til fem ulike wireframe-skisser med enkle wireframes av forsiden eller en annen kjerneside på nettstedet. Bestem deg for om du designer for flate på mobil eller datamaskin.

Se for deg en bruker, lag en . List opp aktuelle som brukeren kan ha på dette nettstedet. Ta hensyn til dette når du lager oppsett med wireframes.

Velg ett av disse utgangspunktene:

  • ditt lokale bibliotek

  • ny restaurant (Funky Fresh) som satser på god, sunn og rimelig mat for personer i tjueårene, både restaurant og takeway

  • frisør eller treningssenter i nærområdet ditt

Wireframe som viser på en enkel måte hvordan en skoleapp kan se ut med bokser med titler som "timeplan", "lærere" og "innleveringer". Illustrasjon.

Her er to eksempler på wireframes av forsiden til en skoleapp.

3. Brukertest skissene

Vis fram de enkle skissene til en medelev og gjør en enkel . Be medeleven forklare hva han eller hun tenker om oppsettet og innholdet. Gi gjerne noen brukeroppgaver. Hvilke av oppsettene forstår medeleven, og er de hensiktsmessig bygd opp? Har disse sidene nødvendig og relevant innhold? Noter ned stikkord med informasjonen du får om skissene dine.

4. Lag en avansert wireframe

Basert på informasjonen du får når du brukertester de enkle skissene, skal du nå velge ut en av idéene. Juster den, og lag en mer avansert av den.

En hånd holder en mobil med lydbok-app. Appen viser lydboka Hobbit og en avspiller. Foto.

Her er en high fidelity-wireframe på en mobilskjerm plassert i en såkalt mockup. En mockup visualiserer bruk av designet, slik at man her ser hvordan app-designet ser ut på en mobil i en realistisk setting.


Sist oppdatert 16.12.2021
Skrevet av Stina Åshilsdatter Grolid

Læringsressurser

Apputvikling og prototyping