Material Design 3

Hvad er Material Design 3, og hvem står bag

Material Design er et designsystem udviklet af Google. Det blev annonceret første gang den 25. juni 2014 på Googles udviklerkonference Google I/O, oprindeligt under kodenavnet "Quantum Paper". Grundidéen var en metafor om digitalt "materiale": flader med kanter, dybde og lag, der opfører sig efter forudsigelige fysiske regler. Googles designchef Matías Duarte formulerede det som, at materialet "har fysiske flader og kanter", men — i modsætning til rigtigt papir — "udvider sig og omformer sig intelligent". Denne metafor forklarer, hvorfor Material Design historisk har lænet sig op ad gitterbaserede layouts, responsive animationer og overgange, padding og dybdeeffekter som lys og skygger.⁵

Siden 2014 er systemet gået gennem flere store versioner. Material Design 2 kom i 2018 og lagde større vægt på tilpasning, med mere luft (white space), afrundede hjørner og farverige ikoner. Material Design 3 blev annonceret i maj 2021 på Google I/O under navnet Material You. Den nyeste version lægger vægt på mere animation, større knapper og — vigtigst — muligheden for at generere brugerdefinerede temaer ud fra brugerens egne præferencer. M3 er altså ikke et brud med den oprindelige idé, men en videreudvikling, hvor personalisering og tilpasning rykker i centrum.⁵

Som ressource lever M3 på webstedet m3.material.io. Det er her, Google offentliggør den samlede dokumentation: designprincipperne, specifikationerne og de færdige komponenter. Afsenderen er altså Google selv, hvilket har to konsekvenser, du bør holde fast i. For det første er M3 en primærkilde til, hvordan Android og Googles egne apps forventes at se ud og opføre sig — det er ikke en tredjeparts fortolkning, men systemets kanoniske definition. For det andet er systemet uadskilleligt fra Googles produktstrategi: det udvikler sig i takt med Android, og de designbeslutninger, der træffes, tjener først og fremmest Googles platforme.¹⁵

Det er værd at skelne mellem "Material Design" som idé og "Material Design 3" som den aktuelle, dokumenterede udgave. Når nogen i dag siger "vi følger Material", mener de i praksis næsten altid M3. Ældre projekter kan dog stadig hvile på Material Design 2, og fordi de to versioner adskiller sig markant i både farvesystem og komponentudtryk, er det ikke ligegyldigt, hvilken version en kilde eller et bibliotek refererer til. Tjek altid, om den dokumentation, du slår op i, faktisk er M3.

Hvad indeholder ressourcen

Material Design 3 er struktureret som et opslagsværk med nogle få gennemgående lag. På det øverste niveau finder du Foundations — grundlaget — som webstedet selv beskriver med sætningen "Learn the basics of Material". Det er her, de tværgående principper bor: hvordan systemet tænker om tilgængelighed, adaptivt layout på tværs af skærmstørrelser, interaktionstilstande og tilpasning. Foundations er det, du læser for at forstå intentionen bag systemet, før du dykker ned i de enkelte byggeklodser.²

Under Styles ligger de visuelle råvarer. Her giver M3 detaljerede specifikationer for de fire klassiske stildimensioner: farve, typografi, ikonografi og spacing. Farvesektionen er særligt central i M3 og præsenteres med opfordringen "Create personal color schemes" — altså at bygge personlige farveskemaer frem for at vælge løse enkeltfarver. I stedet for at du udpeger en "knapfarve" og en "baggrundsfarve" i flæng, arbejder M3 med farveroller og sammenhængende skemaer til lyst og mørkt tema, så farverne hænger konsistent sammen på tværs af hele fladen. Typografien er tilsvarende organiseret som en skala med definerede roller frem for tilfældige skriftstørrelser.³¹

Næste lag er komponenter: de standardiserede UI-elementer, som en app består af — knapper, kort, navigationselementer, dialoger, tekstfelter, chips og så videre. For hver komponent leverer M3 en specifikation af, hvordan den skal se ud, hvilke tilstande den har (fx hvile, hover, tryk, deaktiveret), og hvordan den bør bruges. Pointen med standardiserede komponenter er, at du ikke skal genopfinde en knap for hver skærm; du vælger den rette komponent og konfigurerer den inden for systemets rammer.¹

