Vad är modulär design?

Det traditionella sättet att jobba med grafisk form för webben är att helt enkelt ta fram designskisser för de sidor och vyer som en webbplats ska bestå av. Det vanliga brukar vara att börja med startsidan. Som designer tycker jag att det finns flera problem med det här sättet att jobba.

1. Jag lägger mycket tid på att skapa designskisser. Onödigt mycket tid läggs i program för att ta fram skisser som sedan måste översättas till faktisk gränssnitskod.
2. Designen blir svår att återanvända om min uppdragsgivare vill ta fram en ny tjänst, t.ex. ett intranät, beställningsportal eller liknande. Istället är det vanligt att börja från början, och bara återanvända profilfärger och typsnitt.
3. Designen får kort hållbarhet. Med tiden börjar designen att spreta, när en webbplats utvecklas vidare eller fler formgivare kommer in i teamet. Efter ett tag blir det lockande att helt enkelt börja om från början.

De senaste åren har modulär design blivit mer och mer populärt. Det innebär att jag skapar design för mindre delar av en sida, istället för att direkt rita en skiss av hela sidan. Så här brukar jag jobba

1. Jag tar fram wireframes för de viktigaste sidorna, flödena eller funktionerna. Här jobbar jag helst med papper och penna – eller whiteboard – för att snabbt kunna testa nya idéer. Det finns flera olika verktyg för att skapa wireframes (t.ex. Balsamiq), men då blir det lätt för mycket fokus på detaljer som är mindre viktiga i den här delen av projektet.
2. Jag tar fram ett designkoncept, som håller ihop de bärande delarna av den grafiska formen. Det här handlar om att visa hur typsnitt, färgval, bildspråk med mera hänger ihop och tillsammans skapar en helhet. Ett sätt att visa det här är att skapa en grov designskiss för en sida, där jag bara gör ut detaljer om de behövs för att ge en känsla för helheten.
3. Jag börjar skapa den grafiska formen för de designelement som den grafiska formen ska byggas upp av – knappar, länkar, puffar, toppmeny, sidhuvud med mera. Jag jobbar med Figma. men även Sketch har bra stöd för att skapa och återanvända designelement som i Sketch kallas för symboler.

Resultatet av arbetet blir design för en webbplats, men också grunden för ett designsystem. Designsystemet blir ett bibliotek över den grafiska formen, som innehåller typsnitt, profilfärger och alla designelement. Om kunden behöver en ny funktion eller sidmall, så kompletterar jag helt enkelt designsystemet med de designelement som saknas. Fördelarna med det här sättet att jobba är flera:

1. Jag skapar design som är enkel för mig och andra formgivare att jobba vidare med.
2. Jag lägger mindre tid på att rita skisser, och mer tid på att skapa design som är genomtänkt och går att använda.
3. Designsystemet går att använda för alla digitala gränssnitt som min kund har. I princip fungerar det som en beskrivning av hur ett företag ska se ut i det digitala. Det här ger bättre och mer sammanhållen upplevelse för besökaren, för att inte tala om den tid och kostnad som min uppdragsgivare sparar.
4. Det går att jobba iterativt med design, istället för att göra stora omtag.

Designsystemet kan existera i Figma, men jag föreslår att arbetet så tidigt som möjligt flyttar över till gränssnittskod. Men det blir ämnet för nästa blogginlägg från mig, om komponentbibliotek. Stay tuned!

Linn Nilsson är UX-designer på Whitespace. Linn brinner för användbara och tillgängliga gränssnitt.