Huisstijl: logo, kleuren, letters en menu

Module 4: Pagina's, uiterlijk en functies · Leestijd: 8 minuten

Leerdoel: Na deze les kun je in het paneel Huisstijl je naam en logo, favicon, stijl, menuontwerp, kleuren, letters, donkere modus en beweging instellen, en controleer je of tekst op je site goed leesbaar is.

Kernbegrippen: huisstijl, stijl (look), logo, beeldmerk, woordmerk, favicon, menubalk, hoofdkleur, contrast, contrastverhouding, WCAG, weblicentie, donkere modus, beweging

Waarom huisstijl meer is dan mooi

Een huisstijl is de vaste combinatie van logo, kleuren en letters waaraan mensen je herkennen. Op een website zorgt die voor herkenning (dezelfde kleuren op bus, offerte en site) en moet hij leesbaar blijven: lichtgrijze tekst op wit oogt rustig, maar veel bezoekers lezen het slecht, zeker op een telefoon in de zon.

Alles in het paneel Huisstijl is gratis en direct zichtbaar in het voorbeeld. Pas als je op Opslaan klikt, wordt het een nieuwe versie (les 3.5). Wil je terug, dan klik je op Herstel of zet je een oudere versie terug.

Het paneel heeft deze blokken: Stijl, Kleuren, Lettertypen, Menubalk, Naam en logo, Afbeeldingen, Vorm en ruimte, Letters en maten, Donkere modus en Beweging.

Naam, logo en favicon

In Naam en logo staat de naam van je site, zoals die in de kop en de voet komt. Daaronder het logo:

• Eigen logo uploaden: PNG met doorzichtige achtergrond, SVG, JPG of WebP, tot 2 MB. Een liggend logo werkt het best in een menubalk.
• Heb je geen logo, dan heeft de bouwer een woordmerk gemaakt: je naam in je eigen lettertype en kleuren. Dat past zich vanzelf aan als je die wijzigt.
• Laat AI een logo ontwerpen: je beschrijft kort je bedrijf en de sfeer ("schildersbedrijf in een dorp, ambachtelijk en betrouwbaar") en klikt op Ontwerp drie logo's. Je krijgt drie beeldmerken (een teken zonder tekst) in je kleuren, met je naam ernaast in je lettertype. Samen kost dat 1 bewerking. Kies er een met Gebruik, of schrijf wat er beter kan ("de eerste maar ronder") en klik op Ontwerp drie nieuwe logo's; dat is weer een ronde van 1 bewerking.
• Weergave in menu en voet: Logo en naam, Alleen logo of Alleen naam, en de Grootte (Klein, Normaal, Groot).

De bouwer waarschuwt als een logo dunne lijnen heeft of weinig contrast met je menubalk: klein in de balk kan het dan wegvallen.

Controleer een AI-logo zelf: lijkt het niet te veel op het logo van een ander bedrijf?

De favicon is het icoontje in het browsertabblad en bij bladwijzers. Kies Automatisch: beginletter in je kleuren, Je logo, of Eigen bestand (vierkant, PNG, SVG of ICO, tot 512 KB).

Stijl en menubalk

Een stijl (in de bouwer ook look) bepaalt in één klik letters, vormen, knoppen, kaarten, menu en decoratie. Er zijn er twaalf, zoals Fris, Warm, Zakelijk, Natuur, Atelier en Nacht. Je eigen kleuren blijven staan als je van stijl wisselt; wil je ook de kleuren van de stijl, klik dan op Ook de kleuren van deze stijl. De stijl Nacht is altijd donker.

Onder Menubalk kies je de vorm van de balk bovenaan elke pagina, uit vijftien ontwerpen: volle breedte, gecentreerd, gesplitst, twee regels, kleurbalk, omlijnd, pil, met topbalk, transparant, minimaal, zwevend, rubrieken, segment, volscherm en zijmenu. De inhoud van het menu (les 4.1) blijft hetzelfde. Een paar aandachtspunten uit de uitleg in de bouwer zelf:

• Transparant is alleen mooi als elke pagina een donkere hero of foto-hero heeft.
• Minimaal toont alleen je naam en één knop; de paginalinks staan dan in de voet.
• Met topbalk zet telefoon en openingstijden in een smalle balk erboven. Klopt dat telefoonnummer?

Bij Kleur van de menubalk kies je Automatisch (volgt de stijl), Wit, Lichtgrijs, Donker of Accentkleur. Een andere kleur vraag je in de chat.

Kleuren en contrast

Bij Kleuren stel je de hoofdkleur in (knoppen, accenten), een tweede kleur voor kleurverlopen en de achtergrond (wit, crème, koel, grijs of een tint van je kleur, of zelf kiezen). Met Knoppen met kleurverloop krijgen alle hoofdknoppen een verloop van de ene naar de andere kleur.

Hier komt contrast om de hoek kijken: het verschil in helderheid tussen tekst en achtergrond. Dat drukken we uit als contrastverhouding, van 1:1 (geen verschil) tot 21:1 (zwart op wit). De internationale richtlijn voor toegankelijke websites, WCAG van het W3C, vraagt op niveau AA minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst (ongeveer 18 punt, of 14 punt vet). Knoppen en andere bedieningselementen moeten minstens 3:1 halen tegen hun omgeving.

De bouwer bewaakt dat voor je. Kies je een kleur waarop tekst niet goed leest, dan past hij die aan en meldt hij wat er veranderde, bijvoorbeeld: "De tekstkleur ... is ... geworden, want tekst leest er anders niet goed op." Wil je precies je eigen kleuren houden, zet dan Precies deze kleuren houden aan: je kleuren blijven, en de tekst erop krijgt vanzelf een leesbare kleur. Ook in secties die de AI met eigen opmaak maakt, herstelt de bouwer tekstkleuren die onder 4,5:1 (grote tekst 3:1) vallen.

