Visuell profil: logo, farger, skrift og meny

Modul 4: Sider, utseende og funksjoner · Lesetid: 8 minutter

Læringsmål: Etter denne leksjonen kan du stille inn navn og logo, favikon, stil, menydesign, farger, skrift, mørk modus og bevegelse i panelet Visuell profil, og du kan sjekke om teksten på siden din er lett å lese.

Nøkkelbegreper: visuell profil, stil (look), logo, logosymbol, ordmerke, favikon, menylinje, hovedfarge, kontrast, kontrastforhold, WCAG, nettlisens, mørk modus, bevegelse

Hvorfor en visuell profil er mer enn pynt

En visuell profil er den faste kombinasjonen av logo, farger og skrift som folk kjenner deg igjen på. På en nettside gir den gjenkjenning (de samme fargene på bilen, tilbudet og nettsiden), og den må være lett å lese: lysegrå tekst på hvitt ser rolig ut, men mange besøkende leser den dårlig, særlig på en mobil i sola.

Alt i panelet Visuell profil er gratis og vises med en gang i forhåndsvisningen. Først når du klikker på Lagre, blir det en ny versjon (leksjon 3.5). Vil du tilbake, klikker du på Angre eller gjenoppretter en eldre versjon.

Panelet har disse blokkene: Stil, Farger, Skrifttyper, Menylinje, Navn og logo, Bilder, Form og avstand, Skrift og størrelser, Mørk modus og Bevegelse.

Navn, logo og favikon

Under Navn og logo står navnet på siden din, slik det vises i toppen og i bunnteksten. Under det kommer logoen:

• Last opp din egen logo: PNG med gjennomsiktig bakgrunn, SVG, JPG eller WebP, opptil 2 MB. En liggende logo passer best i en menylinje.
• Har du ingen logo, har byggeren laget et ordmerke: navnet ditt i din egen skrifttype og dine farger. Det tilpasser seg automatisk når du endrer dem.
• La KI designe en logo: du beskriver kort bedriften og stemningen («malerbedrift i en bygd, håndverksmessig og pålitelig») og klikker på Design tre logoer. Du får tre logosymboler (et tegn uten tekst) i fargene dine, med navnet ditt ved siden av i skrifttypen din. Til sammen koster det 1 redigering. Velg en med Bruk, eller skriv hva som kan bli bedre («den første, men rundere») og klikk på Design tre nye logoer. Det er en ny runde på 1 redigering.
• Visning i meny og bunntekst: Logo og navn, Bare logo eller Bare navn, og Størrelse (Liten, Normal, Stor).

Byggeren varsler deg hvis en logo har tynne linjer eller lite kontrast mot menylinjen: liten i linjen kan den da forsvinne.

Sjekk en KI-logo selv: ligner den for mye på logoen til en annen bedrift?

Favikonet er det lille ikonet i nettleserfanen og ved bokmerker. Velg Automatisk: forbokstav i fargene dine, Logoen din eller Egen fil (kvadratisk, PNG, SVG eller ICO, opptil 512 KB).

Stil og menylinje

En stil (i byggeren også kalt look) bestemmer med ett klikk skrift, former, knapper, kort, meny og dekor. Det finnes tolv, blant annet Frisk, Varm, Profesjonell, Natur, Atelier og Natt. Dine egne farger blir stående når du bytter stil. Vil du også ha fargene til stilen, klikker du på Bruk også fargene til denne stilen. Stilen Natt er alltid mørk.

Under Menylinje velger du formen på linjen øverst på hver side, blant femten design: full bredde, sentrert, delt, to linjer, fargelinje, med kantlinje, pille, med topplinje, gjennomsiktig, minimal, svevende, kategorier, segment, fullskjerm og sidemeny. Innholdet i menyen (leksjon 4.1) er det samme. Noen ting å passe på, fra forklaringen i selve byggeren:

• Gjennomsiktig ser bare bra ut hvis hver side har en mørk hero eller en hero med bilde.
• Minimal viser bare navnet ditt og én knapp. Lenkene til sidene står da i bunnteksten.
• Med topplinje legger telefon og åpningstider i en smal linje over menyen. Stemmer telefonnummeret?

Under Fargen på menylinjen velger du Automatisk (følger stilen), Hvit, Lysegrå, Mørk eller Uthevingsfarge. En annen farge ber du om i chatten.

Farger og kontrast

Under Farger stiller du inn hovedfargen (knapper, uthevinger), en andre farge for fargeoverganger og bakgrunnen (hvit, krem, kjølig, grå eller en nyanse av fargen din, eller velg selv). Med Knapper med fargeovergang får alle hovedknappene en overgang fra den ene fargen til den andre.

Her kommer kontrast inn: forskjellen i lysstyrke mellom tekst og bakgrunn. Den uttrykkes som et kontrastforhold, fra 1:1 (ingen forskjell) til 21:1 (svart på hvitt). Den internasjonale retningslinjen for tilgjengelige nettsider, WCAG fra W3C, krever på nivå AA minst 4,5:1 for vanlig tekst og 3:1 for stor tekst (omtrent 18 punkter, eller 14 punkter fet). Knapper og andre betjeningselementer må ha minst 3:1 mot omgivelsene.

Byggeren passer på dette for deg. Velger du en farge som tekst er vanskelig å lese på, justerer den fargen og forteller hva som ble endret, for eksempel: «Tekstfargen ... er blitt ..., fordi tekst ellers ikke er lett å lese på den.» Vil du beholde akkurat dine egne farger, slår du på Behold akkurat disse fargene: fargene dine blir stående, og teksten på dem får automatisk en lesbar farge. Også i seksjoner som KI-en lager med egen formatering, retter byggeren tekstfarger som faller under 4,5:1 (stor tekst 3:1).