Øverst i abstraktionen finder du mønstre (patterns) og best practices: anbefalinger for tilbagevendende designproblemer, der går på tværs af enkeltkomponenter — for eksempel hvordan navigation, layout eller udvælgelse bør løses. Hvor en komponent svarer på "hvordan ser en knap ud", svarer et mønster på "hvordan bygger jeg en god navigationsstruktur". Tilsammen giver de fire lag — foundations, styles, components og patterns — en gennemført kæde fra princip til konkret pixel.¹

Et element, der binder det hele sammen i M3, er design tokens. M3 har en dedikeret dokumentationssektion om netop dette ("Design tokens"). Tokens er navngivne variabler for designbeslutninger — for eksempel en farverolle, en tekststørrelse eller en afstand — som du refererer til i stedet for hårdkodede værdier. Fordelen er, at når temaet ændrer sig (fx skift fra lyst til mørkt, eller et nyt farveskema), opdaterer du tokens ét sted frem for at rette hver enkelt komponent. Tokens er dermed det praktiske lim mellem M3's abstrakte stilregler og den konkrete implementering i kode.⁴

Hvem ressourcen er til

Material Design 3 er skrevet med to publikummer i tankerne på samme tid: designere og udviklere. Dokumentationen forklarer både designprincipperne — hvorfor en komponent ser ud, som den gør, og hvornår du bør bruge den — og den tekniske implementering. Det gør M3 til et fælles sprog mellem de to fagligheder: en designer og en udvikler kan pege på den samme komponent i den samme dokumentation og være enige om, hvad der menes.¹

For designere fungerer M3 primært som specifikationskilde og som grundlag for arbejdsfiler. Du slår op i farvesystemet, typeskalaen, komponentspecifikationerne og spacing-reglerne og bruger dem, når du bygger skærme. Fordi systemet definerer roller og skemaer frem for løse værdier, giver det en disciplin, der er svær at opnå med et helt frit designsprog: konsistens på tværs af mange skærme og mange bidragydere.¹

For udviklere er styrken, at M3 ikke kun er tegninger, men også kode. Systemet er implementeret i flere officielle rammeværk. På Android findes M3 i det moderne UI-toolkit Jetpack Compose såvel som i det ældre View-system, og til apps på tværs af platforme er det implementeret i Flutter. Til web findes Material Web, som beskrives som den kanoniske open source-implementering af Material Design til webapplikationers brugerflader. Det betyder, at en udvikler i mange tilfælde kan trække en færdig, M3-konform komponent direkte ind i sin app frem for at bygge den fra bunden.⁵

Ressourcen egner sig især til teams, der bygger til Android eller til Googles økosystem, hvor M3 er standarden og forventningen. Den er også nyttig som læringsressource og referencepunkt for alle, der arbejder med UI — også selvom man ikke ender med at implementere M3 — fordi den er grundigt dokumenteret og gennemtænkt omkring tilgængelighed, tilstande og adaptivt layout. Men jo længere man bevæger sig væk fra Google-platforme, jo mere bør man overveje, om systemets antagelser og udtryk faktisk passer til ens eget produkt.²

Sådan bruger du ressourcen

Den mest almindelige måde at bruge M3 på er som opslagsværk. Har du brug for at vide, hvordan en bestemt knaptype bør se ud, hvilke tilstande et tekstfelt har, eller hvordan navigationen bør struktureres på en større skærm, slår du komponenten eller mønstret op i dokumentationen på m3.material.io og læser specifikationen. Start gerne i Foundations for at forstå de tværgående principper, og gå derfra ned i den konkrete style, komponent eller pattern, du har brug for.¹²

Når det gælder farver og typografi, er det centrale råd at arbejde med systemets roller og tokens frem for løse værdier. I stedet for at male en knap med en konkret hex-kode, tildeler du den en farverolle fra dit farveskema; i stedet for at sætte en overskrift til en tilfældig pixelstørrelse, vælger du et niveau i typeskalaen. Denne indirekte reference er det, der gør temaskift muligt: fordi komponenterne peger på tokens frem for hårdkodede tal, kan hele fladen skifte mellem lyst og mørkt tema — eller mellem hele farveskemaer — uden at du rører hver enkelt komponent.⁴³

En egenskab, der er unik for M3, er dynamisk farve, kernen i Material You. Her kan et komplet, sammenhængende farvetema udledes automatisk. På Android sker det klassisk ved, at systemet genererer temaet ud fra brugerens baggrundsbillede, så apps tilpasser sig brugerens personlige valg. Det er et stærkt greb, hvis du bygger til Android og vil have din app til at føles som en integreret del af brugerens telefon. Men det er samtidig en funktion, du skal forholde dig aktivt til: hvis dit brand kræver præcise, faste farver, kan en automatisk genereret palet arbejde imod din identitet.⁵³

