Hannah Pehrson

– Hur kan en skapa ett smidigt workflow vid design av webbsidor och applikationer?

I alla designsituationer där det finns en beställare/kund, en eller flera designers och ett förväntat slutresultat genomgår ni tillsammans ett antal steg. Låt oss smälta samman denna process och kalla designsituationens alla steg, inkl. metoder och verktyg, för workflow.

Hur ett workflow fungerar varierar väldigt, mycket beroende på vem du är och hur din arbetsplats ser ut. Är du en webbdesigner som skapar det visuella och sedan passar vidare programmeringen, eller är du en front en utvecklare som ansvarar över både det visuella och programmering? Rollerna och alternativen är många.

Oavsett var i processen som din kompetens kommer in bör du och alla i ett eventuellt designteam sträva efter en genomtänkt och smidig designprocess från början till slut. Fördelningen av anställda, kompetens och arbetsuppgifter kan skilja sig från arbetsplats till arbetsplats, och därmed ser behoven olika ut. Men oavsett vad finns ett behov av att ha ett bra workflow som är gynnsamt för designsituationen, de anställda, ekonomin samt ur ett hållbarhetsperspektiv.

Jag kommer i detta inlägg presentera en rad olika metoder och verktyg att nyttja för att skapa ett hållbart och smidigt workflow vid framtagning av webb och applikation. Det är dock viktigt att komma ihåg att en designsituation är aldrig den andra lik då design är en organisk process, och valet av verktyg kan därför skifta beroende på behov men också beroende på personliga preferenser.

Denna artikel beskriver ett workflow som förutsätter att förarbetet är gjort och att all nödvändig information är inhämtad.

1.arbetsflöde

 

Skiss

Många designers är eniga; varje designprocess bör inledas analogt (Coffin, 2013). Så länge en idé endast existerar i ditt huvud är det lätt att förbise dess brister. Så genom att externalisera idén, med penna och papper som verktyg, kan du hjälpa idén att gå från abstrakt till konkret för att sedan kunna betrakta och bedöma den på ett mer balanserat sätt.

För att effektivt arbeta divergent och utforska flera olika idéer och alternativ är det en förutsättning att bedömningsprocessen går relativt fort. Att starta designprocessen direkt vid datorn påskyndar förvisso produktiviteten, men i och med att processen går så snabbt tillåter vi inte våra hjärnor att ta sig tid att utveckla nya idéer (Coffin, 2013). Genom att istället påbörja den kreativa processen med att rita för hand tvingas du sänka ditt arbetstempo, vilket i sin tur resulterar i att din hjärn får tid att utveckla nya idéer, koncept och riktningar.

Hjärnan har begränsad kapacitet och kan inte forma flera koncept på en och samma gång, så genom att snabbt föreviga idén på papper blir denna skiss i sig en slags “extern hjärna”, vilken tillåter din hjärna att gå djupare in i problemlösandet efter hand (Coffin, 2013). Att ha flertalet olika idéer på papper hjälper oss även att enkelt komma på nya idéer baserat på kombinationer av flertalet av de redan nerskrivna idéerna. Resultatet är en stor variation av alternativ – en större variation av idéer än vad vi kan hantera enbart i våra huvuden.

Grafiska designern Drew Coffin (2013) rekommenderar fyra saker att tänka på när det kommer till skissande:

  • Bara skissa, inte finjustera – Håll din design enkel och opolerad. Detta gör det lättare att skrota idéer, börja om eller göra ändringar utan att känna som att du slösar bort tid. Använd din penna och papper för att designa och använd sedan din programvara för att producera.
  • Hylla kaoset – Låt dina idéer flöda fritt. Lägg inte vikten på att hålla saker snyggt och prydligt, utan fokusera istället på att få dina idéer organiserade på pappret.
  • Var inte rädd för misstag – Om du gör ett misstag, dra nytta av det. Rita över det eller skriv själv en anteckning, men kasta inte bort inte hela pappret. Ibland är det just misstag som ligger till grund för storslagna idéer.
  • Bär alltid med dig en skissbok – Förvara dina skisser och idéer i en skissbok och bär den med dig vart än du går. Du vet aldrig när en idé uppenbarar sig och det är lätt att glömma bort även de bästa idéerna.

 

Wireframe

Wireframing är kort fattat informationsdesign vars funktion är att arrangera webbsidans/applikationens innehåll och på så sätt peka ut vilken information som skall synas och dess hierarki. Både gränssnittselement och navigationssystem märks ut för att det skall bli tydligt hur alltsammans hänger ihop och fungerar i relation till övrigt innehåll.
Att distraheras av färger och val av typsnitt är lätt och även om du har en tydlig vision i huvudet som även inkluderar det visuella är det inte där som ditt fokus bör ligga i början av designprocessen.

