Zo lever je als grafisch ontwerper de perfecte huisstijl aan voor een website

9
minuten

Webdesign en grafisch design zijn twee totaal verschillende vakgebieden. Een goede grafisch ontwerper heeft lang niet altijd de technische skills in huis om een goede website in elkaar te zetten, en een webbouwer heeft ook lang niet altijd de skills om een mooi logo en een huisstijl te ontwerpen. Als webdesigner werk ik dan ook het liefst met een huisstijl die is ontworpen en aangeleverd door een goede grafisch ontwerper, waar over is nagedacht, en die perfect aansluit bij de missie en visie van degene voor wie de website is. Zo kan ik goede keuzes maken bij het ontwerpen van de stijlmockups voor de website, die goed aansluiten bij de rest van de huisstijluitingen van een organisatie, bijvoorbeeld wat ze aan drukwerk hebben, hun social media posts, etc. Hoe uitgebreider hoe beter! Wat zie ik graag in een huisstijl? In deze blogpost geef ik de musthaves en de nice-to-haves.

Een website vraagt om een ander perspectief dan print. Een website moet er niet alleen mooi uitzien, maar dat uiterlijk moet ook in dienst staan van de functionaliteit, goed werken op een scherm, toegankelijk zijn wat betreft bijvoorbeeld contrast, de bestanden moeten in het juiste formaat worden aangeleverd, het moet op desktop én mobiel werken, etc.

Wat ik krijg aangeleverd als huisstijl verschilt van project tot project. De ene keer is dat super uitgebreid: verschillende vorm- en kleurvarianten van het logo, een favicon, een kleurenpalet waarin duidelijk is aangegeven welke kleuren wel en niet met elkaar gecombineerd mogen worden, font files die ik zó kan uploaden en gebruiken, custom iconen… Een feestje om mee te werken. De andere keer zijn het twee accentkleuren, alleen de naam van een font, en één logovariant. Dat is zo minimaal dat ik zelf nog een halve huisstijl erbij moet gaan verzinnen. Not my job, in principe. Maar ik doe het vaker wel dan niet, omdat er bijvoorbeeld geen geschikte achtergrondkleur is aangeleverd, of geen fonts.

Waar word ik als duurzaam webdesigner dan gelukkig van? Gebruik onderstaande checklist als grafisch designer, of stuur hem door naar degene die jouw huisstijl ontwerpt!

The bare minimum

Logo, favicon, kleuren en fonts zijn echt de essentials om aan te leveren. Zo heb ik handvatten om goede stijlmockups te maken voor de website, in plaats van dat ik eerst de helft nog moet gaan zitten verzinnen. Ik kan het wel hoor, maar het is niet mijn main job, en het is zonde als ik extra uren hiervoor moet rekenen.

Logo & favicon

Van een logo is het belangrijk dat je meerdere vormen aanlevert: één in landscape formaat voor in de header, en een vierkante voor het favicon. Lever ze aan als SVG vectorbestand, met een transparante achtergrond en zonder padding en marge. Die bepaalt de webdesigner op basis van de context waarin het logo geplaatst wordt. Niets zo irritant als een logo wat je niet mooi kunt uitlijnen met andere elementen, omdat het bestand zelf al padding bevat. Mijn primaire logo hierboven is zonder padding, mijn favicon niet. Voor een favicon is het ook iets minder dramatisch als er wat loze padding omheen zit.

Kleuren

Zorg dat de kleuren niet een willekeurige leuke kleurencombinatie zijn (hoe mooi die ook is), maar denk na over de functie van de kleuren. Vaak wordt er een leuk kleurenschema gegeven wat prima bruikbaar is als accentkleuren, maar een net-niet-zwart voor tekst of een net-niet-wit als achtergrondkleur wordt vaak vergeten. Terwijl dat wel heel veel verschil kan maken in de persoonlijkheid van een site.

Daarnaast is het fijn om een groepje van 3-4 basistinten te hebben, verschillende gradaties licht naar donker van dezelfde kleur. En om het af te maken 1-2 accentkleuren die goed contrasteren met dat basispalet.

Het minimale waar ik ooit mee heb moeten werken is 2 accentkleuren, en de aanname dat de achtergrond wit moest zijn. Hier heb ik voor alle kleuren een tabelletje gemaakt met relevante lichtere en donkere gradaties, zodat ik meer had om mee te werken dan 2 kleuren + zwart + wit. Daar had de grafisch ontwerper echt wel wat meer mogen leveren.

Zelf heb ik 9 huisstijlkleuren: 3 verschillende voor een groene basis, 3 verschillende voor een blauwe basis, 2 accentkleuren en een bijna-wit voor de achtergrond.

Fonts

Specificeer fonts voor de headers en voor de body tekst. Dit kunnen ook prima verschillende diktes van hetzelfde font zijn. Zelf ben ik groot fan van variabele fonts, omdat je daar kunt spelen met de dikte, wat prettig is in het kader van leesbaarheid en toegankelijkheid. Misschien is de variant “light” wel leuk voor drukwerk, maar te slecht leesbaar op een beeldscherm.

  • Wanneer je Google Fonts specificeert, stuur dan even een linkje mee;
  • Wanneer je gratis fonts gebruikt (check of er sprake is van een CC-0 licentie), stuur dan de font bestanden mee;
  • Wanneer je wilt dat er Adobe fonts gebruikt worden, zorg dan voor een licentie voor web en stuur de font bestanden mee (nee, géén Adobe linkjes, echt de bestanden);
  • Anything else: Zorg dat je een geldige licentie hebt voor webgebruik, en stuur de bestanden mee.

Nice to have

