Web · 08
Ét system for farver, typografi og komponenter, så alt hænger sammen og kan vokse.
Kontakt osEt designsystem er et sæt regler og komponenter, der findes både i Figma og i kode: farver, typografi og afstande som tokens, og knapper, kort, formularer og sektioner som komponenter med dokumenterede varianter. Ydelsen findes, fordi sites uden system vokser skævt: hver ny side får sin egen knap, marketing opfinder nye farver, og udviklere bygger det samme tre gange.
Vi starter med at gennemgå det, I har, i Figma, kode og kampagner, og samler det til ét sæt tokens. Derefter designes komponenterne i Figma med varianter og tilstande, og udvikleren bygger dem i kode (Astro, React eller WordPress-blokke) med samme navne og samme tokens. Tilgængelighed testes på komponentniveau. Dokumentationen viser, hvornår man bruger hvad, med eksempler.
Bagefter har I ét Figma-bibliotek og ét komponentbibliotek i kode, der stemmer overens, og dokumentation, som både designere, udviklere og marketing kan bruge. Nye sider og kampagner bygges af det, der findes, og ligner jer uden gennemgang. Vi kan vedligeholde systemet løbende, så Figma og kode ikke driver fra hinanden, når der kommer nye behov.
Vi samler alt eksisterende design: Figma-filer, sitet, kampagner, præsentationer, og kortlægger farver, typografi og komponenter i brug. I får et overblik over dubletter og uoverensstemmelser og et forslag til omfang.
Farver, typografi, afstande, radius og skygger defineres som tokens i Figma-variabler og CSS. Kontrast kontrolleres, og de vigtigste beslutninger dokumenteres med begrundelse, så de holder.
Komponenterne designes med varianter og tilstande og bygges i kode med samme navne. Vi starter med de 15 til 20 mest brugte og tester tilgængelighed på hver. De vigtigste sider samles som eksempler.
Dokumentation skrives med eksempler på brug og misbrug, og designere, udviklere og marketing oplæres. Vi aftaler, hvem der ejer systemet, og hvordan nye komponenter kommer ind.
Farver, typografi, afstande, radius og skygger defineres som navngivne tokens, fx color-brand-primary eller space-4, i Figma-variabler og i kode som CSS-variabler. Skal en farve justeres, ændres den ét sted og slår igennem overalt. Tokens er også der, tilgængelighed sikres: kontrastforhold kontrolleres på tokenniveau, så ingen komponent kan blive ulæselig. Tokens eksporteres som en fil, så annoncer og præsentationer kan bruge de samme værdier.
Knapper, kort, formularer, navigation og sektioner defineres én gang i Figma med varianter (størrelse, tilstand, farve) og bygges én gang i koden med samme navne. Nye sider sættes sammen af komponenterne i stedet for at tegnes forfra. Det gør en ny landingsside til en times arbejde og betyder, at en rettelse i en komponent rammer alle sider.
Hver komponent dokumenteres med, hvad den er til, hvornår man bruger den, og hvad man ikke gør. Marketing bruger den til at bygge landingssider og kampagner i CMS'et, udviklere til at bygge nye funktioner, og eksterne bureauer til annoncer og præsentationer, så alt ligner jer, også når det laves hurtigt.
Et designsystem holder kun, hvis det passes. Nye komponenter tilføjes både i Figma og kode, ændringer versioneres, og forældede varianter fjernes. Vi kan tage det ansvar i en fast aftale med kvartalsvise gennemgange, eller aflevere en proces, jeres eget team følger. Uden det ender Figma som et arkiv, og koden bliver den eneste sandhed.
Eksempel: Zederkof A/S
Zederkof A/S fik ny visuel identitet og skulle bruge den på website, B2B-webshop, annoncer og præsentationer. Vi byggede ét designsystem i tre sprints: tokens for farver, typografi og afstande, ca. 120 komponenter i Figma med varianter og tilstande, og de samme komponenter i kode til website og webshop. Marketing bygger nu landingssider og kampagner selv inden for systemet, og de eksterne annoncer laves ud fra samme bibliotek, så alt hænger sammen uden en gennemgang hver gang.
Skræddersyet design og udvikling af møbelshop. Markedsføring gennem PPC med 200% vækst.
Se alle cases
All-around design, udvikling, branding, strategi og søgemaskineoptimering
Nyt PrestaShop site og 360 graders digital marketing med SEO og PPC annoncering.
Avanceret Google Tag Manager setup til konverteringstracking
Et digitalt sats på e-handel, der gav pote. Se vores arbejde for Werenberg, og hvordan vækstkurven blev stejl med en stabil og udviklingsdygtig webshop.
Ofte stillede spørgsmål
Nej. Selv et lille site vinder på konsistens og hastighed i udvikling. Forskellen er omfang: et lille site har måske 15 komponenter, et stort over 100.
Ja. Vi gennemgår den, rydder op i dubletter og farver, der ikke bruges, og strukturerer den med tokens og varianter, så den kan oversættes til kode én til én.
WordPress er velkendt og fleksibelt til indholdstunge sites. Headless (Astro med et hovedløst CMS) giver hastighed og sikkerhed og passer til sites, hvor performance er afgørende. Vi anbefaler efter opgaven.
Typisk 6 til 12 uger fra workshop til lancering, afhængigt af omfang og indhold.
Nødvendige cookies får siden til at virke. Statistik og markedsføring sætter vi kun med dit samtykke. Du kan altid ændre valget nederst på siden. Læs cookiepolitikken.
