Je huisstijl omzetten naar een webdesign: do’s en don’ts

Wanneer je een website maakt of laat maken, wil je dat deze past bij de uitstraling van je bedrijf. Waarschijnlijk heb je op dit punt al een huisstijl. Maar hoe zorg je ervoor dat die huisstijl ook goed tot zijn recht komt in je website? Waar moet je rekening mee houden en wat kun je beter niet doen? In deze blog helpen we jou met een aantal tips van ons design team.

Waaruit bestaat je huisstijl?

Een huisstijl is de visuele identiteit van je bedrijf. Hierin leg je de regels met betrekking tot visuele uitingen van jouw bedrijf vast. Het doel hiervan is dat alle uitingen dezelfde uitstraling hebben, zodat je de herkenbaarheid van je bedrijf vergroot. Ook kun je je hiermee onderscheiden van andere organisaties. Een huisstijl bestaat onder andere uit:

• Logo, eventueel in verschillende variaties.
• Kleuren
• Lettertypes
• Fotografie
• Stijlelementen

Deze elementen uit de huisstijl kun je vervolgens toepassen op drukwerk zoals visitekaartjes en flyers. En dus ook op online uitingen zoals social media berichten en je website.

Wat maakt een website huisstijl anders?

De stijl van een website bepalen aan de hand van de huisstijl is vaak iets moeilijker dan bijvoorbeeld op een visitekaartje. Dit ligt eraan dat je op een website elementen en functies tegenkomt, die niet deel uitmaken van de standaard huisstijl. Je zult hier dus website-specifieke regels voor moeten vastleggen. Denk bijvoorbeeld aan:

• Buttons: Deze zijn uniek voor een website en worden daarom meestal niet in een huisstijl opgenomen. Je zult bijvoorbeeld moeten bepalen welke kleur buttons krijgen en of er bijvoorbeeld nog onderscheid wordt gemaakt tussen primaire en secundaire (minder belangrijke) buttons.
• Steunkleuren: Je huisstijl bestaat waarschijnlijk uit een aantal vaste kleuren. In webdesign kan het handig zijn om met extra steunkleuren te werken.
• Dynamische elementen: Buttons die van kleur veranderen wanneer je er met je muis overheen gaat, een logo dat zich aanpast op de mobiele weergave van je website, schaduwen die aan het design worden toegevoegd. Zo bevat een website vaak meerdere “dynamische” elementen. Dit zijn elementen die zich aanpassen wanneer je er een bepaalde actie, zoals een klik of hover, op uitvoert. Dat heeft invloed op de kleuren of bijvoorbeeld logo’s.

Mijn huisstijl succesvol omzetten in mijn website

Er komt dus meer bij kijken dan alleen het overnemen van de bestaande huisstijl regels in een website. Bij Go Helix zorgen onze designers ervoor dat jouw huisstijl online het beste tot zijn recht komt. Wil je er zelf mee experimenteren binnen jouw website? Onze designers hebben een aantal tips voor je!

1. Begin simpel. Neem de bestaande huisstijl eerst zo letterlijk mogelijk over op alle in te stellen elementen. Bekijk dan het resultaat en bepaal wat er beter kan. Zo blijf je het meest trouw aan de huisstijl en voorkom je dat je teveel afwijkt van jouw brand.
2. Werk met hiërarchie. Mocht dit in je huisstijl nog niet vastgelegd zijn, is het raadzaam om hiërarchie op de verschillende huisstijl elementen toe te passen. Welke kleur is het meest belangrijk en zou dus het meest prominent op je website moeten staan? Welk lettertype gebruik je voor paginatitels en wat gebruik je bij overige koppen? Deze regels kun je ook offline toepassen, zodat je altijd on brand communiceert.
3. Houdt rekening met responsiveness. Het website formaat wijzigt wanneer je dit op verschillende soorten schermen, zoals laptops en mobiele telefoons, bekijkt. Hierdoor moet content vaak anders worden weergegeven. Hierdoor bestaat de kans dat je moet afwijken van het design zoals dit op een desktop scherm is bedacht. Kopteksten worden kleiner, in plaats van een groot logo stap je wellicht over op alleen het beeldmerk, of kleurstellingen worden gewijzigd om de leesbaarheid te bevorderen. Door hier rekening mee te houden blijft je branding krachtig op elk type scherm.
4. Maak gebruik van steunkleuren. Dit zijn kleuren die geen deel uitmaken van de vaste huisstijl, maar die een webdesign verbeteren door gebruiksvriendelijkheid te vergroten. Denk hierbij aan secundaire buttons die het gemakkelijker maken om bezoekers op de gewenste wijze door de website te leiden. Of achtergrondkleuren om het design op te breken en hiermee beter leesbaar te maken. Meestal zijn dit subtiele kleuren zoals (licht)grijs, zwart, beige of pasteltinten.
5. Ga spaarzaam om met nieuwe elementen. Soms is het nodig om af te wijken. Dit zou echter alleen moeten gebeuren als het de gebruiksvriendelijkheid voor de gebruiker vergroot. Alleen omdat je het mooi vindt is het nog geen goede reden om dit uit te voeren. Hoe vaker en extremer je afwijkt van de huisstijl, des te minder herkenbaar het uiteindelijke webdesign is. Ga dus spaarzaam om met afwijkende regels.

Op een website komen veel technieken samen die invloed hebben op de ervaring van de websitebezoeker. Denk aan leesbaarheid, functionaliteit, ervaring en gevoel. Je eigen huisstijl goed onder de knie hebben is belangrijk, maar op een website is dit vaak net iets moeilijker. Als je er zeker van wilt zijn dat je gebruikers de beste ervaring biedt, kun je dit het beste samen met ervaren webdesigners oppakken. Als je wilt, dan kijken wij graag met je mee.