Hoe u een consistente merkidentiteit op uw website creëert

Het korte antwoord

Een herkenbare website ontstaat wanneer logo, kleuren, lettertypen, beelden en teksten dezelfde merkidentiteit ondersteunen. Ook knoppen, formulieren en andere interactieve onderdelen horen daarbij. Een bezoeker moet bij het lezen van uw diensten en het bekijken van uw projecten hetzelfde bedrijf herkennen. Een logo op iedere pagina is daarvoor onvoldoende: leg vast hoe de onderdelen worden gebruikt en wie die afspraken bewaakt wanneer de site groeit.

Consistentie betekent niet dat alle pagina's kopieën van elkaar moeten zijn. Een projectpagina en een contactformulier kunnen verschillende behoeften hebben. Een gedeelde huisstijl geeft die verschillende pagina's herkenbare regels voor vormgeving en gebruik. Op deze manier raakt de site niet gefragmenteerd als er nieuwe inhoud wordt toegevoegd.

Deze gids is bedoeld voor bedrijven die hun bestaande merkidentiteit naar de webomgeving willen verplaatsen of een rommelige site willen organiseren. We bespreken eerst de keuzes achter het ontwerp, voordat specifieke ontwerptools aan bod komen. Streef naar een samenhangend uiterlijk dat uw dienstverlening duidelijk en geloofwaardig overbrengt.

Bepaal eerst wat het merk moet zeggen

Voordat u een kleur of lettertype kiest, moet u uitleggen wat uw bedrijf de klant belooft. Welk probleem lost u op, wie bedient u en wat zijn de onderscheidende kenmerken van de manier waarop u werkt? Deze antwoorden maken het gemakkelijker om visuele voorkeuren te evalueren.

De sitetaal van een bedrijf dat een complexe dienst vereenvoudigt, moet bijvoorbeeld ook beschrijvend zijn. Alleen rustige kleuren gebruiken als teksten vol onbegrijpelijke termen staan, is niet voldoende om deze aanpak over te brengen. Er moet een relatie tot stand worden gebracht tussen merkidentiteit en inhoud.

Maak afspraken over enkele basisprincipes binnen de organisatie. Principes als ‘een helder verhaal’, ‘voorbeelden uit het echte werk’ of ‘communicatie zonder onnodige stappen’ kunnen als leidraad dienen voor beslissingen. Laat ze niet in een abstracte presentatie achter; verander ze in criteria die kunnen worden gebruikt bij het ontwerpen van pagina's en het beoordelen van teksten.

Bestudeer beschikbare materialen

Bekijk logo's, presentaties, visitekaartjes, social media-afbeeldingen en bestaande webpagina's samen. Let op welke elementen hetzelfde worden gebruikt en welke anders worden gebruikt. Deze toetsing kan uitwijzen of een nieuwe identiteit nodig is of dat het toepassen van bestaande regels voldoende is.

Soms is het probleem eerder de bestandsorganisatie dan een gebrek aan ontwerp. Verschillende teams kunnen verschillende logoversies gebruiken. Het kan zijn dat er oude kleurcodes of niet-goedgekeurde lettertypen in omloop zijn. Het verzamelen van de huidige middelen op één plek is een belangrijke eerste stap.

Beschouw elk verschil niet automatisch als een vergissing. Het kan de tijdelijke beeldtaal van een campagne zijn. Het belangrijkste is om te onderscheiden welke elementen tot de kernidentiteit behoren en welke voor specifiek gebruik zijn ontworpen. Zonder dit onderscheid kan het onnodig zijn om alle materialen in één beeld te forceren.

Leg vast hoe het logo op de website wordt gebruikt

De versies van het logo op lichte en donkere achtergronden, de ruimte die eromheen moet worden gelaten en de leesbaarheid op klein formaat moeten worden bepaald. Een logo dat er goed uitziet in het hoofdmenu is mogelijk niet leesbaar op een mobiele header. Gebruiksregels moeten op echte schermen worden getest.

Als het embleem en het woordmerk samen of afzonderlijk worden gebruikt, leg dan de voorwaarden uit. In een smal gebied kan een andere versie nodig zijn. Het aanbieden van goedgekeurde opties in plaats van dat ontwerpers op elke pagina hun eigen oplossingen produceren, levert echter consistentere resultaten op.