Dette vurderer byggeren ikke: tekst i et bilde eller i logoen din, og en overskrift over et urolig bilde. Se på det selv, på en mobil. Er du i tvil om et fargepar, legger du inn de to fargekodene i en kontrastsjekker (se Les mer).

Fallgruve: en profilfarge fra trykksaker eller bilen (for eksempel knallgul) passer sjelden som tekstfarge. Bruk den som utheving eller flate, og hold teksten mørk.

Skrift og egen skrifttype

Under Skrifttyper velger du én skrift for Overskrifter og én for Brødtekst. Skrifttypene ligger som filer på din egen side. Det går ingen tilkobling til en skrifttjeneste hos noen andre. Under Skrift og størrelser stiller du inn for hele siden med glidebrytere: linjeavstand og bokstavavstand for tekst og overskrifter, tegn per linje, bredden på innholdet og tykkelsen på overskriftene. Som stilen setter en glidebryter tilbake. Under Tekststørrelse velger du Normal, Stor eller Ekstra stor. Det kan du også gjøre i chatten («gjør skriften større»).

Du kan også bruke en egen skrifttype: last den opp under Skrifttyper eller med bindersen i chatten, som .woff2, .woff, .ttf eller .otf, opptil 2 MB per fil (flere vekter er greit). Deretter velger du hva den skal brukes til: overskrifter, tekst eller begge deler. Det koster ingenting. En skrift fra en tjeneste som Adobe Fonts går ikke.

Viktig: last bare opp en skrift du har nettlisens for. En skrifttype er programvare med lisens. En lisens for bruk på datamaskinen din (til trykksaker) tillater langt fra alltid at du legger filen på en nettside, der hver besøkende laster den ned. Sjekk i lisensvilkårene om bruk på nett er tillatt. Skrifter under SIL Open Font License kan bygges inn og spres.

Mørk modus og bevegelse

Under Mørk modus velger du Off (alltid lys), Alltid mørk eller Som enheten. Med det siste valget ser en besøkende som har mobilen eller datamaskinen på mørk, en mørk versjon av dine egne farger. Bakgrunn, tekst og hovedfarge i mørk modus kan du velge selv. Det finnes ingen knapp der besøkende kan bytte selv. Forhåndsvisningen følger enheten din: sett mobilen eller datamaskinen på mørk for å se den mørke versjonen, og sjekk da logoen din også.

Under Bevegelse velger du On, Rolig eller Off for hele siden, og ved behov et unntak per side. Her velger du også Museeffekt på datamaskin (ingen, magnet eller lysflekk). I forhåndsvisningen står alt stille. Med Spill av animasjon ser du det én gang. Har en besøkende stilt inn mindre bevegelse på enheten sin, står alt stille. For mye bevegelse distraherer. På en side med mye tekst er Rolig eller Off ofte bedre.

I byggeren: slik gjør du det

1. Åpne Visuell profil, blokken Navn og logo. Klikk på Last opp din egen logo eller på La KI designe en logo.
2. Velg logoen din eller den automatiske forbokstaven under Favikon.
3. Prøv to eller tre stiler under Stil. Se også på Mobil.
4. Velg et design og en farge under Menylinje.
5. Still inn hovedfargen under Farger. Les meldingene fra byggeren.
6. Sjekk hva du vil ha under Mørk modus og Bevegelse.
7. Klikk på Lagre og publiser siden din på nytt.

Oppsummering

• Panelet Visuell profil er gratis. Lagre lager en ny versjon.
• En KI-logo koster 1 redigering for tre forslag. Favikonet lager byggeren selv, eller du laster opp ditt eget.
• Tolv stiler og femten menydesign. Innholdet i menyen er det samme.
• WCAG krever minst 4,5:1 kontrast for vanlig tekst og 3:1 for stor tekst. Byggeren passer på dette, unntatt i bilder og i logoen din.
• Egen skrifttype bare med nettlisens. Mørk modus og bevegelse stiller du inn etter hva de besøkende trenger.

Quiz

Oppgave

Oppgave D4.2: Den visuelle profilen din og kontrast. Still inn den visuelle profilen din og mål kontrasten i de viktigste fargeparene dine.

Sjekkliste:

• [ ] logo lastet opp eller valgt blant KI-forslagene;
• [ ] favikon stilt inn og sett i nettleserfanen på den publiserte siden din;
• [ ] stil og menydesign valgt, sett på Mobil;
• [ ] hovedfarge stilt inn og meldingene fra byggeren lest;
• [ ] kontrast mellom tekstfarge og bakgrunn og mellom knappetekst og knappefarge målt med en kontrastsjekker;
• [ ] mørk modus og bevegelse valgt med vilje;
• [ ] visuell profil lagret og siden publisert på nytt.

Spørsmål:

1. Hvilke kontrastforhold målte du for tekst på bakgrunn og for knappetekst på knapp, og når de 4,5:1?
2. Hvor på siden din står det tekst over et bilde, og er den lett å lese på en mobil?
3. Bruker du en egen skrifttype? Hvor i lisensen står det at bruk på nett er tillatt?

Etter «ferdig» ser du et eksempelsvar: Schildersbedrijf Example målte mørkegrå på hvit til 14,5:1 og hvit tekst på den grønne knappen til 5,1:1, begge over 4,5:1. Overskriften over hero-bildet var vanskelig å lese, så bedriften valgte et mørkere bilde. Ingen egen skrifttype, så ingen lisens trengs.

Les mer

• 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, offisiell tekst (engelsk): https://openfontlicense.org/open-font-license-official-text/