Grafisk profil: logotyp, färger, typsnitt och meny

Modul 4: Sidor, utseende och funktioner · Lästid: 8 minuter

Lärandemål: Efter den här lektionen kan du i panelen Grafisk profil ställa in namn och logotyp, favicon, stil, menydesign, färger, typsnitt, mörkt läge och rörelse, och du kontrollerar att texten på din webbplats är lätt att läsa.

Nyckelbegrepp: grafisk profil, stil (look), logotyp, symbol, ordmärke, favicon, menyfält, huvudfärg, kontrast, kontrastförhållande, WCAG, webblicens, mörkt läge, rörelse

Varför en grafisk profil är mer än snyggt

En grafisk profil är den fasta kombinationen av logotyp, färger och typsnitt som gör att folk känner igen dig. På en webbplats ger den igenkänning (samma färger på bilen, offerten och webbplatsen), och den måste vara lätt att läsa: ljusgrå text på vitt ser lugnt ut, men många besökare har svårt att läsa den, särskilt på en mobil i solen.

Allt i panelen Grafisk profil är gratis och syns direkt i förhandsvisningen. Först när du klickar på Spara blir det en ny version (lektion 3.5). Vill du tillbaka klickar du på Återställ eller återställer en äldre version.

Panelen har de här blocken: Stil, Färger, Typsnitt, Menyfält, Namn och logotyp, Bilder, Form och avstånd, Typsnitt och storlekar, Mörkt läge och Rörelse.

Namn, logotyp och favicon

Under Namn och logotyp står namnet på din webbplats, så som det visas i sidhuvudet och sidfoten. Under det finns logotypen:

• Ladda upp egen logotyp: PNG med genomskinlig bakgrund, SVG, JPG eller WebP, upp till 2 MB. En liggande logotyp fungerar bäst i ett menyfält.
• Har du ingen logotyp har byggaren gjort ett ordmärke: ditt namn i ditt eget typsnitt och dina färger. Det anpassar sig automatiskt när du ändrar dem.
• Låt AI designa en logotyp: du beskriver kort ditt företag och känslan ("målerifirma i en by, hantverksmässig och pålitlig") och klickar på Designa tre logotyper. Du får tre symboler (ett tecken utan text) i dina färger, med ditt namn bredvid i ditt typsnitt. Tillsammans kostar det 1 redigering. Välj en med Använd, eller skriv vad som kan bli bättre ("den första men rundare") och klicka på Designa tre nya logotyper; det är en ny omgång på 1 redigering.
• Visning i meny och sidfot: Logotyp och namn, Bara logotyp eller Bara namn, och Storlek (Liten, Normal, Stor).

Byggaren varnar om en logotyp har tunna linjer eller låg kontrast mot ditt menyfält: liten i fältet kan den då försvinna.

Kontrollera en AI-logotyp själv: liknar den inte för mycket ett annat företags logotyp?

Favicon är den lilla ikonen i webbläsarfliken och vid bokmärken. Välj Automatiskt: första bokstaven i dina färger, Din logotyp eller Egen fil (kvadratisk, PNG, SVG eller ICO, upp till 512 KB).

Stil och menyfält

En stil (i byggaren även look) bestämmer med ett klick typsnitt, former, knappar, kort, meny och dekoration. Det finns tolv, till exempel Fräsch, Varm, Affärsmässig, Natur, Ateljé och Natt. Dina egna färger ligger kvar när du byter stil; vill du även ha stilens färger klickar du på Använd även stilens färger. Stilen Natt är alltid mörk.

Under Menyfält väljer du formen på fältet högst upp på varje sida, bland femton designer: full bredd, centrerad, delad, två rader, färgfält, inramad, piller, med toppfält, transparent, minimal, svävande, kategorier, segment, helskärm och sidomeny. Menyns innehåll (lektion 4.1) är detsamma. Några saker att tänka på, från förklaringarna i själva byggaren:

• Transparent blir bara snyggt om varje sida har en mörk hero eller en fotohero.
• Minimal visar bara ditt namn och en knapp; sidlänkarna hamnar då i sidfoten.
• Med toppfält visar telefonnummer och öppettider i ett smalt fält ovanför. Stämmer telefonnumret?

Under Menyfältets färg väljer du Automatiskt (följer stilen), Vit, Ljusgrå, Mörk eller Accentfärg. En annan färg ber du om i chatten.

Färger och kontrast

Under Färger ställer du in huvudfärgen (knappar, accenter), en andra färg för färgövergångar och bakgrunden (vit, crème, kylig, grå eller en nyans av din färg, eller välj själv). Med Knappar med färgövergång får alla huvudknappar en övergång från den ena färgen till den andra.

Här kommer kontrast in: skillnaden i ljushet mellan text och bakgrund. Den uttrycks som kontrastförhållande, från 1:1 (ingen skillnad) till 21:1 (svart på vitt). Den internationella riktlinjen för tillgängliga webbplatser, WCAG från W3C, kräver på nivå AA minst 4,5:1 för vanlig text och 3:1 för stor text (ungefär 18 punkter, eller 14 punkter i fetstil). Knappar och andra kontroller ska nå minst 3:1 mot omgivningen.

Byggaren håller koll på det åt dig. Väljer du en färg som text är svår att läsa på, justerar den färgen och berättar vad som ändrades, till exempel: "Textfärgen ... har blivit ..., eftersom texten annars är svår att läsa." Vill du behålla exakt dina egna färger slår du på Behåll exakt de här färgerna: dina färger finns kvar och texten på dem får automatiskt en läsbar färg. Även i sektioner som AI skapar med egen formatering rättar byggaren textfärger som hamnar under 4,5:1 (stor text 3:1).

