En jämförelse av designverktyg

Något jag alltid försöker bli bättre på är att göra saker i rätt ordning. Oftast när jag får ett uppdrag har jag så mycket inspiration att jag vill sätta igång och koda ihop sidan så fort som möjligt med resultatet att jag ändrar design och layout hundra gånger innan jag blir helt nöjd. Att använda mig av en designskiss med wireframes, moodboard med färgschema och typsnitt, och sidlayout med innehåll innan jag sätter igång med själva kodningen av en webbsida har däremot visat sig fungera MYCKET bättre.

Här kommer en liten jämförelse av tre av de största verktygen för designskisser samt hur jag jobbar med min favorit för stunden, Adobe XD. Inlägget är en deluppgift i kursen DT152G på Mittuniveristetet.

Adobe XD och Sketch

Adobe XD lanserades 2016 som ett alternativ till Adobes övriga, och mer kända, designprogram Photoshop, Illustrator och InDesign.

Sketch som länge varit det populäraste alternativet för designers och utvecklare lanserades redan 2010. Det är ett lättarbetat designverktyg som från början utvecklades som en app för Mac men som nu fungerar för alla plattformar.

Både Sketch och Adobe XD går att använda till prototyper, alltså att man gör designskisserna interaktiva. Det går också att bjuda in flera användare som kan arbeta tillsammans med samma skiss.

Båda har gratisversioner med grundläggande funktioner samt liknande utseende. Sketch har ett verktygsfält i överkant som Adobe XD saknar och detta gör det smidigare att göra ändringar i skissen. Adobe XD har däremot en funktion för responsivitet som gör att elementen ändras automatiskt i proportion till vilken skärmstorlek som skissen ska användas till.

Adobe XD har också en populär funktion som kallas Repeat grid. Med denna kan man kopiera och upprepa ett element för till exempel en lista eller kolumner.

Sketch
Figma

Figma

Figma är ett webbaserat designverktyg som blir mer och mer populärt bland webbdesigners och webbutvecklare. Även detta har en gratisversion med grundläggande funktioner och liknande interface som Sketch och Adobe XD.

I Figma arbetar man med ”frames” istället för med ”artboards” som i Adobe XD. Man kan använda sig av olika frames för header, footer eller andra element och sedan kombinera dessa till en färdig sida. Jag har själv inte provat att använda mig av detta verktyg men efter vad jag har läst mig till verkar det vara en uppskattad funktion.

Det finns mängder av plugins som underlättar arbetet för både Sketch och Adobe XD och båda två är anpassade för att enkelt hitta och installera nya plugins. På detta område har Figma ännu inte hunnit lika långt vilket bland många anses vara en stor nackdel.

Hur jag jobbar med Adobe XD

Med Adobe XD gör jag både moodboards, wireframes och designskisser på ett och samma artboard och får på så sätt bra överblick över arbetet. Jag brukar göra en noggrann skiss över en startsida samt en eller ett par av undersidorna som får fungera som mallar för övriga sidor.

Artboard i Adobe XD med designskisser
Exempel på ett arbete i Adobe XD

Sedan kopplar jag ihop knappar eller delar av menyn på startsidan till den undersida som den refererar till. På så vis går det att surfa runt på sidan på samma sätt som i en webbläsare.

I det här stadiet brukar jag visa upp skissen för kunden eller de jag jobbar tillsammans med så vi gemensamt kan gå igenom sidan innan jag börjar själva programmeringen. Mycket smart!