UI og Wireframing
2020
Rapid prototyping
Scroll ↓
Vis meg!
Enten man jobber med kunder eller i interne prosjekter har det stor effekt å vise de man jobber med hvordan alt kommer til å se ut. Skisser på papir, moodboards med designinspirasjon og informasjonsarkitektur på post-its kan fungere for noen, men å sette alt sammen i en mockup etter en workshop gir en følelse av enorm fremdrift! Ikke minst ser man alle de tingene som kanskje ikke helt funket som man trodde…
Wireframes i en designprosess.
Når folk jeg prater med hører at jeg er UX-designer sier de fleste en av tre ting: «Hva er det?» eller «Åja, så du lager nettsider og apper og sånn?» eller min favoritt «Ah, vi hadde en sånn innom jobben. Det var mye post-it-lapper.» Jeg prøver å forklare at min jobb er å lytte, forstå, og så designe det du eller din bedrift trenger.
For å lytte og forstå finnes det mange metoder, disse skriver jeg om under «Design Thinking». Når jeg føler det er tilstrekkelig innsikt på plass sitter jeg ofte med mange løse ark, screenshots og bilder av bord fulle av tusjer og lapper. Disse setter jeg i system ved hjelp av enda flere metoder, og sakte danner det seg et bilde i hodet mitt…
Bildet som danner seg i hodet mitt er basert på behov og ideer servert av de jeg designer for. Før jeg tar min forståelse og løper med den vil jeg at de gir meg tilbakemeldinger, helst så mange som mulig. For å få det setter jeg sammen en high-fi prototype i Adobe Xd og deler linken til denne så alle kan teste og kommentere.
Sånn kan det bli!
Hva syns dere?
Spill av video
Hvordan jeg gjør det.
Adobe Xd / Figma
Mitt foretrukne verktøy for wireframing er Adobe Xd. Mange bruker Figma eller Sketch, det er stort sett en smakssak, men jeg liker måten man kan dele design med både kunder og utviklere fra Xd.
Unslplash
For å få en prototype til å se mer levende ut liker jeg å bruke bilder. Shutterstock har proffe bilder, men mange koster penger. For en kjapp prototype har Unsplash veldig fine bilder - gratis!
Adobe illustrator
Et skreddersydd ikon eller favikon basert på kundens logo er fort gjort og veldig stilig. Noen små detaljer selv i en mockup gir følelsen av at man ser på noe mer enn en rett-ut-av-boksen demo.
Komponentbibliotek
Om jeg skulle designet knapper og menyer fra bunnen hver gang jeg kjapt ville sette sammen en ide hadde jeg ikke gjort annet. Trikset er å ha justerbare komponenter liggende klare i biblioteket.