Skins
Formål
På Kampagneprofilen kan du som redaktør selv definere sites farver ved at anvende skins. Et skin er en gruppe af farver, der sættes i Kampagne-profilens backend. Man kan sige, at det er en farvepalette, som kan tilknyttes indholdselementer, således at disse får de farver, som er defineret i sitets forskellige skins.
Redaktøren har frihed til at vælge farvekombinationer, som stemmer overens med en given kampagnes design. Et website på kampagne-profilen kan på den måde få sin egen grafiske identitet, samtidig med at der fastholdes fælles designmæssige rammer, der sikrer at Københavns Kommunes designguidelines samt webtilgængelighedsloven overholdes.
Dit site er sat op med forskellige defaults skins, som du kan vælge i mellem, hvis du ikke ønsker at lave dit eget skin.
Sådan gør du
Sådan opretter du et nyt skin
- Under ’Titel’ skal du give dit nye skin en titel.
- Under ’Navn’ skal du give det et navn.
- Under ’Baggrund’ skal du angive den farvekode på den farve du ønsker at baggrunden af dit skin skal have.
- Under ’Forgrund’ skal du angive den farvekode for den farve du ønsker at anvende til forgrunden af dit skin.
- Under ’Brødtekst’ skal du angive farvekoden på den farve du ønsker at brødteksten i dit skin skal have.
- Under ’Knap baggrund’ skal du angive farvekoden på den farve du ønsker at baggrundsfarven til knappen i dit skin skal have.
- Under Knap forgrund’ skal du angive farvekoden på den farve du ønsker at knappes forgrundsfarve skal have.
- Under ’Knap hover-lysstyrke’ skal du vælge hvor stærk eller svag hover-lysstyrken på din knap skal være.
- Under ’Sekundært farvesæt’ hvis du har brug for det ift. de indholdselementer du ønsker at benytte på dit kampagnesite.
- Tryk på 'Ryd cachen' og gem dit skin.
Bemærk, for at skabe luft og læsbarhed i designet kræver det, at du opretter mindst 2-3 forskellige skins, som du kan skifte mellem. Under "Eksempler" nedenfor kan du se sæt af 2-3 skins, som passer sammen, og som man derfor kan skifte mellem, når man opsætter indhold.
Bemærk også at du skal have en kontrast faktor på 4.5:1 mellem tekst og baggrundsfarver, mellem Knap og baggrundsfarven ved knappen, mellem forgrund og baggrunds farve.
Sådan vælger du skins til dit indholdselement
Når du har oprettet dit/dine skins, er du klar til at bruge dem sammen med dine indholdselementer.
Når du redigerer en kampagne-side, opretter du indhold som på øvrige profiler, men for hvert indholdselement (paragraf) skal du tage stilling til, hvilken skin elementet skal have.
- Stil dig på indholdselementet
- Klik på knappen ”Adfærd” i venstre hjørne af skærmen.
- Vælg det ønskede skin i dropdown-listen. (Hvis ikke du gør noget, vil det skin som ligger øverst automatisk bruges)
- Gem
Tips og best practise
Vis alle
Hvorfor kan jeg ikke gemme mit skin?
Du kan opleve, at du ikke kan gemme et skin, fordi det ikke lever op til tilgængelighedskravene. Hvis du har valgt farver, hvor der ikke er tilstrækkelig kontrast ml. baggrundsfarve og tekstfarve, kan dit skin ikke oprettes på sitet.
Der skal være en kontrast på 4.5:1. Vælg derfor farver med højere kontrast og forsøg igen!
Hvor mange forskellige farver skal jeg bruge i mit design?
Vi anbefaler, at du samlet set kun anvender 2-3 farver (samt hvid og sort) i de skins du anvender på et website.
Det vil sige at dit farvesæt, bestående af 2-3 skins, i alt kun rummer 2-3 farver (plus hvid og sort) i forskellige kombinationer.
Skift mellem skins med farvet og hvid baggrund
Et godt tip når du opretter indhold og vælger skins er, at du skal skifte i mellem indholdselementer der anvender et skin med farvet baggrund og et skin med hvid baggrund.
Dette skaber ro for øjet, er mere læsbart og er i tråd med det fælles design, der er udarbejdet til Kampagne-profilen.
Hvordan placerer jeg farvekoderne korrekt, når jeg opretter et skin?
Det kan være svært at placere de ønskede farvekoder i de korrekte felter under "Redigér skin".
Hvis du kigger under "Eksempler" nedenfor, kan du lade dig inspirere af nogle farvesæt, der fungerer.
Du kan blot udskifte primær og sekundærfarve fra et farvesæt-eksempel med dem fra dit kampagnedesign, og så bør du få et flot design, der virker i praksis.