Design for utviklere: Det er håp

Topic: Webdesign

Håvard Opheim
01.08.2019

marc-olivier-jodoin-TStNU7H4UEE-unsplashDet viser seg at det å lage en nettside eller en applikasjon ikke er så vanskelig etter at du har gjort det et par ganger. Med tilstrekkelig hodestanging mot hva nå enn av teknologi som blir brukt, får du til slutt noe som fungerer. Men at en nettside fungerer betyr ikke nødvendigvis at den er brukbar. 

Så hvordan lager man en brukbar applikasjon? Jo, ved å designe en!  “Men jeg er jo utvikler”, svarer du kanskje da. “Jeg kan ikke designe en nettside, det er det designerne gjør. Jeg klarer ikke engang å fargelegge innenfor strekene”. Men det går helt fint. Det skal faktisk ikke så alt for mye til for å lage et design som ikke får brukerne dine til å blø ut av øynene. For å gjøre det enda enklere vil jeg dele noen regler og tips du kan bruke for lage en helt OK nettside, selv om du ikke kan tegne.

Grafisk design

Grafisk design er kanskje det de fleste tenker når de tenker på design. For meg er grafisk design det som får ting til å se fint ut. Vi har en del verktøy i den grafiske verktøykassen som vi kan bruke for å lage vår nevnte helt OK nettside.

Farger, fargevalg og fargekombinasjoner er kanskje en av de viktigste feltene innenfor grafisk design. Farger kommuniserer veldig mye mer enn bare sin posisjon på fargespekteret, men det skal vi ikke fokusere på nå. Grovt sett vil jeg si at fargene på en nettside skal oppfylle tre mål:

  1. De skal rette brukers oppmerksomhet til ønskede steder på nettsiden
  2. De skal kommunisere visuell identitet
  3. De skal ikke se jævlig ut

Så hvordan velger man farger som fyller disse målene? Vel, mesteparten av nettsiden din være hvit med nyanser av grå. Dette bygger opp den såkalte strukturelle bakgrunnen av nettsiden din. Den strukturelle bakgrunnen er det som skiller de store elementene fra hverandre. For visuell identitet vil jeg anbefale én til tre farger. Dersom du skal lage en nettside for et firma, er logoen til firmaet en fin plass å starte. Om du bruker veldig mange flere farger enn dette kan du stå i fare for å lage en side som ser ut som en sint fruktsalat. Et eksempel på en slik sint fruktsalat er gode gamle vg.no anno 2004.

sint_fruktsalat

Si vi tar to farger som eksempel, så vil den ene brukes som visuell bærer gjennom applikasjonen. Det er denne fargen som har hovedansvaret for å kommunisere visuell identitet. Den andre fargen burde være en friskere farge som krydrer opp nettsiden din. Med friskere mener jeg en farge som ligger litt unna på spekteret. Bare unngå å velge grønn og rød! Denne fargen kan kalles for chilikrydder, siden den burde brukes sparsommelig for å bevare effekten av at den frisker opp applikasjonen.


orange_blue_grafisk_profil

 

Min go-to fargepalett er hvit og eller annen form for grånyanse, blå som visuell bærer og oransje som chilikrydder. Blå er en ganske komfortabel farge for øynene, så denne går det fint an å bruke mye av. For mye bruk av oransje kan fort gjøre litt vondt, så med denne kombinasjonen får du litt trening på å balansere fargene.

Visuell komposisjon

visuell_komposisjon

Visuell komposisjon er hvordan dirigere oppmerksomheten til bruker i et skjermbilde gjennom sammensetningen av former og komponenter. Her snakker vi om linjer, rammer, streker, sirkler og andre former. Mangel på visuell komposisjon, også kalt negativt rom kan også brukes for dette. Hovedregelen her er at du bare bør ha én fremtredende komponent i komposisjonen din. Har man mange fler enn dette vil de forskjellige komponentene konkurrere om oppmerksomheten til brukeren.

En god måte å teste om komposisjonen er god, er ved å krympe skjermbildet til en thumbnail og teste om du fremdeles kjenner deg igjen på siden.

Layout

Når det kommer til å plassere elementer på nettsiden din, er det to regler å følge:

  1. Del siden i tre kolonner
  2. Bruk multipler av åtte for spacing og dimensjoner på alt

Mennesker er veldig glad ting som går opp i tre, og grafiske grensesnitt er intet unntak. Ved å ta i bruk tre kolonner kan du vise mye informasjon på skjermen om gangen og de fleste brukere vil ikke føle seg overveldet av dette.  Dersom du har mindre informasjon kan det fremdeles være lurt å bruke tre kolonner, hvor f.eks. to kolonner brukes til å vise informasjon, mens den siste inneholder annen snacks.  

Punkt nummer to gir deg to fordeler: For det første vil komponenter som er bygget av multipler av åtte se pene ut på stort sett alle skjermer siden anti-aliasing vil være på den side. Siden stort sett alle skjermoppløsninger går opp i åtte vil komponenter som også går opp i åtte bli skalert på en fin måte. For det andre vil det å holde seg til et konsistent system gjøre at elementer på nettsiden rett og slett tar seg bedre ut. Dette  vil blant annet gjøre det enklere å nøste komponenter og unngå at elementer ser tilfeldig posisjonert ut på siden.

Er dette nok for å lage en god nettside?

Så nå har du fulgt alle disse rådene og kanskje laget en pen nettside. Betyr det at den er brukbar nå? Nei. Det neste steget er å teste om nettsiden du har laget er brukbar for brukerne dine. Strengt tatt burde du gjøre dette steget fortløpende, og ikke vente til slutt. Det du er ute etter å avduke under testene er om brukere tenker det samme som du – utvikleren – tenker når en handling skal utføres. Er utvikler og bruker enig om hva utfallet er når de for eksempel trykker på en knapp? Dette konseptet kalles den mentale modellen. Den beste måten å avduke brukers mentale modell på er gjennom testing. Be reelle brukere forklare hva de tenker når de bruker applikasjonen din. Her er det spesielt viktig å ikke ta noe for gitt. Handlinger og operasjoner som du tenker er selvsagte er ikke nødvendigvis det for brukere. Så test alt, og test ofte.

Så der har du det. Litt design formulert i et sett med regler for å hjelpe deg i gang som designer. Design som fagfelt er gigantisk og det finnes veldig mye mer der ute når det kommer til å designe applikasjoner for den digitale verden. Du kan jo prøve å ta en titt på nettsidene du ofte bruker å se om de følger disse reglene. Er du så heldig at du jobber med en designer på et prosjekt kan du se om disse reglene blir fulgt der. Dersom de ikke blir det eller du ser andre regler som følges kan du jo spørre om dette. De designerne jeg har jobbet med biter ikke så veldig mye.

 

Kategorier

Abonner på vårt nyhetsbrev