Vad är designmönster och modulär design?

Av Peter Antonius

Modulär design innebär att jag bygger upp designen för en webbsida genom att först arbeta fram design för de delar som sidan kommer att bestå av. Här berättar jag mer om hur det fungerar i praktiken, och varför jag och Whitespace jobbar på det här sättet. 

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 Sketch, som har bra stöd för att skapa och återanvända designelement som i Sketch kallas för symboler. Ett annat exempel på verktyg är Figma.

Resultatet av arbetet blir design för en webbplats, men också grunden för ett designmönster. Designmönstret 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 designmönstret 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. Designmönstret 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.  

Designmönstret kan existera i Sketch, 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 och digitala stilguider. Stay tuned!

Vill du veta mer om hur vi jobbar med design? I så fall är du varmt välkommen att höra av dig till oss på Whitespace.

Peter Antonius är UX-designer och gränssnittsutvecklare på Whitespace. Peter brinner för användbara och tillgängliga gränssnitt.