Visuel identitet: logo, farver, skrift og menu

Modul 4: Sider, udseende og funktioner · Læsetid: 8 minutter

Læringsmål: Efter denne lektion kan du i panelet Visuel identitet indstille dit navn og logo, favicon, stil, menudesign, farver, skrift, mørk tilstand og bevægelse, og du kan tjekke, om teksten på din side er let at læse.

Nøglebegreber: visuel identitet, stil (look), logo, bomærke, ordmærke, favicon, menubjælke, hovedfarve, kontrast, kontrastforhold, WCAG, weblicens, mørk tilstand, bevægelse

Hvorfor visuel identitet er mere end pynt

En visuel identitet er den faste kombination af logo, farver og skrift, som folk genkender dig på. På en hjemmeside skaber den genkendelse (de samme farver på bil, tilbud og side), og den skal være let at læse: lysegrå tekst på hvid ser roligt ud, men mange besøgende har svært ved at læse den, især på en telefon i solen.

Alt i panelet Visuel identitet er gratis og kan ses med det samme i forhåndsvisningen. Først når du klikker på Gem, bliver det til en ny version (lektion 3.5). Vil du tilbage, klikker du på Fortryd eller gendanner en ældre version.

Panelet har disse blokke: Stil, Farver, Skrifttyper, Menubjælke, Navn og logo, Billeder, Form og afstand, Skrift og størrelser, Mørk tilstand og Bevægelse.

Navn, logo og favicon

I Navn og logo står navnet på din side, som det vises i toppen og i sidefoden. Nedenunder er logoet:

• Upload dit eget logo: PNG med gennemsigtig baggrund, SVG, JPG eller WebP, op til 2 MB. Et liggende logo fungerer bedst i en menubjælke.
• Har du ikke noget logo, har builderen lavet et ordmærke: dit navn i din egen skrifttype og dine farver. Det tilpasser sig automatisk, hvis du ændrer dem.
• Lad AI designe et logo: du beskriver kort din virksomhed og stemningen ("malerfirma i en landsby, håndværksmæssigt og pålideligt") og klikker på Design tre logoer. Du får tre bomærker (et tegn uden tekst) i dine farver, med dit navn ved siden af i din skrifttype. Tilsammen koster det 1 redigering. Vælg et med Brug, eller skriv, hvad der kan gøres bedre ("det første, men rundere"), og klik på Design tre nye logoer. Det er endnu en runde til 1 redigering.
• Visning i menu og sidefod: Logo og navn, Kun logo eller Kun navn, og Størrelse (Lille, Normal, Stor).

Builderen advarer, hvis et logo har tynde streger eller for lidt kontrast til din menubjælke: småt i bjælken kan det så forsvinde.

Tjek selv et AI-logo: ligner det for meget en anden virksomheds logo?

Favicon er det lille ikon i browserfanen og ved bogmærker. Vælg Automatisk: forbogstav i dine farver, Dit logo eller Egen fil (kvadratisk, PNG, SVG eller ICO, op til 512 KB).

Stil og menubjælke

En stil (i builderen også kaldet look) bestemmer med ét klik skrift, former, knapper, kort, menu og dekoration. Der er tolv, for eksempel Frisk, Varm, Forretning, Natur, Atelier og Nat. Dine egne farver bliver, når du skifter stil. Vil du også have stilens farver, så klik på Også denne stils farver. Stilen Nat er altid mørk.

Under Menubjælke vælger du formen på bjælken øverst på hver side, blandt femten designs: fuld bredde, centreret, delt, to linjer, farvebjælke, med kant, pille, med topbjælke, gennemsigtig, minimal, svævende, rubrikker, segment, fuldskærm og sidemenu. Indholdet af menuen (lektion 4.1) forbliver det samme. Et par opmærksomhedspunkter fra forklaringen i selve builderen:

• Gennemsigtig er kun pæn, hvis hver side har en mørk hero eller en foto-hero.
• Minimal viser kun dit navn og én knap. Links til siderne står så i sidefoden.
• Med topbjælke sætter telefon og åbningstider i en smal bjælke ovenover. Er telefonnummeret rigtigt?

Ved Menubjælkens farve vælger du Automatisk (følger stilen), Hvid, Lysegrå, Mørk eller Accentfarve. En anden farve beder du om i chatten.

Farver og kontrast

Ved Farver indstiller du hovedfarven (knapper, accenter), en anden farve til farveforløb og baggrunden (hvid, creme, kølig, grå eller en nuance af din farve, eller vælg selv). Med Knapper med farveforløb får alle hovedknapper et forløb fra den ene farve til den anden.

Her kommer kontrast ind i billedet: forskellen i lysstyrke mellem tekst og baggrund. Den udtrykkes som et kontrastforhold, fra 1:1 (ingen forskel) til 21:1 (sort på hvid). Den internationale retningslinje for tilgængelige hjemmesider, WCAG fra W3C, kræver på niveau AA mindst 4,5:1 for almindelig tekst og 3:1 for stor tekst (cirka 18 punkt, eller 14 punkt fed). Knapper og andre betjeningselementer skal have mindst 3:1 i forhold til omgivelserne.

Builderen holder øje med det for dig. Vælger du en farve, som tekst ikke er let at læse på, tilpasser den farven og fortæller, hvad der blev ændret, for eksempel: "Tekstfarven ... er blevet ..., fordi tekst ellers ikke er let at læse på den." Vil du beholde præcis dine egne farver, så slå Behold præcis disse farver til: dine farver bliver, og teksten på dem får automatisk en farve, der er let at læse. Også i sektioner, som AI laver med egen opsætning, retter builderen tekstfarver, der ligger under 4,5:1 (stor tekst 3:1).