Bestandsformaat en kwaliteit zijn ook belangrijk. De achtergrond, randen en schaling van de logoafbeelding moeten worden gecontroleerd. Gebruik originele bronnen in plaats van bestanden die zijn gemaakt op basis van een kleine schermafbeelding. Het team dat nieuwe inhoud voorbereidt, moet gemakkelijk kunnen begrijpen welk bestand het moet kiezen.

Rangschik kleuren op basis van hun functies

Het hebben van een merkkleur betekent niet dat alle knoppen en tekst dezelfde kleur moeten hebben. Definieer gebruiksrollen voor hoofdachtergrond, hoofdtekst, nadruk, koppeling en statusberichten. Zo wordt kleur onderdeel van het informatiesysteem, en niet alleen van decoratie.

Het simpelweg aangeven van de foutmelding in het rood kan bijvoorbeeld niet voldoende zijn. Leg ook in tekst uit wat de melding is en hoe u deze kunt verhelpen. Op dezelfde manier mag de zichtbaarheid van links niet alleen afhankelijk zijn van een subtiel kleurverschil.

Experimenteer met kleurbeslissingen met echte inhoud. Een lange alinea, een kleine beschrijving of een onderschrift bij een foto hebben verschillende leesbaarheidsvoorwaarden. Tonen of achtergrondopties kunnen worden bewerkt om de leesbaarheid te garanderen, terwijl het merkpalet behouden blijft. Visuele identiteit mag het gebruik ervan niet moeilijk maken.

Typografie moet een hiërarchie creëren

Bepaal duidelijke rollen voor de titel, subkop, hoofdtekst en nuttige beschrijvingen. Wanneer de bezoeker de pagina scant, moet hij kunnen begrijpen welke informatie het hoofdidee is en welke de details zijn. Het vergroten of vetgedrukt maken van alle tekst verhult de volgorde van belangrijkheid.

Controleer de ondersteunde talen in de lettertypeselectie. Turkse karakters, Nederlandse woorden en lange dienstnamen moeten worden getest met echte teksten. Het ontwerp, dat alleen is goedgekeurd met korte Engelse voorbeelden, geeft mogelijk niet hetzelfde resultaat in andere talen.

Regellengte en alinea-afstand hebben ook invloed op de leeservaring. Tekst die de gehele breedte van een groot desktopscherm beslaat, kan vermoeiend zijn. Op mobiel kunnen zeer smalle gebieden voor onnodige regeleinden zorgen. Beschouw typografie niet louter als het kiezen van een lettergrootte.

Maak afspraken over de keuze van beelden

Projectschermen, teamfoto's en conceptuele afbeeldingen dienen verschillende doeleinden. Bepaal per type wat u wilt overbrengen. Door alleen decoratieve afbeeldingen te gebruiken waar echt projectbewijs vereist is, kan de vraag van de bezoeker onbeantwoord blijven.

Beelden hoeven niet allemaal dezelfde kleuren te hebben om bij elkaar te passen. Kader, belichting, beschrijving en context zijn ook effectief. U kunt een gemeenschappelijke presentatie-indeling gebruiken terwijl de natuurlijke identiteit van verschillende projecten behouden blijft. Het is niet nodig om elke klantklus in uw merkkleur te schilderen.

Presenteer gegenereerde of illustratieve afbeeldingen niet als daadwerkelijke teams, daadwerkelijke producten of voltooid werk. De aard van het beeld moet worden begrepen vanuit zijn context. In een portfolio heeft een juiste weergave van het uitgevoerde werk voorrang op visueel effect.

Beschrijf de teksttoon met concrete voorbeelden

Definities als ‘toegankelijk maar professioneel’ kunnen een begin zijn, maar op zichzelf zijn ze misschien niet de leidraad voor de schrijver. Laat met voorbeelden zien wat voor soort zinnen u moet gebruiken en welke uitdrukkingen niet de voorkeur hebben. Bespreek de gewenste toon aan de hand van een echte alinea over uw dienstverlening.

