Et designsystem som lar en nettbutikk vokse uten å bli vanskeligere å bruke.
Vinge er designsystemet bak en nettbutikkplattform som stadig får nye sider og funksjoner. Uten felles regler ville hver ny side fått sin egen variant av knapper, kort og skjemaer. Systemet gir design og kode ett felles grunnlag, så plattformen kan vokse uten å bli vanskeligere å bruke.
Prinsippet er forutsigbarhet. En knapp ser lik ut og oppfører seg likt uansett hvor i butikken den står, så kunden slipper å lære grensesnittet på nytt for hver side. Vi oversatte merkevare, interaksjon og tilgjengelighet til regler og tokens som designere og utviklere bruker hver dag.
Vi delte systemet i tre lag. Grunnverdiene er farge, typografi og avstand. Over dem ligger enkle komponenter som knapper, felt og kort, og øverst sammensatte mønstre som navigasjon. Hvert lag bygger bare på laget under, så en justert farge følger med helt ut i ferdige sider. Alle komponentene oppfyller WCAG 2.1 AA i lys og mørk modus, og de er typet i koden, så de kan bare brukes slik designet er tenkt.
Når plattformen skal ha en ny funksjon, starter arbeidet i komponentene som allerede finnes. Designere og utviklere slipper å ta de samme beslutningene på nytt, og nye sider oppfører seg som de gamle fra første dag.
Andre prosjekter
