En designidé kan se sterk ut i én mockup og falle fra hverandre så snart den skal brukes på en mobilskjerm, i et nyhetsbrev eller på en trykksak.

Jeg møtte nettopp dette i et kampanjearbeid der ett enkelt håndtegnet element skulle fortsette inn i et ferdig design. Første løsning fungerte som enkeltbilde. Problemet oppsto da samme idé skulle videre til nettside, app, brosjyre, e-post og netthandel.

Da ble det tydelig at vi måtte definere selve ideen bedre. Hvis konseptet bare fungerer når motivet ligger på nøyaktig samme sted i én bestemt komposisjon, har vi kanskje laget en god layout, men ikke et robust visuelt system.

Skill mellom idé og layout

En layout beskriver hvordan elementene står i akkurat dette formatet.

En idé beskriver forholdet mellom elementene.

Det kan for eksempel være overgangen fra skisse til ferdig løsning, kontrasten mellom rått og bearbeidet, eller et objekt som endrer rolle når det møter et nytt miljø.

Dette skillet er nyttig fordi formatet alltid vil endre seg.

På en bred desktopflate kan et motiv ligge ved siden av teksten. På mobil må de kanskje stå over hverandre. I en brosjyre kan ideen utvikles over et oppslag. I en e-post må den tåle en smalere og mer teknisk begrenset struktur.

Hvis konseptet fortsatt er forståelig etter disse endringene, er det sterkere enn en layout som bare tåler én presentasjon.

Kanalene har forskjellige fysiske regler

Det er fristende å lage én master og bare skalere den.

Det fungerer sjelden godt.

På web brukes blant annet media queries for å endre layout etter viewport og andre egenskaper. MDN beskriver dette som en grunnleggende del av responsivt design. Det betyr at komposisjonen faktisk bør kunne endre seg, ikke bare bli mindre.

HTML-e-post har andre begrensninger. Can I Email vedlikeholder egne støtteoversikter for HTML- og CSS-funksjoner fordi støtten varierer mellom e-postklienter. En effekt som fungerer fint på en nettside, kan derfor trenge en enklere reservevariant i e-post.

Trykk har igjen sine egne krav. Adobe beskriver for eksempel bleed som området som strekker seg utenfor den ferdige beskjæringen, slik at grafikk kan gå helt ut til kanten uten hvite glipper etter trimming.

Dette er tre forskjellige produksjonsmiljøer.

Derfor bør designideen være den samme, men utførelsen trenger ikke være identisk.

Definer hva som ikke kan forsvinne

Når jeg tester om en visuell idé kan bli et system, prøver jeg å finne én eller to egenskaper som må overleve på alle flater.

Det kan være:

  • en bestemt overgang mellom to uttrykk
  • et gjenkjennelig forhold mellom tegning og fotografi
  • en typografisk kontrast
  • en kompositorisk regel
  • en måte et objekt bryter en ramme på
  • en bestemt sekvens eller transformasjon

Dette er konseptets invariabler.

Farge, størrelse, plassering, beskjæring og mengden informasjon kan derimot få lov til å endre seg.

Hvis alt er låst, blir systemet skjørt. Hvis ingenting er låst, blir det utydelig.

Lag en regel, ikke en mal

En mal sier: Sett logoen her, bildet der og teksten i denne boksen.

En regel sier hvorfor elementene henger sammen.

I kampanjeeksemplet med skisse og ferdig uttrykk ble dette avgjørende. Det interessante var ikke at halve flaten alltid skulle være skisse og den andre halvdelen alltid skulle være ferdig design. Det ble raskt mekanisk.

Den sterkere regelen var at ett enkelt skisset element skulle være starten på noe mer ferdig, og at overgangen skulle gi mening i den aktuelle flaten.

På en landingsside kan skissen utvikle seg til en digital seksjon. I en brosjyre kan den bli til en ferdig annonse. I et e-postformat kan den gå over i en kompakt kampanjemodul.

Det er samme idé, men ikke samme komposisjon.

Test ytterpunktene tidlig

Jeg pleide oftere å begynne med hovedformatet og tilpasse resten etterpå. I komplekse konsepter er det mer nyttig å teste ytterpunktene tidlig.

Fire flater avslører mye:

1. en stor desktop- eller presentasjonsflate 2. en smal mobilskjerm 3. en tett kanal som e-post 4. et fast trykkformat

Hvis ideen bare fungerer på den første, bør den justeres før resten av produksjonen begynner.

Denne testen avdekker ofte hvilke deler som faktisk bærer konseptet. Kanskje den store bakgrunnen ikke var viktig. Kanskje hele ideen egentlig ligger i overgangen mellom to materialer, eller i typografien, eller i måten et element beveger seg fra rå skisse til ferdig løsning.

Konsistens betyr ikke likhet

Det er lett å forveksle visuell konsistens med identiske layouter.

Et godt system kan se forskjellig ut fra flate til flate og fortsatt være gjenkjennelig.

I designreferansene mine bruker jeg skalerbarhet om evnen til å bygge en sammenhengende familie på tvers av innhold, størrelser og kanaler, ikke om å forstørre den samme grafikken. Det er et nyttig skille når et konsept skal vurderes før produksjon.

Nettsiden kan bruke mer luft og bevegelse. E-posten kan være flatere og enklere. Brosjyren kan bruke hele oppslaget. En liten mobilmodul kan redusere ideen til ett motiv og én overskrift.

Det avgjørende er at leseren møter den samme visuelle logikken.

Dette ligner på hvordan en visuell identitet fungerer, men i kampanjearbeid er testen ofte strengere: Ideen må fungere raskt, i mange størrelser og ofte med mer varierende innhold.

En fempunkts test før produksjon

Før en idé rulles ut i mange formater, prøver jeg nå å formulere fem ting:

**1. Hva er ideen i én setning?** Hvis den bare kan beskrives som en layout, er den sannsynligvis for avhengig av formatet.

**2. Hva må alltid være igjen?** Velg én eller to visuelle egenskaper som bærer konseptet.

**3. Hva kan endres?** Definer hvilke deler som kan flyttes, forenkles, beskjæres eller bytte uttrykk.

**4. Hvor bryter ideen?** Test liten mobil, e-post, trykk og andre krevende flater før hele systemet bygges.

**5. Finnes det en enkel reservevariant?** Hvis en kanal ikke støtter bevegelse, avansert CSS eller kompleks komposisjon, må ideen fortsatt kunne forstås.

Den beste testen er ikke hovedmockupen

En hovedmockup er ofte laget for å vise konseptet fra sin beste side. Det gjør den dårlig egnet som eneste bevis på at ideen fungerer.

Jeg stoler mer på de vanskelige formatene.

Hvis konseptet fortsatt er tydelig når plassen blir mindre, teknikken enklere og innholdet tettere, har vi sannsynligvis noe som kan utvikles videre.

Da har designideen sluttet å være ett godt bilde og begynt å bli et system.