Fra rotete skjermgrafikk til en stilguide på to sider: Idas sak

Utgangspunktet: et program som så ulikt ut hver gang

Ida er yrkesaktiv og tok kurset ved siden av jobben. Hun hadde laget et øvelsesprogram om lokalhistorie, og i arbeidsmappen lå det tre versjoner av samme åpningsgrafikk. Fargene var litt forskjellige, overskriftene stod i to ulike skrifttyper, og navnebåndene for gjester hadde ingen fast plassering.

Det hun spurte om første gang vi snakket sammen, var enkelt: hvorfor føles programmet rotete, selv om innholdet er godt? Jeg ba henne legge ut alle grafikkfilene ved siden av hverandre på skjermen. Da så hun det selv. Ingenting var feil i seg selv, men ingenting hørte sammen heller.

Mange som starter på visuell konsistens tror at løsningen er en ny logo eller en dyr pakke med maler. I Idas tilfelle var problemet motsatt. Hun hadde for mange valg og ingen regler for å velge mellom dem. Vi bestemte oss for å begynne med å fjerne, ikke legge til.

Første steg: telle det som faktisk er i bruk

Vi startet med en enkel opptelling. Hvor mange farger brukes, hvilke skrifttyper dukker opp, og hvor ofte forandrer plasseringen av tekst seg? Ida skrev ned alt i et dokument, med skjermbilder ved siden av hver post. Det tok omtrent en kveld.

Resultatet overrasket henne. Seks blåtoner, hvorav to var nesten umulige å skille fra hverandre på en vanlig skjerm. To skrifttyper med serifer og en uten, brukt om hverandre uten noe mønster. Og navnebånd som hoppet mellom venstre og høyre side avhengig av hvilken mal hun hadde åpnet den dagen.

Denne øvelsen er verdt å gjøre før du lager noe nytt. Den viser hva du faktisk liker, ikke hva du tror du liker. Ida la merke til at hun alltid hadde valgt den mørkeste blåtonen når hun var usikker, og at den gjorde seg best mot lyst studiobakgrunn. Det ble utgangspunktet.

• List alle farger, skrifttyper og plasseringer som er brukt
• Legg skjermbilder ved siden av hver post
• Se etter det du selv velger når du er i tvil

Valg som tåler både studio og skjerm

Studio og skjerm stiller ulike krav. I studio ser grafikken på en monitor eller et lerret på avstand, under lys som kan flate ut fargene. På en telefon sitter seeren tett på, ofte med lav lysstyrke og mye støy rundt. En stilguide må fungere i begge tilfeller, ellers blir den bare pen på papir.

Ida valgte to farger og en nøytral: en mørk blå, en varm gul som aksent, og en lys grå til bakgrunner. Hun testet dem ved å sende skjermbilder til seg selv og se på dem utendørs, i dagslys. Gulen ble justert litt mørkere, fordi den forsvant mot hvit bakgrunn.

For skrift landet hun på én fet type til overskrifter og én rolig til brødtekst. Regelen ble kort: overskrifter aldri under en viss størrelse, og aldri mer enn to linjer. Slike konkrete grenser gjør det lettere å si nei til små avvik senere, uten å diskutere smak hver gang.

• To hovedfarger og én nøytral er nok til å starte
• Test farger i dagslys og på liten skjerm
• Én skrift til overskrift, én til brødtekst

Stilguiden som ble to sider

Selve guiden ble kort. Første side viste fargene med navn og bruksområde: hva som er bakgrunn, hva som er tekst, hva som er understrek. Andre side viste skriftene, eksempler på overskrift og navnebånd, og en tegning av hvor ting skal stå i bildet.

Ida spurte om to sider var for lite. Mitt svar var at en guide som blir åpnet er bedre enn en grundig guide som ligger i en mappe. Hun skal bruke den selv, og noen ganger be en venn om hjelp, så den må kunne leses på to minutter.

Hun la også inn et avsnitt øverst om tonen: rolig, lokal og lett å følge med på. Det var ikke planlagt, men det kom naturlig. Når fargene og skriften skulle fortelle noe om programmet, måtte hun være tydelig på hva det var. Slik hang visuell stil sammen med programidentiteten vi hadde snakket om tidligere i kurset.

Prøven: samme episode i studio og som kort klipp

For å sjekke guiden tok Ida en episode og lagde to versjoner. Den ene var tenkt for en større skjerm i studio, den andre som et kort, stående klipp for telefon. Hun brukte de samme fargene og skriftene, men justerte størrelsene etter reglene hun hadde skrevet.

Det fungerte nesten uten endringer. Det som trengte justering, var navnebåndet, som var for smalt på telefon. Hun noterte det i guiden som en egen regel for stående format. Dermed ble dokumentet litt lengre, men fortsatt lett å bruke.

Det jeg liker best med denne typen prøve, er at den avslører hva som ikke er tenkt på. En stilguide blir aldri ferdig første gang. Den vokser etter hvert som du møter situasjoner du ikke forutså. Poenget er at hver ny regel har en grunn du kan forklare, og at du ikke legger til noe bare fordi det ser fint ut.

• Lag to versjoner av samme innhold og sammenlign
• Skriv nye regler ned med en kort begrunnelse

Det Ida tar med seg videre

Da vi snakket sammen til slutt, sa Ida at den største forskjellen ikke var hvordan programmet så ut, men hvordan hun jobbet. Hun brukte mindre tid på å bestemme farger og mer tid på innholdet. Reglene tok bort småvalgene som tidligere tappet henne for energi.

Hun er også ærlig på at guiden ikke gjør programmet bedre alene. Den gjør det gjenkjennelig. Om innholdet er svakt, hjelper ikke en pen blå farge. Men når innholdet er godt, hjelper konsistens seeren til å kjenne igjen programmet fra uke til uke.

Til andre som starter, anbefaler hun å begynne med opptellingen og ikke med en ny mal. Det er en liten jobb, den koster ingenting, og den viser raskt hvor mye av rotet som skyldes mangel på regler heller enn mangel på talent.