Waarom zou je dan ook nog lezen over álle regels die je op het gebied van webdesign moet volgen? Juist met een blank canvas voor je wil jij eens even je creativiteit botvieren op je volgende ontwerp – even alle regels laten varen.

Nou, al deze regels maken je leven juist een beetje makkelijker en je designs sowieso een stuk beter. Het zijn de simpele richtlijnen die je kunt volgen om een stevige basis neer te zetten, waarna jij lekker kunt doen wat je wilt.

Elementen

Tips met betrekking tot de plaatsing en vorm van elementen.

Ontwerp elk element met opzet

Als webdesigner maak je digitale gebruiksvoorwerpen; mensen gaan wat jij ontwerpt elke dag gebruiken. Daarom is het belangrijk om doelgericht te werken en over elk element in je ontwerp na te denken. Van witruimte tot buttons, van tekstgrootte tot kleurgebruik – alles moet met een reden worden gedaan.

Dit klinkt alsof het je werk ingewikkelder maakt, maar dat is niet het geval. Want wanneer je klant aanklopt met veertien kantjes feedback, kun jij altijd aangeven dat je weloverwogen te werk bent gegaan. Plots gaat feedback niet meer over smaak, maar over functie.

Lijn elk object in je ontwerp uit met ten minste één ander object.

Uitlijning van elementen geeft rust aan een ontwerp. In kunst kan het opzettelijk breken met de uitlijning een onderdeel zijn van het verhaal, maar bij webdesign kan dit het product breken. Net zoals jij niet zou willen dat een ontwerper willekeurig knoppen op je dashboard plaatst, verwachten je gebruikers ook dat elk object in je ontwerp is uitgelijnd. Dit zorgt voor overzicht en verbetert de functionaliteit.

Plaats alle objecten op een logische afstand van elkaar.

Deze regel maakt zowel jouw leven makkelijker als je ontwerpen beter. Als je twee knoppen 8px van elkaar plaatst, zet ze dan niet 75px van een ander element af. Meet je afstanden altijd in meervouden van 8px, in dit voorbeeld dus 64px of 72px. Zo krijgt alles in je ontwerp een onderliggende structuur die de gebruiker misschien niet ziet, maar die zeker opvalt.

Plaats elementen in volgorde van hun visuele gewicht.

Elementen hebben een visueel gewicht. Een volledig gekleurd blok voelt zwaarder dan een blok met alleen een lijn eromheen. Plaats vervolgens de elementen in volgorde van hun gewicht, waarbij het zwaarste element eerst komt. Staal zet je ook niet bovenop glas, toch?

Gebruik bij oneven vormen optische uitlijning.

Oneven vormen automatisch uitlijnen werkt bijna nooit goed; het visuele zwaartepunt van dat soort elementen zit niet in het midden. Als je jouw computer zo'n element wel in het midden laat uitlijnen, zul je zien dat het niet voelt alsof het daadwerkelijk goed gecentreerd is. Centreer oneven vormen dan ook altijd op het oog.

Gebruik voor een horizontale grid altijd 12 kolommen.

Heb je ooit overwogen om een andere manier te bedenken om je veters te strikken? Nee, waarom zou je? Je doet het al je hele leven op dezelfde manier omdat het de beste manier is. Zo hebben ook duizenden ontwerpers honderden verschillende mogelijkheden geprobeerd voor horizontale grids. Het resultaat? 12 kolommen zijn de beste optie. Twijfel er niet aan en maak het jezelf eens een keer makkelijk - het mag!

Zet simpele elementen op een complexe achtergrond of andersom.

Oké, de nostalgie van het vroege internet trekt soms ook aan mij. Word Art op bewegende achtergronden was magisch – maar bruikbaar? Ondertussen weten we beter. De vogelvrije dagen van het internet rond Y2K zijn voorbij. Tegenwoordig ontwerpen we producten die voor duizenden, zo niet miljoenen mensen moeten werken. Help ze een handje door deze simpele regel te volgen.

Maak de padding groter aan de buitenkant dan aan de binnenkant van een element.

Waar de meeste regels op deze lijst in de laatste twintig jaar zijn ontstaan, is deze regel al millennia oud. Zelfs de monniken die dagelijks met de hand Bijbels overschreven, wisten al dat je de kolommen op een pagina meer afstand van de paginarand moest geven dan van elkaar. Dat werkt gewoon, vraag het maar aan de monniken.

Maak de padding aan de zijkant van buttons twee keer zo groot als boven en onder.

Klik jij vaker op digitale buttons of echte knoppen? Denk daar maar over na. We spenderen zoveel tijd op het internet dat digitale buttons best wel eens kunnen winnen. Daarom hebben buttons inmiddels ook hun beste vorm gevonden, zoals Charmander die is geëvolueerd in Charizard. Ook hier geldt: waarom het wiel opnieuw uitvinden als we weten wat werkt?

Stem de afgeronde hoeken van blokken op elkaar af.

Als je twee blokken hebt die in elkaar passen en ze hebben allebei afgeronde hoeken, gebruik dan de afstand tussen de hoeken om te bepalen hoeveel pixels het binnenste element moet worden afgerond. Als het buitenste blok afgeronde hoeken van 20px heeft en het binnenste element staat er 10px vanaf, dan moet de afgeronde hoek van het kleinere element 10px zijn. Als je dit doet, is alles goed in deze wereld. Zo niet, dan kom ik je opzoeken.