Då en wireframe inte skall vara estetiskt tilltalande är alternativen många när det kommer till verktyg att använda. Det finns gott om programvaror som tillhandahåller det du behöver, men det erbjuds idag även många webbapplikationer som gör sig bra i verktygslådan.

Tips! Om du använder samma program till att göra wireframes och mockups kan du enkelt använda samma gridsystem och lätt omvandla wireframen till en mockup längre fram i processen.

Adobe Illustrator
Adobes programvaror, som ju många designers är välbekanta med, erbjuder flertalet verktyg att använda i skapandet av wireframes. Att använda ett verktyg som du redan orienterar dig felfritt inom har sina fördelar och gör processen smidig då du inte behöver inhämta någon ny kunskap.

För att förenla processen finns det flertalet kit med symboler och färdiga former att hämta hem och använda gratis, däribland dessa som Pixeden, Kai Hausen och Giles Newman erbjuder.

Mockingbird, MockFlow och Moqups
Både Mockingbird, MockFlow och Moqups är webbaserade mjukvaror och är i sitt gränssnitt, funktionalitet samt arbetsupplägg relativt lika varandra. Arbetet går smidigt tack vare rena användargränssnitt samt att de båda verktygen baserar arbetet på en drag-and-drop-funktion. De element som är vanligt förekommande i wireframes, så som knappar, rullningslister etc. finns förprogrammerade för att effektivisera processen.

De tre webbapplikationerna bygger alla på en social struktur och erbjuder enkel sammankoppling med kund och kollegor. Du och övriga i designteamet kan samtidigt arbeta i samma dokument och genom en direktlänk kan wireframen sedan delas med kund där denne har möjligthet att kommentera direkt i dokumentet. Något som annars kan vara en utdragen process när korrektur och mail skall skickas fram och tillbaka eller möten skall bokas in.

Interaktiv wireframe
Redan i wireframe-stadiet kan det vara effektivt att skapa en prototyp för att demonstrera funktion, så att du i tidigt stadie kan föra dialog kring denna med kund och användare.

I Mockingbird kan du enkelt sammankoppla olika gränssnitt med varandra för att påvisa navigationen, och om det är Adobe Illustrator du använder för wireframe kan du importera denna i Adobe InDesign där du med de relativt nya funktionerna kan göra en interaktiv prototyp.

Mer information om prototyper får du längre ner i artikeln, men låt mig ändå presentera ytterligare två verktyg som kan hjälpa dig med just detta: InvisionUXpin.

 

Mockup

Mockups är för många en naturlig del av designprocessen och ett verktyg som med fördel används för att kommunicera med kund, inom designteamet samt med sig själv och för att konkretisera sin inre vision.

Huruvida du bör skicka pixel-perfekta mockups till kund eller ej råder det delade meningar om. De som ställer sig positiva till detta menar att kunden då får se webbsidan / applikationen så som den faktiskt skall komma att se ut vilket förebygger oönskade överraskningar. Av samma anledning kan kunden även lätt komma med feedback på stil och känsla.

De som har negativ inställning till att skicka såpass välarbetade mockups till kund menar att det är just det som är själva problemet – de ser för färdiga ut. Löwgren & Stolterman (2004 s.45) menar att det kan ha en negativ inverkan på designprocessen i stort då kunden dels kan tro att webbsidan eller applikationen är färdig att levereras när det i själva verket kan vara många veckors arbete kvar innan leverans kan ske, dels kan kunden vara rädd för att komma med krav om ändringar i tron om att det kommer att kasta bort redan gjort arbete.

En som har försökt att skapa en lösning till detta problem är designern Samantha Toy Warren, grundaren av Style Tiles. Hon menar likt Löwgren & Stolterman att en pixel-perfekt mockup är allt för precis. Istället har hon tagit tillvara på det koncept som en inredningsdesigner använder då denne presenterar färg- och tygprover för kunden, och tillhandahåller en mall att använda för att presentera den tilltänkta webbsidan på samma sätt. Denna mall skall presentera tilltänka färger, mönster, typsnitt i en hierarki samt övergripande manér.

När det kommer till att välja ett program att skapa mockups i är alternativen idag många, och för att hålla det relativt kort har jag valt att titta närmare på tre program som skiljer sig något åt sinsemellan; Sketch 3, UXpin och Adobe Edge Reflow CC. Beroende på hur tjänsterna, kunskapen och arbetsfördelningen ser ut på just din arbetsplats kan behoven skifta, och därför kan ett av dessa program, eller två kombinerat, passa just dig bäst medan ett annat är det bästa alternativet för någon annan.

 

1.jämförelse2

Vill du utforska ytterligare alternativ utöver dessa tre rekommenderar jag att ta en titt på Googles egna webbapplikation eller Macaw.

