Hoe een ontwerp
tot stand komt

Alles wat op een website staat is een bewering. Een bezoeker die twijfelt, controleert er een. Klopt die niet, dan gaat hij aan de rest ook twijfelen.

Daarom begint het werk niet bij kleur of vorm, maar bij een lijst: wat is er precies waar over dit bedrijf. Drie soorten beweringen gaan het vaakst mis.

• Cijfers. Oprichtingsjaar, aantal medewerkers, productie per dag, aantal afnemers. Ze klinken onschuldig en worden zelden nagerekend door degene die ze opschrijft.
• Keurmerken en certificaten. Een keurmerklogo is eigendom van de keurmerkhouder. Het voeren zonder geldig certificaat is misleidend, en het kan je het recht kosten om het later wel te gebruiken.
• Namen en logo's van klanten. Die mag je pas tonen als die klant daar schriftelijk toestemming voor heeft gegeven.

Wat het kost als het niet klopt: een inkoper die een certificaatnummer natrekt en niets vindt, belt niet terug. Bij voedsel kijkt de NVWA mee en vallen misleidende claims onder het consumentenrecht. Maar de gewone schade is zelden een boete. Meestal is het een klant die stil afhaakt en je nooit vertelt waarom.

De werkwijze is daarom simpel: elke bewering krijgt een bron. Een certificaat, een uittreksel, een e-mail van jou waarin staat dat het klopt. Geen bron betekent niet dat er iets voorzichtigers wordt opgeschreven, het betekent dat de zin er niet in komt. Een lege plek is te vullen zodra de bron er is. Een verkeerd cijfer is niet terug te draaien zodra iemand het gelezen heeft.

Op deze proefpagina staan om dezelfde reden geen aantallen, jaartallen, keurmerken of klantnamen. Er is nog niets van geverifieerd, dus staat er niets.

Voordat er een regel code is, ligt er een blad met de ontwerpafspraak. Eén pagina, hooguit twee. Daar staat op wat er gebouwd wordt en waarmee.

• De kleuren, met hun hexcode. Niet “warm bruin”, maar #15110E voor panelen en #C9A227 voor knoppen. Een naam is een mening, een code is een afspraak.
• De lettertypes, met hun rol. Welke de koppen doet, welke de lopende tekst, en welke gewichten er gebruikt worden.
• De maatladder. De vaste reeks tekstgroottes en de vaste reeks afstanden, met bij elke maat waar hij voor dient.
• De onderdelen. Welke soorten blokken er zijn: kaart, tabel, formulier, uitgelicht blok, en hoe die eruitzien.
• Wat er expliciet niet gebouwd wordt.

Die laatste regel is de nuttigste van het blad. Zonder lijst van wat er niet komt, groeit een project stil: er komt een carrousel bij omdat het kan, een popup omdat iemand het ergens zag, een chatvenster omdat het gratis is. Elk onderdeel is apart te verdedigen. Bij elkaar leveren ze een pagina op die traag laadt en waar niets meer opvalt.

Waarom dat eerst wordt goedgekeurd: een kleur wijzigen kost tien minuten. Een structuur wijzigen kost de bouw opnieuw. Zie je pas bij de oplevering dat de opzet niet is wat je voor ogen had, dan is er twee weken de verkeerde kant op gebouwd, en die twee weken zitten in de rekening.

Afwijken van de afspraak mag. Tijdens het bouwen blijkt soms dat iets in het echt niet werkt. Dan wordt het blad bijgewerkt en zie jij wat er verandert. Wat niet gebeurt, is stilzwijgend iets anders doen dan er staat.

Een palet wordt niet bedacht, het wordt opgezocht. Meestal ligt het er al.

Er zijn drie plekken waar het vandaan komt. Een bestaande huisstijl of logo, want die kleuren staan al op je bus en je facturen. De verpakking, want die ligt al in de winkel en staat al op de foto's. En het product zelf. Bij gebakken deeg zit alles er al in: het lichte deeg, de donkere plooi in de schaduw, het goud van de plekken die de plaat hebben geraakt. Kleuren die uit het materiaal komen, hoeven niet uitgelegd te worden.

Hoeveel kleuren je nodig hebt: vijf. Een achtergrond, een iets lichter vlak voor panelen, een tekstkleur, een zachtere tekstkleur voor bijzaken, en een accent voor knoppen en links. Meer kleuren betekent meer beslissingen per onderdeel, en dan gaat een site er per pagina net iets anders uitzien zonder dat iemand kan aanwijzen waarom.

Wat 4,5:1 betekent

Contrast is de verhouding tussen hoeveel licht de letters afgeven en hoeveel de achtergrond eronder afgeeft. 1:1 betekent dat ze precies even licht zijn: de tekst is dan onzichtbaar, ook als de kleuren verschillen. Zwart op wit is 21:1. De ondergrens voor gewone tekst is 4,5:1. Dat is het punt waarop iemand met een gemiddeld ouder wordend oog, op een telefoon, buiten in de zon, de tekst nog vlot leest. Vanaf ongeveer 24 pixels, of 19 pixels vet, mag het 3:1 zijn: grote letters hebben minder contrast nodig.