U kunt bijvoorbeeld uitleggen wat u doet in plaats van ‘wij tillen uw digitale transformatie naar nieuwe hoogten’. “We zijn een site aan het maken die uw diensten uitlegt, die op mobiel kan worden gebruikt en die offerteaanvragen aan uw team bezorgt” biedt een concreter raamwerk. De omvang van de claims moet consistent zijn met uw daadwerkelijke dienstverlening.

Dezelfde toon zou moeten worden voortgezet in kleine interfaceteksten. Formulierfouten mogen niet beschuldigend zijn, succesberichten moeten de volgende stap uitleggen. Als de aanpak op de dienstenpagina en het taalgebruik in de geautomatiseerde e-mail van elkaar worden losgekoppeld, blijft de merkbeleving onvolledig.

Componentregels maken nieuwe pagina's eenvoudiger

Vaste afspraken over terugkerende onderdelen maken nieuwe pagina's eenvoudiger. Denk aan knoppen, kaarten, projectblokken en informatievakken. Het team hoeft niet op elke pagina een nieuwe ontwerpbeslissing te nemen. Deze aanpak brengt consistentie in de dagelijkse werkroutine.

Gemeenschappelijke componenten mogen de inhoud echter niet in dezelfde mal dwingen. De ene dienst heeft wellicht een gedetailleerde vergelijking nodig, de andere een procesbeschrijving. Het systeem moet flexibel genoeg zijn om verschillende soorten informatie te ondersteunen.

Wanneer een nieuw onderdeel nodig is, noteer dan de reden. Is de huidige optie werkelijk ontoereikend, of zou een kleine aanpassing voldoende zijn? Het voortdurend genereren van nieuwe uitzonderingen kan het systeem na verloop van tijd kapot maken. Het doel van de regels is niet om het ontwerp te bevriezen, maar om bewust met veranderingen om te gaan.

Hoe u consistentie kunt behouden op een meertalige site

Het woord voor woord gebruiken van dezelfde zin in elke taal levert mogelijk geen natuurlijke uitdrukking op. Wat gemeenschappelijk moet blijven is de betekenis, omvang en merkbenadering van de dienst. Lokale uitdrukkingsvormen kunnen dienovereenkomstig worden aangepast.

Maak een kleine woordenlijst met dienstnamen en veelgebruikte termen. Voeg Engelse, Nederlandse en Turkse equivalenten toe. Op deze manier kunt u voorkomen dat u op de ene pagina een andere vertaling gebruikt en op de andere een andere.

Controleer ook de taalversies visueel. Lange titels, knoplabels en formulierbeschrijvingen kunnen de lay-out beïnvloeden. Elke taal moet op zichzelf leesbaar zijn. Consistentie betekent niet dat alle teksten even lang lijken te zijn.

Van merkidentiteit tot website: het voorbeeld van Continex

In Pixel's Continex Global project werden de merkidentiteit en de website samen ontwikkeld. De projectomvang omvat regels voor het gebruik van logo's, kleuren, het Montserrat-lettertype, voorbeelden van zakelijk drukwerk en het ontwerp van webpagina's. Marineblauw en lichtblauw maken deel uit van de gemeenschappelijke beeldtaal.

Het leerzame aspect van dit voorbeeld is dat de identiteit niet als één logobestand mag worden achtergelaten. Hoe het er in verschillende gebruiksgebieden uit zal zien, is beschreven en het webdesign is met hetzelfde raamwerk opgesteld. Merkbeslissingen kunnen dus in meer dan één omgeving worden geëvalueerd.

Niet elk bedrijf hoeft dezelfde kleuren of dezelfde omvang te kiezen. De aanpak die hier kan worden gevolgd, is het testen van identiteitsregels in concrete toepassingen. Controleer ook hoe een ontwerpkeuze voor een visitekaartje uitpakt in een webformulier of bovenaan een mobiele pagina.

• Bekijk het Continex-project

Merkcontroles vóór publicatie

Voer deze controle niet alleen op de startpagina uit. Kies verschillende voorbeelden zoals de langste dienstenpagina, projectdetail en contactformulier. Bereid een korte handleiding voor om ervoor te zorgen dat dezelfde controle wordt uitgevoerd op nieuwe pagina's.