Det bringer os til det vigtigste spørgsmål ved ethvert designsystem: hvornår bør du afvige? M3 er tænkt som et fundament, ikke som en tvangstrøje. Det er designet til at blive tematiseret — farver, form og typografi kan tilpasses dit brand inden for systemets struktur — og det er ofte den rigtige vej: behold systemets logik omkring roller, tilstande og tilgængelighed, men klæd det i dit eget udtryk. Egentlig afvigelse fra selve strukturen bør du reservere til de tilfælde, hvor systemets antagelser konkret modarbejder dit produkt eller din målgruppe.¹

En praktisk arbejdsgang kan derfor se sådan ud: læs Foundations for at forstå intentionen; definér dit farveskema og din typeskala som tokens, gerne afledt af dit brand; byg skærmene med standardkomponenter, konfigureret via tokens; og dokumentér bevidst de få steder, hvor du med vilje bryder med M3, så beslutningen er sporbar for resten af teamet. På den måde får du systemets konsistens og tilgængelighedsdisciplin, uden at ende med en app, der er umulig at skelne fra enhver anden Material-app.²⁴

Adgang, licens og forbehold

Material Design 3 er gratis at tilgå og bruge. Dokumentationen på m3.material.io er offentligt tilgængelig uden betaling eller login, og du kan læse hele systemet frit. Dele af implementeringen er desuden open source: rammeværk som Flutter, Jetpack Compose og Material Web er udgivet under åbne licenser (Apache-2.0 og MIT), hvilket betyder, at du både kan bruge og bygge videre på koden i egne projekter. Det er en væsentlig grund til systemets store udbredelse — barrieren for at komme i gang er lav.¹⁵

Der er dog forbehold, du bør veje, før du adopterer M3. Det mest grundlæggende er, at systemet er et Google-udtryk. M3 er skabt til og udvikler sig i takt med Googles platforme — først og fremmest Android — og bærer en umiddelbart genkendelig Google-æstetik. Vælger du M3, arver du derfor et sæt designbeslutninger, der er optimeret til Googles verden, og din app vil visuelt læne sig op ad Googles egne produkter, medmindre du investerer i grundig tematisering.⁵

Et andet forbehold handler om platformdækning over tid. Materials implementeringer har ikke alle samme status: den fortsatte, aktive udvikling ligger på Android, mens de tidligere separate iOS- og web-versioner af Material Components er blevet indstillet. Til web peger Google i dag på Material Web som den kanoniske open source-implementering. Bygger du til iOS eller til web, bør du derfor undersøge, hvilken vedligeholdelsesstatus den konkrete implementering har, frem for at antage, at alle platforme understøttes lige godt.⁵

Endelig er der et strategisk forbehold: at følge et andet firmas designsystem betyder, at du overlader retningen for dit visuelle udtryk til nogen, hvis prioriteter ikke nødvendigvis er dine. Når Google ændrer M3, ændrer forventningen til "korrekt" Material sig med. For mange projekter — især Android-apps og interne værktøjer — er det en fair pris for et gennemarbejdet, gratis fundament. For et produkt med en stærk, selvstændig brandidentitet, eller for en flerplatforms-oplevelse, hvor du ikke vil se ud som en Google-app, kan det tale for enten kraftig tematisering eller et andet, mere neutralt system. Kort sagt: M3 er en fremragende ressource, men det er ikke et neutralt værktøj — det kommer med en holdning, og den holdning er Googles.⁵¹

Ofte stillede spørgsmål

Kilder

1. Material Design 3Google · Systemets officielle dokumentation og primærkilde til foundations, styles, komponenter og mønstre.
2. Foundations – Material Design 3Google · Grundlaget: de tværgående principper, som webstedet beskriver med "Learn the basics of Material".
3. Color – Material Design 3Google · Farvesystemet med farveroller og skemaer; præsenteret med "Create personal color schemes".
4. Design tokens – Material Design 3Google · Dedikeret dokumentationssektion om design tokens som grundlag for temaer.
5. Material DesignWikipedia · Datofæstet oversigt over versionshistorik (2014, 2018, 2021), implementeringer og licenser.