Wat de bouwer niet beoordeelt: tekst in een foto of in je logo, en een kop over een drukke foto. Kijk daar zelf naar, op een telefoon. Twijfel je over een kleurpaar, vul de twee kleurcodes dan in een contrastchecker in (zie Verder lezen).

Valkuil: een huisstijlkleur van een drukker of bus (bijvoorbeeld fel geel) is zelden geschikt als tekstkleur. Gebruik hem als accent of vlak, en houd de tekst donker.

Letters en eigen lettertype

Bij Lettertypen kies je een letter voor de Koppen en een voor de Lopende tekst. De lettertypen staan als bestanden op je eigen site; er gaat geen verbinding naar een letterdienst van een ander. Bij Letters en maten stel je met schuiven voor de hele site in: regelafstand en letterafstand van tekst en koppen, tekens per regel, breedte van de inhoud en het gewicht van de koppen. Zoals de stijl zet een schuif terug. Bij Tekstgrootte kies je Normaal, Groot of Extra groot; dat kan ook in de chat ("maak de letters groter").

Een eigen lettertype kan ook: upload het bij Lettertypen of met de paperclip in de chat, als .woff2, .woff, .ttf of .otf, tot 2 MB per bestand (meerdere gewichten mag). Daarna kies je waarvoor: koppen, tekst of allebei. Het kost niets. Een letter van een dienst als Adobe Fonts kan niet.

Belangrijk: upload alleen een letter waarvan je de weblicentie hebt. Een lettertype is software met een licentie. Een licentie voor gebruik op je computer (om drukwerk te maken) staat lang niet altijd toe dat je het bestand op een website zet, waar elke bezoeker het binnenhaalt. Kijk in de licentievoorwaarden of webgebruik is toegestaan. Letters onder de SIL Open Font License mogen wel worden ingebouwd en verspreid.

Donkere modus en beweging

Bij Donkere modus kies je Uit (altijd licht), Altijd donker of Zoals het apparaat. Bij die laatste ziet een bezoeker met zijn telefoon of computer op donker een donkere versie van je eigen kleuren. De achtergrond, tekst en hoofdkleur in donker kun je zelf kiezen. Een knop waarmee bezoekers zelf wisselen is er niet. Het voorbeeld volgt jouw apparaat: zet je telefoon of computer op donker om de donkere versie te zien, en controleer dan ook je logo.

Bij Beweging kies je Aan, Rustig of Uit voor de hele site, en zo nodig een uitzondering per pagina. Ook het Muiseffect op een computer (geen, magneet of lichtvlek) kies je hier. In het voorbeeld staat alles stil; met Speel beweging af zie je het één keer. Heeft een bezoeker op zijn apparaat minder beweging ingesteld, dan blijft alles stil. Te veel beweging leidt af; op een pagina met veel tekst is Rustig of Uit vaak beter.

In de bouwer: zo doe je het

1. Open Huisstijl, blok Naam en logo. Klik op Eigen logo uploaden of op Laat AI een logo ontwerpen.
2. Kies bij Favicon je logo of de automatische beginletter.
3. Probeer twee of drie stijlen bij Stijl; kijk ook op Mobiel.
4. Kies bij Menubalk een ontwerp en een kleur.
5. Stel bij Kleuren je hoofdkleur in. Lees de meldingen van de bouwer.
6. Controleer bij Donkere modus en Beweging wat je wilt.
7. Klik op Opslaan en zet je site opnieuw online.

Samenvatting

• Het paneel Huisstijl is gratis; Opslaan maakt een nieuwe versie.
• Een AI-logo kost 1 bewerking voor drie voorstellen; de favicon maakt de bouwer zelf of je uploadt er een.
• Twaalf stijlen en vijftien menuontwerpen; de inhoud van het menu blijft gelijk.
• WCAG vraagt minstens 4,5:1 contrast voor gewone tekst en 3:1 voor grote tekst; de bouwer bewaakt dat, behalve in foto's en je logo.
• Een eigen lettertype alleen met weblicentie; donkere modus en beweging stel je in voor wat je bezoeker nodig heeft.

Quiz

Opdracht

Opdracht D4.2: Je huisstijl en contrast. Stel je huisstijl in en meet het contrast van je belangrijkste kleurparen.

Checklist:

• [ ] logo geüpload of gekozen uit de AI-voorstellen;
• [ ] favicon ingesteld en gezien in het browsertabblad van je online site;
• [ ] stijl en menuontwerp gekozen, bekeken op Mobiel;
• [ ] hoofdkleur ingesteld en de meldingen van de bouwer gelezen;
• [ ] contrast van tekstkleur op achtergrond en van knoptekst op knopkleur gemeten met een contrastchecker;
• [ ] donkere modus en beweging bewust gekozen;
• [ ] huisstijl opgeslagen en site opnieuw online gezet.

Vragen:

1. Welke contrastverhoudingen mat je voor tekst op achtergrond en voor knoptekst op knop, en halen ze 4,5:1?
2. Op welke plek van je site staat tekst over een foto, en is die goed leesbaar op een telefoon?
3. Gebruik je een eigen lettertype? Waar staat in de licentie dat webgebruik mag?

Na "gedaan" zie je een voorbeeldantwoord: Schildersbedrijf Example mat donkergrijs op wit 14,5:1 en witte tekst op de groene knop 5,1:1, allebei boven 4,5:1; de kop over de hero-foto las slecht, dus koos hij een donkerdere foto; geen eigen lettertype, dus geen licentie nodig.

Verder lezen

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