Maak de merkgids bruikbaar in het dagelijkse werk

Nadat u de handleiding hebt voorbereid, geeft u deze aan iemand die inhoud toevoegt en vraagt u hem of haar een voorbeeldpagina te maken. Kunnen ze begrijpen welk logobestand ze moeten kiezen, hoe ze de titel moeten schrijven en hoe ze de contactknop moeten opmaken? Onbegrijpelijke regels moeten worden vereenvoudigd of ondersteund met voorbeelden.

Demonstreer correct gebruik in plaats van alleen maar een lijst met verboden op te stellen. U kunt goedgekeurde voorbeelden van een projectkaart, dienstenbeschrijving en formulierbericht indienen. Op deze manier hoeft het team niet voor elk nieuw stukje content aparte beslissingen van de ontwerper te vragen. De gids helpt direct bij de dagelijkse productie.

Bewaar de huidige versie van bestanden op één plek. Om te voorkomen dat u oude logo's gebruikt, moet u duidelijk aangeven welke geldig zijn. Wanneer kleur of typografie verandert, moet worden bepaald op welke pagina's deze beslissing wordt toegepast. Er moet een link worden gelegd tussen het bijwerken van de handleiding en het bijwerken van de site.

Een voorbeeld van een kleine merkaudit

Stel dat een bedrijf formeel schrijft op de homepage, overdreven beloften doet in de blog en technische foutmeldingen toont in het formulier. Het probleem is niet alleen visueel. De eerste taak kan zijn om te onderzoeken of de boodschap op deze drie contactpunten dezelfde dienstverleningsaanpak weerspiegelt.

Vervolgens worden gemeenschappelijke taalvoorbeelden voorbereid. De servicekop wordt specifieker, niet-ondersteunde beloften worden van de blog verwijderd en in formulierfouten wordt uitgelegd hoe u het probleem kunt oplossen. Visueel kunnen inconsistente versies van dezelfde knop over de pagina's heen op één lijn worden gebracht. Deze wijzigingen kunnen de ervaring consistenter maken zonder dat een nieuw logo nodig is.

Voer de laatste controle uit op de echte taak. Als de bezoeker de dienst leest en naar het betreffende artikel gaat, ziet hij dan dezelfde zakelijke aanpak? Blijft de toon van het bericht consistent als u het formulier invult? Doorloop meerdere pagina's achter elkaar om de samenhang te beoordelen. Eén schermafbeelding laat niet zien hoe de onderdelen in het gebruik op elkaar aansluiten.

Deze review-aanpak kunt u ook gebruiken in nieuwe campagnes. De campagne mag dan wel een geheel eigen uitstraling hebben, de bedrijfsinformatie en kernbeloften mogen niet met elkaar conflicteren. Leg vast welke onderdelen mogen variëren en welke huisstijlregels altijd gelden. Zo blijft er ruimte voor creativiteit zonder de herkenbaarheid te verliezen.

Bepaal ten slotte wie de handleiding gaat bijwerken. Wanneer er een nieuwe dienst of een nieuw inhoudstype arriveert, kan de geschiktheid van bestaande regels opnieuw worden geëvalueerd. In plaats van elke wijziging als een afzonderlijke uitzondering te laten, voegt u de betreffende wijziging toe aan het algemene systeem. Zo verandert de gids na verloop van tijd niet in een ongebruikt bestand. Vragen uit de dagelijkse productie laten zien waar het ontwerpsysteem meer expliciete voorbeelden nodig heeft.

Zet de identiteit om in praktische regels

Selecteer eerst de meest gebruikte pagina's en materialen. Stel gemeenschappelijke regels op voor deze voorbeelden en pas deze vervolgens toe op andere gebieden. Merkidentiteit is dus niet langer een ontwerp dat alleen in het presentatiebestand achterblijft.

U kunt de dienst voor merkidentiteit en de webdesignaanpak van Pixel onderzoeken. U kunt de omvang van het werk bespreken door uw bestaande bestanden en de voorbeelden die u inconsistent vindt, met ons te delen.

• Merkidentiteit bij Pixel
• Webdesign bij Pixel
• Neem contact op met Pixel