Websites zijn niet meer weg te denken. Daarom is het erg belangrijk dat je website eruit ziet als onderdeel van je bedrijf of merk. Om herkenbaar te blijven, is het raadzaam je huisstijl door te voeren in alle communicatiemiddelen… en dus ook je website! Maar, hoe zorg je dat je huisstijl ook online goed door komt? Wij hebben een paar nuttige tips voor je op een rijtje gezet!

01. Kleurgebruik op je website: let op met linkjes

Natuurlijk ligt het voor de hand om de kleuren die in je huisstijl zijn vastgelegd, ook te gebruiken op je website. Kleurgebruik is erg belangrijk om herkenbaarheid te creëren, denk bijvoorbeeld aan McDonalds (geel en rood), Nivea (blauw en wit) en Ikea (blauw en geel). Je huisstijl kleuren doorvoeren op je website is dan ook zeker slim om te doen! Er is wel een grote maar…

Wees erg terughoudend als het gaat om het kleuren van linkjes

Uit onderzoek blijkt dat blauwe linkjes nog altijd het beste werken, dus wees erg terughoudend als het gaat om het kleuren van linkjes. Mensen zijn namelijk dol op conventies en blauwe onderstreepte teksten worden snel herkend als links. Het is daarom verstandig om bij voorkeur geen andere kleuren dan blauw voor linkjes te gebruiken. Uiteraard kun je wel kijken naar een variant blauw die goed past bij de rest van de huisstijlkleuren. Let wel op het contrast… dat kan namelijk snel te laag worden bij gekleurde teksten! Hou er ook rekening mee dat niet iedereen een even goed beeldscherm heeft. Subtiele verschillen in kleur zullen bij lang niet iedereen zichtbaar zijn. Zorg dat belangrijke elementen dus altijd voldoende contrast hebben.

02. Typografie, zo doe je het goed

Een goed gekozen lettertype voegt veel toe aan de huisstijl van je website. Het kan echt een beleving toevoegen. Bedenk maar eens het Nike-logo met een heel klassiek schreeflettertje. Dat zou een compleet andere vibe geven dan dat het nu doet!

Daarom is het fijn als je je huisstijllettertype ook kan gebruiken op je website. Dat kan prima als je een Google Font gebruikt, of een font dat via Adobe ingeladen kan worden (voorheen Typekit).

Enkele tips bij het inladen van fonts (lettertypes):

• Laad alleen de font-weights in die je ook echt gebruikt op de site. Hoe meer font-weights, hoe meer data er ingeladen wordt (en de site dus trager wordt). Vaak kom je met een Regular en een bold al een heel eind.
• Wees terughoudend met het inladen van (gekochte) lettertypes vanaf de server. Dat werkt vaak trager en je kan bovendien zitten met rechten issues. Bij gekochte fonts mag je niet zomaar ongelimiteerd het inladen!
• Kijk of je uit komt met alleen het gebruik van Google/Adobe fonts voor koppen (H1, H2, etc). (Ook weer om wat laadtijd te winnen)
• Gebruik altijd een fallback lettertype. Als het font dan niet goed inlaadt, ziet het er anders plotseling heel lelijk uit. Gebruik bijvoorbeeld Arial en Helvetica als fallback lettertype voor schreefloze lettertypes, en Georgia voor schreef lettertypes.

Gratis Google Fonts alternatieven voor betaalde fonts

Voor veel (betaalde) lettertypes zijn Google Font alternatieven beschikbaar:

1. Helvetica → Open Sans of Roboto
2. Franklin Gothic → Libre Franklin
3. Frutiger →Hind
4. Futura →Nunito
5. Sofia Pro → Poppins
6. Futura → Questrial
7. Baskerville → Libre Baskerville
8. Proxima Nova, Gotham → Montserrat
9. Adobe Caslon → Lusitana
10. Neo Sans → Armata
11. Museo Slab → Zilla Slab of Roboto Slab
12. FF Meta Web Pro → Source Sans Pro of Fira Sans
13. FF DIN → Roboto
14. Poster Bodoni → Abril Fatface
15. Avenir → Lato
16. Big Calson → Lusitana
17. ITC American Typewriter → Cutive
18. ITC Garamond → EB Garamond
19. Neue Haas Grotesk → Arimo
20. Nexa → Montserrat

03. Grafische elementen

Het nadeel van online, ten opzichte van print, is dat je te maken hebt met verschillende schermformaten. Dat kan het lastig maken om grafische elementen goed te implementeren. Vooral bij ronde vormen kom je vaak niet lekker uit met de ruimte.

Er zijn een aantal opties die goed werken om toch jouw grafische elementen te kunnen gebruiken voor de huisstijl van je website.

