At designe i browseren

For ca. 2 år siden hvor jeg satte mine første skridt i de daværende kedelige kontorlokaler hos Beneath, et team som i sin spæde start stadig var ved at finde ud af hvordan tingene skulle virke, var jeg den nye dreng i klassen da min baggrund var mere teknisk end pixelpusher.

På daværende tidspunkt var værktøjerne vi brugte noget ala Photoshop, Balsamiq og en tidlig beta version af Macaw. Da jeg havde min tekniske baggrund, og ikke følte jeg performede mit bedste med værktøjerne, foreslog jeg at vi skulle prøve med en html prototype baseret på Bootstrap (som netop var kommet i version 3.x.x). Denne prototype skulle bruges som et wireframing og prototype værktøj. Heldigvis var min chef enig, og vi startede med at pensle ud hvordan vores setup kunne være så hurtigt og effektivt som overhovedet muligt.

Valget falgt på en modificeret udgave af Bootstrap3, hvor vi havde skraldet de fleste filer væk, da man finder en masse fyld som ofte ikke skal bruges. Senere hen blev det til en trimmet version hvor det nærmest kun bestod af dets grid.

Sammen med Mixture (desværre ikke-eksisterende i dag), havde vi et stærkt setup hvor både jeg som frontend designer og resten af teamet som ikke havde samme tekniske flair et fælles setup vi alle kunne bruge.

Med udgangspunkt i vores nye prototype og wireframing værktøj, forsøgte vi at optimere designprocessen ved at designe direkte i browseren, altså, uden om Photoshop.

At designe i browseren

Der er både fordele og ulemper ved at designe direkte i browseren. En af de største fordele er at du med det samme får dit resultat at se, i stedet for at det først skal overleveres til udviklerne, som så først skal implementere det hele i et eller andet monstrum af et CMS. Samtidig giver det dig også mulighed for at se dit arbejde på andre devices så som mobiltelefoner, tablets og mon ikke snart ure?

Hvis man tager udgangspunkt i de forskellige roller i et typisk projekt, kan man ridse det op således:

Som kunde

At designe i browseren betyder at du som kunde meget hurtigere får at se hvad du køber, i en tidlig fase. Omend det ikke er færdigt, får du altså et bedre indtryk af, hvordan dit projekt ender med at være.

Som designer

Giver det en hurtigere vej til at fange potentielle UX problemer, før de skal implementeres af udviklerne. Dette giver dig som designer mulighed for at tage en dialog med din kunde i en tidlig fase, fremfor efter hele designet er blevet implementeret i et CMS.

Når man tester design

At teste design på din målgruppe er essentiel for et godt resultat, det ved vi godt. At designe direkte i browseren betyder at dine brugertestere får en mere korrekt oplevelse af produktet. Det er ikke bare statiske billeder, men sider man kan klikke imellem som havde det været et færdigt website.

Går man traditionelle veje såsom Photoshop, skal man designe mere færdige sider, for at de kan testes ordentligt. Man skal desuden lave mange flere variationer for at vise effekter, knapper og deslige. Når man arbejder direkte i browseren er det tilgengæld piece of cake at f.eks. animere en dropdown menu.

Designe i browseren er ikke altid det rigtige svar

Fordele kan man nævne mange af, men der er stadig ulemper. En af de større probelmstillinger kunne være at man som kunde har brug for et mere færdigt design med det samme, da man har et udvikler team som sidder og venter. Det kunne også være at man havde brug for et færdigt design til at kunne præsentere det for ens ledelse eller potentielle investorer.

En anden problemstilling kunne være ens tidshorisont. Med udgangspunkt i de projekter jeg har lavet ved at designe dem i browseren, er der en tendens til at det bliver en længere proces, tilgengæld er resultatet altid mere skarpt, og deraf bedre.

KILROY Travels værdsætter metoden

Tilbage i foråret 2014 introducerede vi teknikken overfor KILROY Travels webmanager. Hør her hvad han sagde:

Vi har på et meget tidligt stadie i projektet haft mulighed for at mærke og fornemme diverse funktioner og flows, som var det på et helt færdigt website. Det har været en virkelig god proces, som vi er sikre på, munder ud i et meget bedre slutresultat, end hvis vi var gået den traditionelle vej.

Jamen, dør Photoshop så?

Nej, slet ikke! Når jeg bliver spurgt om hvilken metode der er bedst, er min anbefaling altid den samme. Få styr på kravene til dit projekt, og vælg derefter de rigtige værktøjer til opgaven. Der er ingen gylden opskrift, slutresultat er trods alt det samme.

Kunne du tænke dig at høre mere om hvordan processen foregår, er du velkommen til at kontakte mig via LinkedIn eller Twitter.

Hvis du synes det var interessant at læse, hvorfor så ikke modtage det direkte i din indbakke?