Det här bedömer byggaren inte: text i ett foto eller i din logotyp, och en rubrik över ett plottrigt foto. Titta på det själv, på en mobil. Är du osäker på ett färgpar fyller du i de två färgkoderna i en kontrastkontroll (se Läs mer).

Fallgrop: en profilfärg från tryckeriet eller bilen (till exempel knallgul) passar sällan som textfärg. Använd den som accent eller färgyta och håll texten mörk.

Typsnitt och eget typsnitt

Under Typsnitt väljer du ett typsnitt för Rubriker och ett för Brödtext. Typsnitten ligger som filer på din egen webbplats; ingen anslutning görs till någon annans typsnittstjänst. Under Typsnitt och storlekar ställer du med reglage in för hela webbplatsen: radavstånd och teckenavstånd för text och rubriker, tecken per rad, innehållets bredd och rubrikernas tjocklek. Som stilen återställer ett reglage. Under Textstorlek väljer du Normal, Stor eller Extra stor; det går också i chatten ("gör texten större").

Ett eget typsnitt går också: ladda upp det under Typsnitt eller med gemet i chatten, som .woff2, .woff, .ttf eller .otf, upp till 2 MB per fil (flera vikter går bra). Sedan väljer du vad det ska användas till: rubriker, text eller båda. Det kostar ingenting. Ett typsnitt från en tjänst som Adobe Fonts går inte.

Viktigt: ladda bara upp ett typsnitt som du har webblicens för. Ett typsnitt är programvara med en licens. En licens för användning på din dator (för att göra trycksaker) tillåter långt ifrån alltid att du lägger filen på en webbplats, där varje besökare laddar ner den. Kontrollera i licensvillkoren om webbanvändning är tillåten. Typsnitt under SIL Open Font License får byggas in och spridas.

Mörkt läge och rörelse

Under Mörkt läge väljer du Av (alltid ljust), Alltid mörkt eller Som enheten. Med det sista alternativet ser en besökare som har mörkt läge på mobilen eller datorn en mörk version av dina egna färger. Bakgrund, text och huvudfärg i mörkt läge kan du välja själv. Någon knapp där besökarna själva kan växla finns inte. Förhandsvisningen följer din enhet: ställ in mobilen eller datorn på mörkt läge för att se den mörka versionen, och kontrollera då även din logotyp.

Under Rörelse väljer du På, Lugn eller Av för hela webbplatsen, och vid behov ett undantag per sida. Även Mus-effekt på dator (ingen, magnet eller ljusfläck) väljer du här. I förhandsvisningen står allt stilla; med Spela upp animation ser du den en gång. Har en besökare ställt in mindre rörelse på sin enhet står allt stilla. För mycket rörelse distraherar; på en sida med mycket text är Lugn eller Av ofta bättre.

I byggaren: så gör du

1. Öppna Grafisk profil, blocket Namn och logotyp. Klicka på Ladda upp egen logotyp eller på Låt AI designa en logotyp.
2. Välj din logotyp eller den automatiska första bokstaven under Favicon.
3. Prova två eller tre stilar under Stil; titta även i Mobil.
4. Välj en design och en färg under Menyfält.
5. Ställ in din huvudfärg under Färger. Läs byggarens meddelanden.
6. Kontrollera vad du vill ha under Mörkt läge och Rörelse.
7. Klicka på Spara och publicera webbplatsen igen.

Sammanfattning

• Panelen Grafisk profil är gratis; Spara skapar en ny version.
• En AI-logotyp kostar 1 redigering för tre förslag; favicon gör byggaren själv, eller så laddar du upp en.
• Tolv stilar och femton menydesigner; menyns innehåll är detsamma.
• WCAG kräver minst 4,5:1 i kontrast för vanlig text och 3:1 för stor text; byggaren håller koll på det, utom i foton och i din logotyp.
• Eget typsnitt bara med webblicens; mörkt läge och rörelse ställer du in efter vad dina besökare behöver.

Quiz

Uppgift

Uppgift D4.2: Din grafiska profil och kontrast. Ställ in din grafiska profil och mät kontrasten för dina viktigaste färgpar.

Checklista:

• [ ] logotyp uppladdad eller vald bland AI-förslagen;
• [ ] favicon inställd och kontrollerad i webbläsarfliken på din publicerade webbplats;
• [ ] stil och menydesign valda, kontrollerade i Mobil;
• [ ] huvudfärg inställd och byggarens meddelanden lästa;
• [ ] kontrasten för textfärg mot bakgrund och för knapptext mot knappfärg mätt med en kontrastkontroll;
• [ ] mörkt läge och rörelse medvetet valda;
• [ ] grafisk profil sparad och webbplatsen publicerad igen.

Frågor:

1. Vilka kontrastförhållanden mätte du för text mot bakgrund och för knapptext mot knapp, och når de 4,5:1?
2. Var på din webbplats ligger text över ett foto, och är den lätt att läsa på en mobil?
3. Använder du ett eget typsnitt? Var i licensen står det att webbanvändning är tillåten?

När du har klickat på "klar" ser du ett exempelsvar: Schildersbedrijf Example mätte mörkgrått på vitt till 14,5:1 och vit text på den gröna knappen till 5,1:1, båda över 4,5:1; rubriken över herofotot var svår att läsa, så de valde ett mörkare foto; inget eget typsnitt, alltså behövs ingen licens.

Läs mer

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