De onderstaande dingen zijn bonus – leuk als ze worden gespecificeerd, maar als ze niet worden meegeleverd in het huisstijldocument, dan laat ik mijn eigen creativiteit de vrije loop bij het maken van de stijlmockups voor de website. Vuistregel: Hoe duidelijker en uitgebreider een huisstijl is gespecificeerd, hoe minder tijd ik nodig heb voor website stijlmockups, en hoe minder dat de klant kost.

Kleurcombinaties

Soms bestaat een huisstijl uit wat meer kleuren, maar combineren ze niet allemaal goed met elkaar. Nou heb ik daar zelf wel een prima gevoel voor, maar een grafisch designer die de moeite neemt om dat even vast te leggen krijgt van mij bonuspunten! Bijvoorbeeld als je groen en rood in je huisstijl hebt, en dat in het brandbook staat dat je groen en rood niet direct op elkaar moet gebruiken, maar bijvoorbeeld alleen groen op wit of rood op wit. Of dat koppen altijd een gearceerde achtergrond hebben. Dit kan echt ontzettend veel uitmaken!

Lijnen, hoeken, schaduwen

Dikte van lijnen, stijl van lijnen, afronding van hoeken en stijl van schaduwen is ook iets wat heel fijn is als de grafisch ontwerper daar al een beetje een sturing aan geeft. Of je dikke of dunne lijnen gebruikt op een website maakt nogal uit voor het karakter! Rechte of afgeronde hoekjes? Doorgetrokken lijnen, onderbroken lijnen, stippellijnen – maakt nogal verschil. Wel of geen schaduw onder sommige elementen? Hoe dik moet die schaduw dan zijn?

Ik heb ooit aan een project gewerkt waar in de huisstijl al was aangegeven dat van de knoppen de hoek rechtsonder een bepaalde afronding moest hebben, wat heel typerend was voor het karakter van de knoppen. I likey!

Voorbeeldknop (doet verder niks lol)

Iconen / illustraties

Ik gebruik vaak iconen op een website om een visueel element toe te voegen aan bepaalde stukken tekst. Bijvoorbeeld een overzicht van aangeboden diensten, met een gerelateerd icoontje bij iedere dienst, zodat je direct een idee hebt waar het over gaat. Om maar iets te noemen. Het is redelijk standaard om hier FontAwesome voor te gebruiken. Bekend, veel gratis iconen.

Maar je geeft een website meer persoonlijkheid met een andere icon library, of met custom iconen of illustraties die perfect aansluiten bij wat jij wilt vertellen op je website. Wanneer ik stijlmockups maak voor een nieuwe webdesignklant, kies ik ook heel bewust vaak voor verschillende stijlen iconen, om te laten zien dat er veel meer mogelijk is. Maar het is natuurlijk veel leuker als een grafisch ontwerper the extra mile gaat en een aantal custom SVG iconen aanlevert, die bijvoorbeeld perfect passen bij het aanbod van de ondernemer in kwestie, of de projecten van een organisatie.

Gradients

Maak je gebruik van gradients en kleurverlopen in je ontwerp? Geef dan ook de CSS code voor de gradiënts, of op zijn minst de kleuren, stops, hoek en of de gradiënt radiaal/lineair is. Dat maakt het leven van de webbouwer een stuk makkelijker. Veel fijner om 100% te doen wat er bedoeld is, dan om te moeten raden naar die waardes.

SVG patronen

Wil je een huisstijl iets extra’s meegeven? Denk dan eens aan SVG patronen. Of ze nou chunky en luid zijn, of subtiel en verfijnd: als achtergrond kunnen ze zoveel persoonlijkheid geven! Soms maak ik ze zelf, als de gelegenheid zich voordoet, maar als ze al intentionally worden aangeleverd in een huisstijl, dan zoek ik graag naar een toffe manier om ze in te zetten op de website, omdat ze zo sprekend en typerend zijn.

Absolute dont’s

Alleen ontwerpen voor print

Sommige dingen werken prima voor print, maar zijn een absolute nachtmerrie voor web. Bijvoorbeeld het rondstrooien van icoontjes en doodles op willekeurige plaatsen. Ziet er misschien leuk uit, maar is een verschrikking om te moeten bouwen. Zeker omdat alles tegenwoordig ook responsive moet zijn voor iedere denkbare schermgrootte en schermverhouding. Of het gros van de elementen schot en scheef zetten. Kan allemaal wel in principe, maar komt clean, duurzaam, duidelijk en toegankelijk webdesign niet ten goede.

Vraag je bij iedere ontwerpkeuze af: Werkt dit ook voor web? Of is het handig om een alternatieve optie voor web mee te geven? Of mag de webdesigner dat bepalen?

Ontwerpen voor functies die slecht ondersteund worden door browsers

Wat je ook absoluut niet moet doen: in je ontwerp dingen stoppen die niet of slecht worden ondersteund door browsers. Zo heb ik een keer meegemaakt dat een grafisch ontwerper had verzonnen dat er een SVG afbeelding met een bepaalde blending modus over achtergronden moest worden gelegd, bijvoorbeeld multiply / screen / burn / etc. Dit wordt niet in alle browsers goed ondersteund en/of correct weergegeven, dus een slecht idee om dit op deze manier te gebruiken. Een webbrowser is geen Photoshop!

Weet je niet zeker of iets wel mogelijk is? Vraag het de webbouwer in kwestie! Geeft een webdesigner aan dat iets wel heel leuk bedacht is, maar niet handig is voor web? Ga in gesprek, zoek alternatieven. Er is vaak meer mogelijk dan je denkt, en van samen sparren met de webdesigner leer je dingen vanuit een heel ander perspectief te bekijken. (En dat geldt trouwens net zo goed voor de webdesigner!)

Op de hoogte blijven van mijn duurzame webtips en filosofische hersenspinsels?
Schrijf je in voor mijn nieuwsbrief 👇🏻

Scroll naar boven