Kleur

Regels over kleurgebruik.

Zorg voor hoog contrast in belangrijke elementen.

Zonder contrast zakt al je content weg in een veld van middelmatigheid. Zorg dat je ontwerp spreekt door belangrijke elementen te onderscheiden met hoog contrast. Onze ogen zijn van nature gewend om hoog contrast te onderscheiden; strakke scheidslijnen helpen ons om de wereld (en jouw website) sneller te begrijpen.

Gebruik nooit twee harde scheidingslijnen na elkaar.

Een scheidingslijn in je ontwerp is als het omslaan van een pagina in een boek. Twee scheidingslijnen dicht na elkaar zijn als een boek met een volle pagina informatie die je omslaat om vervolgens een lege pagina te vinden, waarna je nóg een pagina moet omslaan. Het is vreemd en brengt je ontwerp uit balans; beter vermijden.

Gebruik een licht-verzadigde tint van je kleur voor witruimte.

Wil je een simpele manier om meer eenheid in je ontwerp te krijgen? Denk dan eens aan hoe je jezelf kleedt: als de kleur van je shirt ook terugkomt in je sokken, voelt je outfit meer compleet. Als je wit in je ontwerp vervangt door een licht-verzadigde tint van je hoofdkleur, krijg je hetzelfde effect. Hoewel veel gebruikers het misschien niet eens kunnen aanwijzen, zal je website meer als een geheel voelen.

Gebruik nooit zowel warme als koude kleuren als licht-verzadigde tinten.

Het kan zijn dat jouw kleurenpalet zowel warme als koude kleuren bevat. Het is jouw kleurenpalet, dus doe wat je wilt! Zorg er alleen in dat geval voor dat je niet van beide kleuren een licht-verzadigde tint in je ontwerp gebruikt en kies een hoofdkleur: warm of koud? Als je beide gebruikt, vloekt het en je weet wat je moeder zegt: dat mag niet.

Gebruik een kleurenpalet met verschillende helderheidswaarden.

Wanneer alle kleuren in je ontwerp dezelfde helderheidswaarde hebben, is het lastiger om iets eruit te laten springen. Juist helderheid kan de aandacht van je gebruiker vragen. Als je bezig bent met het kleurenpalet, zorg dan voor verschil in de helderheidswaarden. Dit kun je makkelijk doen door gebruik te maken van HSB-kleurcodes, omdat deze gebruikmaken van 'brightness'.

Gebruik voor de rand van een element een kleur die ook contrasteert met de achtergrond.

Het doel van het plaatsen van een element op de achtergrond is het aanbrengen van visuele hiërarchie. Je leidt de ogen van je gebruiker door de content en wilt dat zo goed mogelijk doen. Door de randen om je elementen te laten contrasteren met zowel het element als de achtergrond, creëer je meer 'afstand' tussen beide.

Maak elementen die voorop staan lichter.

Hoewel elementen op je scherm helemaal niet aan natuurwetten hoeven te voldoen, werkt dat in webdesign vaak wel het beste. In het echt worden elementen die verder van een lichtbron afstaan donkerder. Zorg in je design daarom dat als je het gevoel van diepte wilt creëren met verschillende elementen, alles wat 'dichterbij' je gebruiker staat lichter wordt.

Maak de blur van een slagschaduw twee keer zo groot als de afstand.

Hier is hetzelfde principe als bij het vorige punt van toepassing: gewoon doen wat de natuur doet. Hoewel je lekker met de knoppen van de slagschaduw kunt spelen tot je een ons weegt, is er een simpele best practice: maak de blur twee keer zo groot als de afstand. Dat geeft het meest natuurlijke effect en werkt prettig voor het oog.

Lettertypes

Tips voor al je teksten.

Verklein de letter-spacing en line-height bij grote tekst

Hier zijn weer een paar eeuwenoude tips over de prachtige kunst van typografie. Als je grote tekst gebruikt op je website, verklein dan de letter-spacing en line-height. Het kleine beetje ruimte tussen de regels op 16px is als de Grand Canyon op 72px. Probeer ook hier de afstanden logisch te houden.

Maak de bodytekst altijd groter dan 16px

Niemand leest kleine regeltjes. Niet op een contract en ook niet op je website. Online is tekst pas goed leesbaar vanaf 16px, dus duik daar nooit onder. En ga niet zomaar blindelings al je teksten nu 16px maken, want elk font is anders. Sommige fonts zijn pas bruikbaar vanaf 16px, dus bekijk wat werkt voor jouw website, font en publiek.

Gebruik een regellengte van ongeveer 70 karakters

Te lange regellengtes gebruiken is als gedwongen worden om tijdens een feestje naar die ene oom te luisteren die graag over zijn hypotheken praat. Na een tijdje raak je de draad gewoon kwijt. Zorg dat je publiek de teksten op je website kan lezen door regellengtes van maximaal zo’n 70 karakters aan te houden.

Gebruik maximaal twee lettertypes

Er zijn zoveel lettertypes, waarom zou je jezelf beperken tot slechts twee? Elk element kan gemakkelijk zijn eigen lettertype krijgen! Hee, ‘you do you’, zoals de Engelsen zeggen. Maar klaag dan niet als mensen nog geen halve seconde op je website blijven. Gebruikers zijn voor websites met maximaal twee lettertypes, zo werkt het nou eenmaal.