Hoe laat je je huisstijl en website op elkaar aansluiten?

Door Jeroen · Creatief technoloog bij Digital Powder

Een logo, kleuren en lettertypen geven je bedrijf een herkenbaar gezicht. Op een website moeten ze ook praktisch werken: in het menu, op een kleine knop en naast een lange tekst.

Daarom bekijken we een huisstijl niet los van de website. We testen ontwerpkeuzes op echte pagina’s, met echte inhoud. Zo zie je niet alleen of het mooi is, maar ook of bezoekers er makkelijk mee uit de voeten kunnen. Jeroen werkt aan identiteit, websites en ontwikkeling. Ria brengt haar sterke punten in illustratie, tekenen en redactioneel ontwerp in.

Begin met wat het bedrijf al heeft

Een websiteproject hoeft niet met een nieuw logo te beginnen.

Bekijk het materiaal dat al wordt gebruikt: het logo, foto’s, drukwerk, kleuren en lettertypen. Wat vertegenwoordigt het bedrijf nog? Wat herkennen klanten? Wat ontbreekt wanneer je dat materiaal naar een website brengt?

Soms is de identiteit al goed ontwikkeld en moet je die vooral toepassen. Andere bedrijven hebben een logo, maar hebben nog niet bepaald hoe de rest van hun communicatie eruit moet zien. Een nieuw bedrijf kan beide tegelijk nodig hebben.

Dat zijn verschillende uitgangspunten. Als je jouw situatie herkent, voorkom je dat je betaalt voor ontwerpwerk dat je niet nodig hebt of verwacht dat een websitesjabloon onbesproken keuzes voor je maakt.

Van logo naar website bij Poundhill Pets

Voor Poundhill Pets ontwierp Ria het logo en Jeroen de website. Katie Ball begon haar bedrijf en wilde een logo dat aansloot op wat ze voor ogen had.

In haar beoordeling beschrijft Katie het resultaat:

‘Ria ontwierp het perfecte logo en maakte het echt uniek voor mij.’

Haar reactie beschrijft de website ook in praktische termen: navigatie die zij makkelijk vond en een aanvraagformulier dat de informatie verzamelde die ze nodig had om een kennismaking met de klant te plannen.

Dat zijn twee afzonderlijke onderdelen van de opdracht. De identiteit moest goed voelen voor de persoon achter het bedrijf. De website moest ook een mogelijke klant helpen de dienst te begrijpen en de volgende stap te zetten.

Alleen een visuele beoordeling vertelt niet of het aanvraagformulier de juiste vragen stelt. Alleen een werkend formulier vertelt niet of de website Katies bedrijf presenteert zoals zij bedoelde. Beide verdienden aandacht.

Neem ontwerpbeslissingen op echte pagina’s

Een kleurenpalet en lettertypen geven een website richting, maar beantwoorden niet elke ontwerpvraag.

Een kleur die goed werkt als groot vlak in drukwerk kan een andere rol nodig hebben op een pagina met links, formuliervelden en lange teksten. Een eigen kopstijl moet ook passen bij een dienstnaam die twee regels beslaat. Een logo heeft genoeg ruimte nodig om herkenbaar te blijven zonder de navigatie te verdringen.

Probeer die keuzes met echte inhoud. Beoordeel een dienstenpagina, een formulier en een mobiel menu, naast de homepage op een ruim desktopscherm.

Stel vervolgens twee soorten vragen. Ziet dit eruit als het bedrijf? En kan iemand vinden, lezen en gebruiken wat op de pagina staat?

Als de antwoorden botsen, pas dan de toepassing van het ontwerp aan. Een beter leesbaar knoplabel vraagt om een passende toepassing van de identiteit; die identiteit kan gewoon behouden blijven.

Laat ruimte om het ontwerp te verfijnen

Voor The Calm Home Company ontwikkelde Ria logo-ideeën en verfijnde zij de gekozen richting samen met Heather Dhillon. Heather beschrijft dat proces in haar beoordeling:

‘We verkenden een paar ideeën en ze verfijnde het geduldig, keer op keer, totdat het perfect was.’

Jeroen hielp ook bij de bouw van de Squarespace-website en leverde de technische inbreng om het nieuwe bedrijf online te brengen.

Het logo en de website waren verwante opdrachten, maar riepen verschillende vragen op. Feedback op het logo ging over de identiteit zelf. Bij de website moest ook worden bepaald hoe informatie wordt gepresenteerd en hoe je binnen het gekozen platform werkt.

Het helpt om voor beide beoordelingen ruimte te maken. Een goedgekeurd logo bepaalt nog niet elke pagina-indeling, net zoals de keuze voor een websiteplatform niet bepaalt hoe het bedrijf eruit moet zien.

Maak het ontwerp bruikbaar na de overdracht

Een website moet ook gewone wijzigingen aankunnen: een extra dienst, een vervangende foto of een pagina met een veel langere kop dan de oorspronkelijke voorbeelden.

Bespreek zulke wijzigingen tijdens het ontwerp. Welke keuzes horen in de sjablonen? Wat kan de persoon die de website bijhoudt aanpassen? Welke aanwijzingen helpen bij het kiezen van een afbeelding of het opbouwen van een nieuwe pagina?

Als een indeling consistent moet blijven, moet de beheerder die niet telkens handmatig hoeven namaken. Als het bedrijf flexibiliteit nodig heeft, hoort die bij de opdracht.

Merk en website samenbrengen gaat dus verder dan de dag van de livegang. Het omvat ook afspraken over hoe beheerders het ontwerp gebruiken. Dat verdient aandacht, of je nu een nieuwe identiteit ontwikkelt of met een bestaande werkt.