Branding-øvelse: Farver, fonte og størrelser (live preview)

Klik på brikkerne for at vælge baggrund, tekstfarve og accentfarve. Vælg derefter font og størrelse – og se resultatet i previewet.
Bonus: Du får også en CSS-snippet. (Så du kan lege “designer” uden at skulle købe sort rullekrave.)

Tip: Brug Tab + Enter hvis du vil klikke med tastaturet.
Formål: Træn visuel identitet (kontrast, tone, læsbarhed, konsistens)

Vælg din stil Brikker = branding-byggeklodser

1) Baggrund (Preview)
Valgt: —
2) Tekstfarve (Preview)
Valgt: —
3) Accentfarve (knapper/ikon)
Valgt: —
4) Font & typografi
Læsbarhed > “smart”
16px
Vælg brikker – preview opdaterer automatisk.

Preview Større vindue = mindre “hvor blev teksten af?”

Mini-webside (demo)
Brand Preview
Din Brand-side
Forside Produkter Kontakt

Velkommen – her er din visuelle identitet

Farver skaber stemning. Fonte skaber tone. Og sammen bestemmer de, om din side føles “lækker” eller “powerpoint fra 2007”.

Call to Action

Kontrast

Kan man læse teksten uden at knibe øjnene sammen som en pirat i modvind?

Konsistens

Har du én tydelig accentfarve – eller en regnbue med identitetskrise?

Info-boks (typografi-test) Her kan kursisterne tydeligt se forskel på font, weight og line-height i en lidt længere tekst.
Feature-liste (brand-udtryk)
  • ToneSer det roligt, skarpt, luksus eller legende ud?
  • HierarkiEr overskrifter tydelige i forhold til brødtekst?
  • CTAEr knappen synlig nok til at blive klikket på?
Kontrast-tjek: Vælg farver og se om teksten er læsbar. Hvis kontrasten bliver lav, får du en advarsel her (så du ikke ender med “grå tekst på grå baggrund” – den klassiske “usynligheds-kappe”).
CSS (genereret)
Brug den som udgangspunkt i en rigtig webside

Mini-opgave til kursisterne 10 min

  1. Lav et “brand - stil” der føles professionelt (fx IT, rådgivning, kursus).
  2. Lav et “brand - stil” der føles legende (fx børnebutik, festival, event).
  3. Lav et “brand - stil” der føles Spirituel (fx yoga, healing, wellness).
  4. Sammenlign: Hvad ændrer sig, når du kun ændrer accentfarven?
  5. Tag et screenshot af preview, indsæt i et dokument og skriv lidt om hvad der kendetegner stilen, der beskriver stilen (fx “rolig”, “luksus”, “energi”).