“Build it once to get an idea of what it will look like, then build it for real.
Then throw the PSD away because it’s no use to anyone”

I branschen har Adobe Photoshop länge varit standard inte bara när det gäller fotoredigering, utan används även frekvent av webbdesigners världen över för att skapa mockups. Varför jag i dag inte lyfter fram detta program är för att det inte längre bidrar till ett effektivt arbetsflöde i och med de förändringar som webben har genomgått de senaste åren. Idag krävs det att du arbetar responsivt och kan presentera flertalet gränssnitt baserat på de olika skärmstorlekar de skall visas på – något som försvåras av att Photoshop bland annat sätter allt i fasta pixelbredder.

 

Sketch3
Sketch är ett program skapat specifikt för dig som är UI och/eller UX-designer och erbjuder en mängd verktyg som underlättar skapandet av såväl gränssnitt som ikoner. Programmet är 100% vektorgrafik och är i funktionerna som erbjuds väldigt likt Adobe Illustrator. Detta gör att du enkelt även kan skapa logotyper och dylikt direkt i programmet.

3.arbetsyta_Sketch

Användargränssnittet är rent och avskalat, och då de funktioner som finns är få men kraftfulla är det enkelt att lära sig och få ett smidigt flöde i programmet.

I Sketch arbetar du parallellt i samma dokument med artboards för olika skärmstorlekar, och då webbsidor idag inte har en definierad pixelbredd är layouten flexibel. Genom att du enkelt kan skapa symboler av valfria objekt, Shared styles och Text Styles kan du enkelt återanvända samma grafiska element över hela dokumentet. Om du sedan måste göra en ändring appliceras denna på alla objekt med samma style – något som är mycket effektivt i ett dokument med många artboards.

Något som nästan är en förutsättning idag är att den mockup du skapar sedan skall kunna realiseras. Till skillnad från t.ex. Photoshop, som erbjuder diverse filter och inställningar, är alla egenskaper som du ger de grafiska elementen i Sketch (toning, skugga etc) möjliga att framställa i CSS.

Sketch finns i dagsläget enbart tillgängligt för de som arbetar i iOS, så om du är en webbdesigner som senare skall skicka vidare arbetsfilen till en programmerare vill det till att denne har rätt operativsystem. Det finns dock vägar att ta för att komma runt detta då bland annat Avocode, ett program som bland annat exporterar assets, har stöd för Sketch-filer.

I övrigt är export-funktionen i Sketch smidig då du enkelt bara klickar på objekten du vill exportera, väljer exportinställningar och sedan kan få ut delar eller hela designen som PNG, JPG, TIFF, PDF, EPS eller SVG.

Sketch erbjuder en uppsättning med ikoner och dylikt, men det finns många tillägg att hämta från bland annat Bootstrap på Sketch App Sources.

 

UXpin

UXpin är en webbapplikation och kan därmed nyttjas vart du än är. Applikationen lämpar sig för dig som vill skapa mockups, men kan även nyttjas hela vägen från wireframe till prototyp – något som skapar ett smidigt flöde i processen.

Applikationen har ett rent gränssnitt och de funktioner som erbjuds är väl synliga.
Förutom standardformer erbjuds du, likt i Sketch, tusentals färdiga uppsättningar med grafiska element, bland annat från Bootstrap och Foundation.

4.arbetsyta_UXpin

UXpin erbjuder flertalet funktioner att nyttja för att dela din design med kollegor och kund, och tanken är att alla skall arbeta tillsammans i strävan efter önskat resultat. Då arbetet kan följas i realtid och kunden enkelt kan ge feedback direkt i applikationen behövs inte lika många tidskrävande och kostsamma möten, exporter och mailande fram och tillbaka.

 

Abobe Edge Reflow CC (Preview)
Som jag skrev tidigare kommer jag inte att presentera Photoshop av redan nämnda orsaker, men det betyder inte att programmet ändå inte är ett givet verktyg i många webbdesigners arbete. En av Photoshops brister är avsaknaden av möjlighet att arbeta med responsiv design, något som Adobe nu har arbetat för att förbättra. I februari 2013 släpptes Edge Reflow CC som skall komplettera Photoshop vid design av webb och applikationer.

2.arbetsyta_edgereflow

Edge Reflow CC erbjuder just det som Photoshop saknar – multipla arbetsytor inom dokumentet och enkel export av assets, men framför allt möjligheten att ta kontroll över designen i frågan om responsivitet. Och då programmets funktioner är helt baserade på CSS har du också möjlighet att ta full kontroll över värden och egenskaper så som margin, padding, position och Z-index, för att nämna några.

