Learning activity 2 Webdesign 2015 Malin Jonsson
Innhold 0 Hva er Wireframe? Hvorfor er Wireframe så viktig?
Wireframe 01 En wireframe er i all hovedsak websidens infrastruktur, det er hva den er bygget opp av. Det er retningslinjene man følger når websiden blir konstruert. Dette er noe vi lager for å finne ut av om ideene våre fungerer eller ikke. Har du noen gang sett et hus bli bygget uten blueprints? Nettopp, det er akkurat det wireframe er, en layout. Websidens blueprints. Du burde alltid lage en wireframe når du skal designe en nettside, og det spiller heller ingen rolle om den ikke ser bra ut, fordi designet kommer etterpå. Det viktigste er at du får frem det grunnleggende, og funksjonene.
Front-end 02 Vi lager en wireframe for Front-end i begynnelsen; dette hjelper i oppdagelses-fasen og for å komme opp med ideer. Dette stadiet leder oss til å komme med muligheter, definere websiden og forbedre den. Husk på at ideen bak en webside er å kommunisere eller dele informasjon, så det du trenger å gjøre er å fokusere på 3 områder i wireframe/planleggingsdelen av prosessen. Disse tre områdene er: Informasjonsdesign Navigasjonsdesign Grensesnittdesign
Informasjonsdesign 03 Hva betyr det? Forenklet så betyr det akkurat hva det sier : Designet av all informasjon samlet på din nettside. Meningen med dette steget er å forsikre om at informasjonen er logisk og enkelt lagt frem. Dette vil forsikre at besøkende får nådd sine mål og oppgaver de ønsker. Besøkende vil forlate nettsiden din dersom de synes det blir for mye pes å finne det de ønsker. Nøkkelord : Dine besøkende på nettsiden skal slippe å måtte tenke.
Navigasjonsdesign 04 Dette er ikke et meny design. Selvom det vil være med på å forme deler av den prosessen, så er det faktisk mye dypere enn det. Det er her du forsikrer deg om at alt som kan trykkes på leder et sted. Dette tar hensyn til alle dine sider og all din informasjon, noe som gjør at alle knyttet og klare for å navigere. OBS! Forsikre deg om at du kontrollerer hver enkelt side hvor klikkene fører hen. Det tar mye tid i starten, men det er bedre å være føre var enn etter snar.
Grensesnittdesign 05 Dette er verktøy som hjelper besøkende med å samhandle på nettsiden din. Interaktive verktøy gjør det enklere for besøkende å utrette spesifikke oppgaver. Eksempler på Grensesnittdesign er blant annet Drop-menyer, søke-funksjoner og skjemaer. Dette er bare noen få av mange. Drop menyen er et flott eksempel på et grensesnittdesign. Det gir deg muligheten til å linke direkte informasjon til menyen, og gir brukerene muligheten til å navigere direkte til informasjonen uten at de trenger å søke etter det. Selvom denne funksjonen fungerer utmerket på data, må man også tenke på at brukere også finner på å besøke nettsiden mobilt. Da vil drop-funksjonen ikke fungere, og brukere vil heller ikke få noe utnytte av nettsiden. Det aller beste vil være da å designe en egen mobilversjon som ikke inkluderer drop-meny. Et godt grensesnitt er et grensesnitt som designet for en latsabb. Med minimal kunnskapstilegning og maksimal intuisjon, kan latsabben bruke tingen og være fullstendig uinteressert i hvordan tingen faktisk fungerer.
Lo-tech 06 Dette er en lett måte å få vist frem ideene du har til et webdesign-prosjekt, dette gir deg også muligheten til å endre ideer uten at det har så stor betydning. Det er det som er så fint med skisser, du har mye større frihet. Men alt kommer an på budsjettet til de du skal designe for, om det er lavt så er det ikke nødvendig for deg å lage en massiv presentasjon, når du fint kan få frem ideene dine på arket.
Hi-tech 06 Disse typer wireframes inkluderer så mye detaljer som mulig for å speile det ferdige produktet så godt som mulig. Det kan enten være statiske bilder med alle detaljer (Statiske wireframes) Eller fullt funksjonerende prototyper ( kodede wireframes).
Statiske Wireframes 07 Ved å skape en bildefil av en mockup-side, vil den statiske wireframen gi deg et kjapt glims av hvordan websiden din vil fungere.husk på at dette ikke er en designet side, men en representasjon av innholdet. Det eneste negative ved denne typen wireframe er at selve siden ikke har noen funksjon i seg selv, det er bare en illusjon. Men det er likevel mer enn tilstrekkelig nok for 90% av webside prosjektene.
Kodede Wireframes 08 Kodede wireframes kan enklest forklares hvis man ser på det som et blueprint av et hus, bare med mål og forklaringer på det. Bare at blueprintet av huset er nettsiden, og forklaringene er kodene.
Til slutt 09 Du kan bruke timer på å diskutere fordeler og ulemper med begge metoder. Uansett, så trenger du å avgjøre hva som er best for deg. Du må se på kravene og budsjettet, og så realistisk bestemme hva som er best for deg og din kunde.