Hopp til innhald

Arbeidsoppdrag

Lag wireframes

Øv deg på å lage ulike wireframes for å visualisere ein plan for nettinnhald.
Notatblokk som viser oppbygging av nettside med boksar for tekst, boksar med kryss som betyr foto, og boksar med ei pil i ein sirkel som betyr video. Dei ulike seksjonane er delte inn med horisontale strekar. Foto.
Opne bilete i eit nytt vindauge

Før du gjer oppgåvene kan det vere lurt om du set deg inn i wireframes og korleis du kan lage dei.

1. Lag enkle wireframes

No skal du lage enkle av framsida eller ei anna på fleire nettstader. Vel mellom versjonen du ser på pc eller mobilen. Bruk penn og papir eller digital programvare for å lage skissene.

Lag wireframe av framsida eller ei anna kjerneside på desse nettstadene:

  1. Uutilsynet

  2. ung.no

  3. Frifond

Refleksjon etter produksjon av wireframes

Samanlikn med ein medelev.

Korleis løyser de wireframe av desse sidene?

Er det lett å forstå wireframene til kvarandre?

Kva er bra, og kva kan de jobbe vidare med?

Kva tenkjer de om designet på desse kjernesidene?

Korleis opplever du desse nettstadene som brukar?

2. Lag enkle skisser

Vel ein type nettstad frå lista under og lag tre til fem ulike wireframe-skisser med enkle wireframes av framsida eller ei anna kjerneside på nettstaden. Bestem deg for om du designar for flate på mobil eller datamaskin.

Sjå for deg ein brukar, lag ein . List opp aktuelle som brukaren kan ha på denne nettstaden. Ta omsyn til dette når du lagar oppsett med wireframes.

Vel eitt av desse utgangspunkta:

  • det lokale biblioteket ditt

  • ny restaurant (Funky Fresh) som satsar på god, sunn og rimeleg mat for personar i tjueåra, både restaurant og takeway

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

Wireframe som viser på ein enkel måte korleis ein skoleapp kan sjå ut med boksar med titlar som "timeplan", "lærarar" og "innleveringar". Illustrasjon.
Opne bilete i eit nytt vindauge

3. Brukartest skissene

Vis fram dei enkle skissene til ein medelev og gjer ein enkel . Be medeleven forklare kva han eller ho tenkjer om oppsettet og innhaldet. Gi gjerne nokre brukaroppgåver. Kva for nokre av oppsetta forstår medeleven, og er dei formålstenleg bygd opp? Har desse sidene nødvendig og relevant innhald? Noter ned stikkord med informasjonen du får om skissene dine.

4. Lag ein avansert wireframe

Basert på informasjonen du får når du brukartestar dei enkle skissene, skal du no velje ut ein av idéane. Juster han, og lag ein meir avansert av han.

Ei hand held ein mobil med lydbok-app. Appen viser lydboka Hobbit og ein avspelar. Foto.
Opne bilete i eit nytt vindauge


CC BY-SASkrive av Stina Åshilsdatter Grolid.
Sist fagleg oppdatert 16.12.2021

Læringsressursar

Apputvikling og prototyping