Waarom op de pixels en niet op de code

In de stylesheet staat één kleur, maar wat het oog krijgt is iets anders zodra er iets tussen zit. Een doorzichtigheid van 70 procent, een verloop, een foto onder de tekst, een schaduw, een half doorzichtig paneel over een achtergrond: allemaal veranderen ze de kleur die uiteindelijk op het scherm komt. De code zegt dan #C9BFAF terwijl de pixel iets heel anders is. Dus: schermafdruk maken, de kleur uitlezen van de pixel midden in een letter, de kleur uitlezen van de pixel er vlak naast, en met die twee echte waarden rekenen.

De onderste twee tinten schelen nauwelijks iets. Naast elkaar op een scherm is het verschil bijna niet te zien, en toch zakt de een onder de grens en blijft de ander erboven. Daarom wordt het gerekend en niet bekeken.

Twee lettertypes, een vaste reeks maten, en koppen die met de maat ook strakker worden.

Waarom hooguit twee: elk lettertype is een bestand dat de bezoeker moet ophalen voordat de tekst leesbaar is, en elk lettertype is een extra stem. Twee is genoeg. Eén voor de koppen, één voor alles wat je echt leest. Wie een derde toevoegt wil meestal iets benadrukken, en dat kan ook met een ander gewicht, met hoofdletters of met meer ruimte eromheen. Dat kost geen laadtijd.

De maatladder

Een maatladder is de vaste reeks tekstgroottes die op de site voorkomen, met bij elke maat vastgelegd waar hij voor is. Zonder ladder krijgt elke tekst zijn eigen maat en ziet een pagina er per ongeluk anders uit in plaats van bewust. De stappen moeten groot genoeg zijn om als verschil te lezen: 17 naast 18 pixels leest als een slordigheid, 17 naast 24 leest als een keuze.

Regellengte

Tussen de 55 en 75 tekens per regel, spaties meegeteld. Is een regel langer, dan verliest het oog bij het terugspringen soms de juiste volgende regel; dat merk je niet als leesfout maar als vermoeidheid. Is hij veel korter, dan spring je zo vaak terug dat het ritme weg is. Op een scherm van 1440 pixels betekent dat: de tekstkolom begrenzen, ook al is er ruimte over. De lege ruimte ernaast is niet ongebruikt, die is de reden dat het leest.

Waarom een kop ook strakker moet

Kleine tekst heeft lucht nodig tussen de regels en tussen de letters, anders lopen de vormen dicht. Bij grote tekst wordt diezelfde lucht een gat. Een kop van 60 pixels met de regelhoogte van lopende tekst valt uit elkaar in losse regels die niet bij elkaar lijken te horen. Daarom gaat bij elke stap omhoog de regelhoogte omlaag, van 1,65 naar 1,05, en schuift de letterafstand iets naar negatief. Dat is het verschil tussen een kop en gewone tekst die per ongeluk groot staat.

Het smalle scherm eerst, ruimte uit een vaste reeks, en de inhoud die bepaalt hoeveel kolommen er zijn.

Mobile-first betekent dat de opzet eerst wordt gemaakt voor een scherm van 360 pixels breed, en daarna wordt uitgebreid. Dat is de omgekeerde volgorde van wat vanzelf gaat, en precies daarom werkt het: op 360 pixels past niet alles, dus je moet kiezen wat het belangrijkst is. Wat op die breedte werkt, is op een groot scherm uit te breiden. Andersom moet je slopen, en dan wordt de telefoonversie een uitgeklede rest van het echte ontwerp.

Witruimte is het goedkoopste ordeningsmiddel

Ruimte is het enige middel dat zonder lijnen, kaders of kleuren vertelt wat bij elkaar hoort. Een kop die dicht op zijn eigen tekst staat en ver van de vorige alinea, leest als een groep; daar is geen streep voor nodig. Staat alles even ver uit elkaar, dan moet de bezoeker zelf uitzoeken waar een onderwerp begint. Ruimte weghalen om meer boven de vouw te krijgen levert een pagina op waar alles even belangrijk lijkt, en dus niets.

Ook afstanden komen uit een reeks, bijvoorbeeld 4, 8, 16, 24, 48 en 96 pixels, elk met een vaste betekenis: 8 tussen twee regels van hetzelfde blok, 24 tussen kaarten, 96 tussen secties. Worden afstanden per geval gekozen, dan ziet een pagina er rommelig uit zonder dat iemand kan aanwijzen waardoor.

Drie gelijke kolommen

Die zie je overal, en meestal zijn ze de luie keuze: drie is het aantal dat toevallig past, niet het aantal dat de inhoud heeft. Wat er dan misgaat:

• Je hebt vier dingen te vertellen, dus hangt er een los op een tweede rij. Vaak wordt er dan een vijfde bij verzonnen om het gat te vullen.
• De inhoud is ongelijk. Het ene blok heeft twee zinnen nodig, het andere acht, maar de bakjes zijn even groot, dus wordt er tekst bij geschreven of weggelaten om de vorm te dienen.
• Alles krijgt evenveel gewicht. Wat het belangrijkst is valt niet meer op, want het staat er net zo bij als de rest.

