Skip to main content

Design System Estetikk Ferdighet

Design System Estetikk ferdigheten er en veiledet tilnærming for å forbedre nettstedets visuelle identitet. Den hjelper deg med å ta konsistente beslutninger om typografi, farge, avstand og bevegelsestokens som definerer designsystemet ditt.

Hva er Design System Estetikk?​

Design System Estetikk er en strukturert ferdighet som dekker:

  • Typografi: Skrifttyper, størrelser, vekter og linjehøyder
  • Farge: Primære, sekundære, aksent- og nøytrale paletter
  • Avstand: Padding, margin og avstands-skalaer
  • Bokser/Rammer (Borders): Radius- og bredde-tokens
  • Skygger (Shadows): Eleverasjons- og dybde-tokens
  • Bevegelse (Motion): Animasjoner og overganger

Disse beslutningene fanges opp i temaets theme.json-fil, noe som skaper et sammenhengende visuelt system.

Hvorfor bruke Design System Estetikk?​

Konsistens​

Et designsystem sikrer at:

  • All tekst bruker samme typografiske skala
  • Farger brukes konsistent over hele nettstedet
  • Avstand følger et forutsigbart mønster
  • Animasjoner føles samlet

Effektivitet​

I stedet for å ta designbeslutninger side for side, kan du:

  • Definere tokens én gang
  • Bruke dem overalt
  • Oppdatere globalt ved å endre én verdi

Fleksibilitet​

Du kan:

  • Justere hele designsystemet ditt raskt
  • Eksperimentere med forskjellige estetikker
  • Opprettholde merkevarekonsistens samtidig som du utvikler deg

Utløse Design System Estetikk Ferdigheten​

Manuell Aktivering​

Du kan starte ferdigheten når som helst:

"Hjelp meg med å forbedre designsystemet mitt"

eller

"La oss forbedre nettstedets estetikk"

eller

"Veiled meg gjennom designsystembeslutninger"

Automatisk Forslag​

Agenten kan foreslå å bruke ferdigheten når du:

  • Spør om designendringer
  • Ber om et "moderne" eller "profesjonelle" redesign
  • Ønsker å forbedre visuell konsistens
  • Forbereder deg på å lansere nettstedet ditt

Design System Estetikk Prosessen​

Trinn 1: Typografi​

Agenten spør om dine skrifttypevalg:

Hva er din foretrukne typografiske stil?
- Serif (tradisjonell, elegant)
- Sans-serif (moderne, rent)
- Monospace (teknisk, kodefokusert)

For overskriftsskrifttypen:
- Ønsker du en egen overskriftsskrifttype, eller skal du bruke samme som brødteksten?
- Preferanse: fet, elegant, lekende, minimal?

For brødtekstskrifttypen:
- Lesbarhet er nøkkelen. Foretrekker du:
  - Større, mer luftig tekst
  - Kompakt, effektiv tekst
  - Standard størrelse

Agenten definerer deretter:

  • Overskriftsskrifttype: Hovedskrifttype for titler og overskrifter
  • Brødtekstskrifttype: Skrifttype for avsnitt og brødtekst
  • Monospace skrifttype: Skrifttype for kode og teknisk innhold
  • Størrelsesskala: Forhåndsdefinerte størrelser (liten, base, stor, XL, osv.)
  • Vektskala: Skrifttypevekter (normal, medium, fet, osv.)
  • Linjehøyde: Avstanden mellom linjene for bedre lesbarhet

Trinn 2: Fargepalett​

La oss definere fargepaletten din.

Primærfarge (merkevarefargen din):
- Nåværende: [vis eksisterende farge]
- Endre til: [fargevelger eller hex-kode]

Sekundærfarge (støttefarge):
- Nåværende: [vis eksisterende farge]
- Endre til: [fargevelger eller hex-kode]

Aksentfarge (markeringer og CTA-er):
- Nåværende: [vis eksisterende farge]
- Endre til: [fargevelger eller hex-kode]

Nøytral palett (gråtoner for tekst, rammer, bakgrunner):
- Lys: [farge]
- Medium: [farge]
- Mørk: [farge]

Agenten oppretter en komplett palett som inkluderer:

  • Primærfarge, sekundærfarge og aksentfarger
  • Nøytrale gråtoner (lys, medium, mørk)
  • Semantiske farger (suksess, advarsel, feil)
  • Hover- og aktivtilstander

Trinn 3: Avstand​

Hvor mye pustehull vil du ha?

Preferanse for avstands-skala:
- Kompakt (tett, effektive layout)
- Normal (balansert avstand)
- Luftig (generøs hvittrom)

Dette påvirker:
- Padding inne i knapper og kort
- Marginer mellom seksjoner
- Avstand mellom rutenett-elementer

Agenten definerer avstandstokens:

  • Baseenhet (typisk 4px eller 8px)
  • Skala: xs, sm, md, lg, xl, 2xl
  • Spesifikke verdier for padding, margin, gap

Trinn 4: Rammer og Skygger​

Visuell dybde og definisjon:

Preferanse for border radius:
- Skarp (ingen avrunding)
- Subtil (liten radius)
- Avrundet (medium radius)
- Veldig avrundet (stor radius)