Det vurderer builderen ikke: tekst i et foto eller i dit logo og en overskrift over et uroligt foto. Se selv efter, på en telefon. Er du i tvivl om et farvepar, så indtast de to farvekoder i en kontrastchecker (se Læs mere).

Faldgrube: en identitetsfarve fra et trykkeri eller fra firmabilen (for eksempel knaldgul) egner sig sjældent som tekstfarve. Brug den som accent eller flade, og hold teksten mørk.

Skrift og egen skrifttype

Ved Skrifttyper vælger du en skrift til Overskrifter og en til Brødtekst. Skrifttyperne ligger som filer på din egen side, så der er ingen forbindelse til en andens skrifttjeneste. Ved Skrift og størrelser indstiller du med skydere for hele siden: linjeafstand og bogstavafstand for tekst og overskrifter, tegn pr. linje, indholdets bredde og overskrifternes vægt. Som stilen nulstiller en skyder. Ved Tekststørrelse vælger du Normal, Stor eller Ekstra stor. Det kan du også gøre i chatten ("gør skriften større").

Du kan også bruge en egen skrifttype: upload den under Skrifttyper eller med papirclipsen i chatten, som .woff2, .woff, .ttf eller .otf, op til 2 MB pr. fil (flere vægte er tilladt). Derefter vælger du, hvad den skal bruges til: overskrifter, tekst eller begge. Det koster ingenting. En skrift fra en tjeneste som Adobe Fonts kan ikke bruges.

Vigtigt: upload kun en skrift, som du har weblicens til. En skrifttype er software med en licens. En licens til brug på din computer (til tryksager) tillader langtfra altid, at du lægger filen på en hjemmeside, hvor hver besøgende henter den. Se i licensbetingelserne, om webbrug er tilladt. Skrifter under SIL Open Font License må gerne indbygges og distribueres.

Mørk tilstand og bevægelse

Ved Mørk tilstand vælger du Fra (altid lys), Altid mørk eller Som enheden. Med den sidste ser en besøgende, der har sin telefon eller computer på mørk, en mørk version af dine egne farver. Baggrund, tekst og hovedfarve i mørk kan du selv vælge. Der er ingen knap, som besøgende selv kan skifte med. Forhåndsvisningen følger din enhed: sæt din telefon eller computer på mørk for at se den mørke version, og tjek så også dit logo.

Ved Bevægelse vælger du Til, Rolig eller Fra for hele siden og om nødvendigt en undtagelse pr. side. Her vælger du også Museeffekt på en computer (ingen, magnet eller lysplet). I forhåndsvisningen står alt stille. Med Afspil animation ser du den én gang. Har en besøgende valgt mindre bevægelse på sin enhed, står alt stille. For meget bevægelse distraherer. På en side med meget tekst er Rolig eller Fra ofte bedre.

I builderen: sådan gør du

1. Åbn Visuel identitet, blokken Navn og logo. Klik på Upload dit eget logo eller på Lad AI designe et logo.
2. Vælg dit logo eller det automatiske forbogstav ved Favicon.
3. Prøv to eller tre stilarter ved Stil. Se også på Mobil.
4. Vælg et design og en farve ved Menubjælke.
5. Indstil din hovedfarve ved Farver. Læs builderens meddelelser.
6. Tjek ved Mørk tilstand og Bevægelse, hvad du ønsker.
7. Klik på Gem, og sæt din side online igen.

Opsummering

• Panelet Visuel identitet er gratis. Gem laver en ny version.
• Et AI-logo koster 1 redigering for tre forslag. Favicon laver builderen selv, eller du uploader en.
• Tolv stilarter og femten menudesigns. Menuens indhold forbliver det samme.
• WCAG kræver mindst 4,5:1 i kontrast for almindelig tekst og 3:1 for stor tekst. Builderen holder øje med det, undtagen i fotos og i dit logo.
• Brug kun en egen skrifttype med weblicens. Mørk tilstand og bevægelse indstiller du efter, hvad dine besøgende har brug for.

Quiz

Opgave

Opgave D4.2: Din visuelle identitet og kontrast. Indstil din visuelle identitet, og mål kontrasten i dine vigtigste farvepar.

Tjekliste:

• [ ] logo uploadet eller valgt blandt AI-forslagene;
• [ ] favicon indstillet og set i browserfanen på din online side;
• [ ] stil og menudesign valgt og set på Mobil;
• [ ] hovedfarve indstillet og builderens meddelelser læst;
• [ ] kontrast mellem tekstfarve og baggrund og mellem knaptekst og knapfarve målt med en kontrastchecker;
• [ ] mørk tilstand og bevægelse valgt bevidst;
• [ ] visuel identitet gemt og siden sat online igen.

Spørgsmål:

1. Hvilke kontrastforhold målte du for tekst på baggrund og for knaptekst på knap, og når de 4,5:1?
2. Hvor på din side står der tekst over et foto, og er den let at læse på en telefon?
3. Bruger du en egen skrifttype? Hvor i licensen står der, at webbrug er tilladt?

Når du har klikket "færdig", ser du et eksempelsvar: Schildersbedrijf Example målte mørkegrå på hvid til 14,5:1 og hvid tekst på den grønne knap til 5,1:1, begge over 4,5:1. Overskriften over hero-fotoet var svær at læse, så de valgte et mørkere foto. Ingen egen skrifttype, så ingen licens nødvendig.

Læs mere

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, engelsk): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, engelsk): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, engelsk): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, officiel tekst (engelsk): https://openfontlicense.org/open-font-license-official-text/