Afbeeldingen: gebruik een masker over afbeeldingen heen om er een eigen twist aan te geven. De pagina wordt er direct een stuk dynamischer van. SVG maskers werken vaak het beste vanwege de schaalbaarheid.

Footer: zo aan het eind van de pagina is het niet erg om wat meer ruimte te pakken. Dit is dus de plek om jouw grafische element terug te laten komen. Maak voor desktop en mobiel eventueel losse varianten.
En de header dan? Is dat geen goede plek?
Het lastige aan de header is dat je deze vanuit gebruikersperspectief zo helder en compact mogelijk wil houden. Cirkels en bogen als achtergrond werken hier daarom minder goed. Een schuine lijn kan natuurlijk wel prima. Soms kun je ook (subtiel) een patroon als achtergrond of rand gebruiken waarmee je wat meer eigenheid creëert.

Call To Action blokken. Blokken waarin je de bezoeker oproept tot actie zijn vaak ook wel geschikt om je grafische elementen in terug te laten komen. Dit omdat ze vaak wat minder tekst bevatten en ook best wat ruimte mogen innemen.

04. Animaties

Mits subtiel toegepast, zijn animaties een extra element dat je goed kan inzetten om jouw merk ook online goed te laden. Is jouw bedrijf jong en dynamisch (zeg dat dus nooit op je website!) dan passen daar ook frivole animaties bij. Hierbij kun je denken aan een button die na een click even animeert, een loadertje bij het laden van afbeeldingen of video, of bijvoorbeeld een illustratie die beweegt.

Wil je het wat zakelijker houden, pak dan rustige animaties die wat zwaarder “aanvoelen”. Een mooie fade bij mouse overs maakt je site net even wat minder hard en een stuk professioneler.

Wat je niet moet doen is animaties op blokken tekst of andere grote brokken content. De vertraging die hierbij komt kijken is voor je bezoeker irritant waardoor het beoogde effect er niet is.

Vermijd ook scroll hijacking. Hierbij koppel je animaties aan de scrollbeweging, waarbij de voortgang van het scrollen op een pagina anders is dan de gebruiker gewend is. Het ziet er vet uit, maar het levert vaak meer frustratie op dan nodig. Er zijn altijd uitzonderingen (denk bijvoorbeeld aan exploded views, die kan je juist heel mooi maken met scroll hijacking).

05. Het zit hem in de details

Dan zijn er nog een aantal details waar je als ontwerper net even wat karakter kan toevoegen aan jouw website, waardoor deze beter aansluit op de huisstijl:

• Gedrag van buttons. Bijvoorbeeld een subtiele animatie onclick. Ook kun je natuurlijk de layout wat aanpassen. Ons advies is om hier niet teveel op los te gaan; buttons moeten duidelijk herkenbaar blijven als zodanig. Je kan natuurlijk wel variëren met afgeronde hoeken, volledig afgerond of juist vierkant
• Iconen. Een eigen set ontwikkelen kost veel tijd maar voegt zeker wat toe. In sommige kant-en-klare sets is het mogelijk om kleuren aan te passen. Daarmee kan je zo’n iconenset ook passend bij je huisstijl maken
• Avatars (bijvoorbeeld foto’s bij reviews). Vaak staan deze in een cirkeltje, maar je kan natuurlijk ook kiezen voor vierkant, of afgeronde hoeken. Of een apart bordertje met een box-shadow.
• Foto’s en illustraties. Pak niet zomaar klakkeloos stockfoto’s maar kijk of je ook online je kan houden aan de richtlijnen die in je huisstijlhandboek zijn beschreven.

06. Copy!

Taal is uitermate geschikt om je identiteit in door te laten klinken. Een website bevat naast de teksten op je contentpagina’s ook enorm veel microcopy. Besteed hier veel aandacht aan, want het zal de gebruikerservaring in positieve zin beïnvloeden. Bij microcopy kan je denken aan:

• teksten van buttons
• teksten bij formulieren
  • Labels
  • Foutmeldingen
  • Extra uitleg
  • Bedankpagina’s
• navigatie labels
• notificaties
• USP’s
• teksten in winkelmandjes e.d.

Styleguide

Een website is nooit af. Bij doorontwikkeling wil je natuurlijk wel dat de stijl goed wordt doorgetrokken. Het kan dan handig zijn om veel voorkomende componenten vast te leggen in een styleguide. Developers kunnen deze dan gebruiken om hun code op te baseren. In zo’n styleguide leg je zaken vast als buttons, invoervelden, notificaties, kleuren, tekststijlen en icoongebruik.

Uiteraard kan je deze zaken ook beschrijven in je huisstijlhandboek. Op onzehuisstijl.nl maak je eenvoudig een handboek aan en kan je bij de richtlijnen het ook hebben over online. Ook kan je in het template gedeelte een styleguide bestand toevoegen.

Succes!