An Event Apart i San Diego 2014

Anna Eriksson & Sofia Persson

Generellt verkar just metodik vara hetaste buzzen just nu inom UX-området. Hittills har jag, och många med mig, jobbat mest med olika form av statiska wireframes, prototyper och psd-filer för att visualisera design i teamet och för kunden.

Sedan responsive designs intåg krävs det dock nya angreppssätt. Hur visualiserar man design som är kontinuerligt föränderligt? Som ser olika ut i varje device och webbläsare? Och hur mycket design behövs göras innan man börjar koda?

De teman jag ser kring de nya arbetsmetoderna är att

• man börjar koda designen tidigare i utvecklingsprocessen

• inte ser sajter som bestående av massa sidor, utan som ett system

• man jobbar med grafisk design och uttryck separerat från strukturen

Har senaste tiden stött på några av dessa metoder i olika sammanhang, och är själv väldigt sugen på att prova för att se hur det fungerar i praktiken. Mycket låter bra, men det väcker en del nya frågor för mig i hur man praktiskt går tillväga.

Atomic Design

Atomic Design är ett koncept som tagits fram av Brad Frost som handlar just om att se att designa för web som att designa ett system, istället för att designa sidor.

Brad Frost

Just namnet Atomic design kommer av att han liknar komponenterna som bygger upp en sajt med periodiska systemet, där atomer byggs ihop till molekyler, som bildar organismer, som man sedan skapar sidor på en sajt med.

Ett exempel på en atom kan vara en knapp och ett fält

som sedan bildar molekylen sökfält,

dessa kan sedan sättas ihop till organismen sidhuvud

som sedan kan byggas in på olika delar på sajten.

Från ett UX-perspektiv ser jag flera fördelar med denna metodik. Att tidigt kunna visa kunden designstrukturen i önskad device. Att lättare kunna diskutera designen med utveckare, då det spontant känns mer utvecklingsnära att tänka i form av system. Och om man gör designändringar, så slipper man sitta i en psd-fil och uppdatera. Istället uppdaterar man koden, som slår igenom direkt.

Och som alltid när man börjar koda tidigt - det tar längre tid att göra ändringar i kod än i en skiss.

Jag ser också några utmaningar. Hur går denna metodik ihop med att ta fram ett helhetskoncept? Jag har själv behov av ett övergripande designtänk innan jag börjar designa på detaljnivå.

Spana också in Brads Pattern Lab där man kan se hur det fungerar i praktiken. Jag kan verkligen se fördelarna med att kunna labba runt och testa sin design på detta sätt!

Skulle gärna prova att jobba med ett projekt utifrån denna metod, men jag tror det krävs att utvecklare och designers har möjlighet att sitta ihop och jobba, och att kunden är mogen är jobba på ett nytt sätt. I de senaste projekten jag har varit har utvecklarna varit på annan ort och det har krävts låsta designskisser innan man börjar utveckla något.

Style Tiles

En annan talare jag fascinerades över var Samantha Warrens presentation av hennes egenutvecklade designartefakt hon kallar Style Tiles.

Samantha Warren

Style Tiles är tänkta att användas som kommunikationsmedel när kund och designer ska komma fram till ett formspråk till sajten, utan att behöva gå så långt som att göra wireframes.

Fördelarna jag ser med denna artefakt är att man kan enas om ett formspråk utan att behöva blanda in övrig interaktionsdesign i diskussionen. Visar man tex upp en psd-comp med formtänk så blir det lätt diskussion kring navigation, innehåll och annat strukturellt som gör det förvirrande för alla. Det blir mycket effektivare att iterera designen i en style tile jämfört med att uppdatera en psd-fil där alla delar är på plats.

Style Tiles går inte in på hur strukturen på sajten ska se ut, utan fokuserar på fonter, färger, tilltalston, bildval och element.

Det svåra jag ser det kan vara att det är kunden att utvärdera formspråket om de inte ser det i den rätta kontexten, och för designern att tänka bort helheten vid val av font och form.

Det vore intressant att prova använda Style tiles och Atomic design ihop då jag tror de kompletterar varandra bra. Jag hoppas få chansen i nästa projekt!

Bild av Jockrutherford under CC BY-SA 2.0