Het alternatief is niet ingewikkelder. Twee kolommen van ongeveer 60 en 40 procent als het ene deel meer uitleg nodig heeft. Een gewone lijst als de items alleen opgesomd worden. Eén breed blok met twee smalle eronder als er duidelijk één hoofdzaak is.

Een scherm is niet één plaatje. Het zijn er zeven, en zes daarvan worden zelden getekend.

De uitgeschakelde knop hierboven staat op 4,96:1 en niet lager. Grijzen tot het onleesbaar is, is gemakzucht: iemand moet nog kunnen lezen wat hij niet mag.

Wat er gebeurt als deze zeven niet getekend zijn: de bouwer verzint ze ter plekke. Dan krijg je een leeg scherm dat werkelijk leeg is, een foutmelding die alleen zegt dat er iets is misgegaan, en een verzendknop die twee keer werkt. Daar gaan de meeste klachten na oplevering over, niet over de kleur.

Beweging mag iets uitleggen. Zodra ze alleen versiert, kost ze aandacht zonder er iets voor terug te geven.

Beweging draagt betekenis als ze een verband laat zien:

• Waar iets vandaan komt. Een paneel dat opengaat vanuit de knop die je net indrukte, zodat je weet wat er gebeurde en waar je terugkomt.
• Dat er iets bij is gekomen of weg is. Een regel die de lijst in schuift is duidelijker dan een lijst die ineens anders is.
• Hoe ver je bent. Een balk die vult tijdens het versturen van een bestand.
• Dat iets reageert. Een knop die een fractie indeukt onder de vinger of de muis, zodat je weet dat de aanraking is aangekomen.

Beweging leidt af zodra ze niets uitlegt: tekst die bij elke scroll komt invliegen, getallen die naar hun eindwaarde oplopen, achtergronden die blijven schuiven terwijl je leest. Het oog wordt naar beweging getrokken; dat is een middel dat je één keer per scherm kunt inzetten, niet twintig keer. Wie het overal gebruikt, maakt lezen trager, want elke beweging haalt de aandacht van de zin.

Praktisch: 150 tot 300 milliseconden voor kleine dingen. Alles boven ongeveer 500 milliseconden voelt traag zodra iemand een pagina voor de tweede keer bezoekt. Beweging mag nooit tussen de bezoeker en zijn doel in gaan staan.

De instelling voor minder beweging

In elk besturingssysteem zit een schakelaar om animaties uit te zetten. In Windows onder Toegankelijkheid, Visuele effecten, Animatie-effecten. In macOS en iOS onder Toegankelijkheid, Beeldscherm, Beperk beweging. In Android onder Toegankelijkheid, Animaties verwijderen. De browser geeft die stand door aan de website, dus een site kán zich eraan houden.

Waarom dat hier gebeurt: mensen zetten die schakelaar niet aan uit smaak. Schuivende en zwenkende schermen kunnen misselijkheid, duizeligheid en hoofdpijn geven bij mensen met een gevoelig evenwichtsorgaan, en die klachten zijn soms uren later nog niet weg. Wie de instelling aan heeft staan, heeft daar een reden voor.

Wat het betekent voor de bouw: bij die stand staat alles stil. Niet de animatie sneller afspelen, en vooral niet de inhoud onzichtbaar laten omdat de beweging die haar zichtbaar zou maken is uitgezet. Dat laatste is de meest gemaakte fout op sites die het wél proberen: de tekst staat op onzichtbaar te wachten op iets wat nooit komt. Dezelfde eis geldt zonder JavaScript. Alles moet leesbaar en bruikbaar blijven, alleen dan zonder de beweging.

Elke bewering op deze pagina is te controleren, en wordt gecontroleerd. In een echte browser, op de echte pagina, op een scherm van 360 pixels en op een van 1440.

Niet in het ontwerpprogramma, want daar is tekst geen tekst en kleur geen pixel. Niet op gevoel, want gevoel meet niet mee dat een scherm anders is afgesteld of dat er zon op valt.

Wat er gebeurt als de meting de bewering tegenspreekt: de bewering gaat eruit. Niet de meting bijstellen, niet zeggen dat het op mijn scherm goed genoeg oogt, en geen uitzondering maken omdat iets toevallig mooi is. Er zijn twee uitkomsten. Het wordt gerepareerd en opnieuw gemeten, of het onderdeel en de zin die erover ging verdwijnen allebei.

Het voorbeeld staat hierboven al in de kleurtabel. Een tint van #9A9186 op #3A342C zag er prima uit en haalde 3,96:1. Die is vervangen door #ADA398, dat 4,96:1 haalt. Het verschil is met het blote oog nauwelijks te zien, en toch ligt de grens er precies tussen.

De lijst voor jou is kort, maar zonder die dingen kan het niet beginnen. De rest is werk dat je niet hoeft te doen.

Wat hier niet kan, is het eerste blok: de feiten. Niemand hier kan weten wanneer je bent begonnen, welk certificaat geldig is of welke afnemer met naam genoemd mag worden. Dat is het enige dat echt van jou moet komen.