Skyggedybde:
- Flat (ingen skygger)
- Subtil (lette skygger)
- Fremtredende (sterke skygger)

Agenten oppretter:

  • Border radius tokens (for knapper, kort, input)
  • Skygge-tokens for ulike elevasjonsnivåer
  • Border bredde-tokens

Trinn 5: Bevegelse og Animasjon​

Hvordan skal nettstedet føles når det er interaktivt?

Preferanse for animasjon:
- Minimal (ingen animasjoner)
- Subtil (milde overganger)
- Lekende (merkbare animasjoner)

Spesifikke animasjoner:
- Sidestransisjoner: fade, slide, eller ingen?
- Knapp-hover: skalering, fargeendring, eller begge?
- Lastetilstander: spinner, skjelett, eller fremdriftslinje?

Agenten definerer:

  • Overgangsdurer (rask, normal, treg)
  • Easing-funksjoner (ease-in, ease-out, ease-in-out)
  • Animasjonskeyframes for vanlige interaksjoner

Anvende Design System Estetikk​

Automatisk Anvendelse​

Etter at du har fullført ferdigheten, gjør agenten følgende:

  1. Oppdaterer temaets theme.json med alle tokens
  2. Anvender designsystemet på ditt aktive tema
  3. Regenererer blokkstilene for å matche det nye systemet
  4. Aktiverer det oppdaterte temaet

Manuell Anvendelse​

Du kan også redigere theme.json direkte:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Se Design Systemet Ditt​

Spør Agenten​

"Vis meg designsystemet mitt"

eller

"Hva er mine nåværende design-tokens?"

Agenten vil vise din typografi, farger, avstand og andre tokens.

Se theme.json​

Åpne /wp-content/themes/[theme-name]/theme.json i en teksteditor for å se de rå token-definisjonene.

Oppdatere Design Systemet Ditt​

Raske Oppdateringer​

Spør agenten om spesifikke endringer:

"Gjør primærfargen mørkere"

eller

"Øk avstands-skalaen med 20%"

eller

"Bytt overskriftsskrifttypen til en serif"

Full Redesign​

Kjør Design System Estetikk ferdigheten på nytt:

"La oss redesignere hele designsystemet mitt"

Dette vil veilede deg gjennom alle beslutninger på nytt, og starte med dine nåværende verdier.

Delvise Oppdateringer​

Oppdater spesifikke aspekter:

"Oppdater bare fargepaletten, behold alt annet"

Beste Praksis for Design System​

Konsistens​

  • Bruk de samme tokensene overalt
  • Ikke opprett engangs-farger eller størrelser
  • Referer til tokens i stedet for å hardkode verdier

Navngiving​

Bruk klare, semantiske navn:

  • ✓ primary, secondary, accent

  • ✗ blå, farge-1, hoved

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Skalerbarhet​

Design systemet ditt for å skalere:

  • Bruk relative enheter (rem, em) i stedet for piksler
  • Opprett skalaer (xs, sm, md, lg, xl) i stedet for vilkårlige verdier
  • Planlegg for fremtidige tillegg

Dokumentasjon​

Dokumenter designsystemet ditt:

  • Hvorfor du valgte spesifikke farger
  • Når du skal bruke hvert token
  • Unntak og kanttilfeller

Vanlige Design System Mønstre​

Moderne Minimalist​

  • Sans-serif typografi (Inter, Helvetica)
  • Begrenset fargepalett (2-3 farger)
  • Generøs avstand
  • Subtile skygger
  • Glatte, raske animasjoner

Varm og Vennlig​

  • Blanding av serif og sans-serif
  • Varm fargepalett (oransje, varme gråtoner)
  • Avrundede hjørner
  • Myke skygger
  • Lekende animasjoner

Profesjonell Bedrift​

  • Rent sans-serif (Roboto, Open Sans)
  • Nøytral palett med aksentfarge
  • Strukturert avstand
  • Minimal skygger
  • Subtile overganger

Kreativ og Dristig​

  • Distinkt typografi
  • Dristig fargepalett
  • Variert avstand
  • Sterke skygger
  • Merkbare animasjoner

Feilsøking​

Designsystemendringene mine vises ikke

  • Tøm nettleserens hurtigbuffer (cache)
  • Bygg nettstedet på nytt hvis du bruker en statisk generator
  • Sjekk at theme.json er gyldig JSON
  • Verifiser at temaet er aktivt

Fargene ser forskjellige ut på forskjellige sider

  • Sjekk for motstridende CSS i plugins
  • Verifiser at alle sider bruker samme tema
  • Tøm eventuelle caching-plugins

Jeg vil gå tilbake til et tidligere designsystem

  • Spør agenten: "Vis meg historikken til designsystemet mitt"
  • Rediger manuelt theme.json til tidligere verdier
  • Kjør ferdigheten på nytt med andre valg

Neste Steg​

Etter at du har definert designsystemet ditt:

  1. Gjennomgå nettstedet ditt: Besøk nettstedet ditt for å se det nye designet
  2. Forbedre videre: Gjør justeringer ved å bruke ferdigheten på nytt
  3. Opprette maler: Bygg egendefinerte blokkmaler ved hjelp av dine design-tokens
  4. Dokumentere: Del designsystemet ditt med teammedlemmer