Edge Reflow är lätt att koppla samman med Photoshop med hjälp av en gratis plugin; Photoshop CC Connect. Denna plugin gör att du enkelt kan synkronisera och överföra en befintlig design skapad i Photoshop till Edge Reflow för att där göra den responsiv. Jag anser dock att Adobe måste arbeta mer på denna funktion då bl.a. objekt och textelements egenskaper kan gå förlorade vid konverteringen, vilket innebär dubbelt arbete när dessa sedan måste rättas till och/eller återskapas.

2.reflow_resultat

Vänster: Design i Photoshop. Höger: Samma design importerad till Edge Reflow från Photohop.

I dagsläget är synkroniseringen mellan Photoshop och Edge Reflow enkelriktad, vilket gör att en mockup bearbetat i Edge Reflow inte går att exportera som .PSD för att senare öppna i Photoshop igen. De enda format som erbjuds för export är textfiler med HTML och CSS. Adobe gör dock klart att koden som exporteras i dagsläget inte utgör en färdig webbplats då det inte finns någon direkt kontroll över varken HTML eller CSS (Bracey, 2014). Istället bör koden betraktas som enbart en förhandsgranskning och stöd i processen. Därmed är Edge Reflow kanske inte det bästa verktyget för dig som skall programmera en komplett webbplats, men om du är ute efter ett designverktyg är programmet ett bra alternativ.

Som du märker finns det fortfarande många brister i programmet, men då det fortfarande är under utveckling finns det stor potential. Huruvida Adobe kommer utveckla exportverktygen för programmet eller ej är ännu oklart, samtidigt som ryktet säger att det kanske inte ens kommer att användas till något mer än just visuell presentation. Med andra ord är Edge Reflow just nu bara ett designverktyg med potential att bli mer.

 

Prototyp

När en kund har tagit del av och godkänt mockups är det många som sätter igång att programmera webbsidan/applikationen, men det finns fler aspekter att ta hänsyn till i designprocessen. Hur ser interaktionen ut? Animationer? Övergångar?

Är du en frontend-utvecklare som både designar och programmerar kanske du bygger upp webbplatsen direkt i kod och får på så vis en prototyp som kunden kan se i webbläsaren. Och trots att detta av många anses vara det smidigaste, för att inte känna att en gör samma jobb två gånger, saknar kodning den kommunikativa grund som följande program erbjuder:

UXpin

Som jag skrev tidigare i artikeln är UXpin ett ypperligt verktyg att använda för både wireframes och mockups, men applikationen har ytterligare en sträng på sin lyra – möjligheten att skapa prototyper. Alla element på arbetsytan kan tilldelas egenskaper och bestämmelser för vad som skall hända, när det skall hända och vad följden blir.

 

4.uxpin_actions


InVision
InVision är en gratis webbaserad applikation som du kan använda när du vill skapa en prototyp och designa en användarupplevelse. I InVision finns alltså inget verktyg för att skapa mockups, utan dessa importerar du. Applikationen stödjer både .Psd, .Ai och .Sketch och vid import av en fil extraheras dina artboards och dina slices automatiskt till assets i applikationen. Arbetsflödet är simpelt – du importerar din mockup, markerar ett element och väljer vad som skall ske.

InVision erbjuder, precis som UXpin, stort stöd för teamwork och dess delningsfunktion gör att du enkelt kan dela arbetet med både designteamet och kund direkt i applikationen. Genom Live Share kan du och övriga deltagare använda kommentars- och ritfunktion för att i realtid påpeka ändringar och förbättringar.

 

Slutsats

De metoder och verktyg som jag nu har presenterat har alla sina fördelar men även nackdelar. Som jag har beskrivit lämpar sig de för olika saker, och beroende på vad du har för behov kan programmet som anses “bäst” variera.

En designprocess och dess verktyg är som jag skrev tidigare dels en fråga om personliga preferenser, men då en ofta jobbar i team är det viktigt att hitta en tydlig struktur att följa. De verktyg som jag nu har presenterat är bara en bråkdel av de verktyg som finns att tillgå, men oavsett hur just ditt workflow ser ut hoppas jag att detta är en liten guide på vägen.

5.arbetsflöde

Referenser

Bracey, Kezz (2014) Five useful things you can do with Adobe Reflow right now. [Elektronisk] Tutsplus. Tillgänglig:<http://www.adobe.com/devnet/edge-reflow/articles/edge-reflow-getting-started.html> Hämtad: 2014-01-17

Coffin, Drew (2013). The Importance of Pen and Paper in Design. [Elektronisk] Web Marketing Today Tillgänglig:<http://webmarketingtoday.com/articles/the-importance-of-pen-and-paper-in-design/> Hämtad: 2014-12-18

Löwgren, Jonas. Stolterman, Erik (2004). Design av informationsteknik: materialet utan egenskaper. 2., [rev. och utök.] uppl. Lund: Studentlitteratur