Wat een ontwerp nog niet weet
Een ontwerp in Figma heeft één breedte, en op die breedte klopt alles. Een pagina heeft er duizend, en daar komen er ook een aantal dingen bij waarvan het ontwerp het antwoord niet bevat.
De tekst valt langer uit dan je hem hebt ontworpen
Een productnaam van veertig tekens, een Duitse vertaling van een Nederlandse knop, of een bezoeker die zijn lettergrootte heeft vergroot omdat hij anders niets ziet.
De toestanden die niemand ontwerpt
Een overzicht dat nog leeg is, een formulier met drie foutmeldingen tegelijk, een afbeelding die niet laadt.
Beweging
Alles wat na het laden verschijnt duwt de rest van de pagina omlaag. Op een telefoon voelt dat als haperen, ook als de laadtijd prima is.
Dit zijn geen bouwproblemen die je aan het eind oplost. Het zijn ontwerpvragen die pas in de browser zichtbaar worden. Wie ontwerpt en bouwt komt ze tegen terwijl het ontwerp nog openligt, en dat is het enige moment waarop ze nog goedkoop zijn. Over dat laatste punt schreef ik een artikel met demo's: waarom je site traag voelt.
Ontwerpen gaat over wat er gebeurt
Vormgeving is het laatste deel van een ontwerp en niet het eerste. Het begint bij de doelgroep, wat die voor elkaar wil krijgen en wat daarbij in de weg staat. Pas als dat helder is, gaat het over kleur en typografie.
Toegankelijkheid en gebruiksvriendelijkheid horen in die fase thuis, want het zijn ontwerpbeslissingen. Een contrast dat hoog genoeg is, een knop die groot genoeg is om te raken, een label boven het veld in plaats van erin. Bepaal je dat in het ontwerp, dan hoeft er in de code niets gerepareerd te worden.
Bouwen begint bij de markup
Ik schrijf eerst de HTML, en die moet overeind blijven als er geen CSS en geen JavaScript is. Wat je dan overhoudt is een leesbare pagina met koppen, alinea's en links, en dat is meteen wat een screenreader en een zoekmachine te zien krijgen. Daarna komt de CSS erop en daarna pas de JavaScript.
Deze site doet dat zelf ook. Ondersteunt je browser de moderne CSS niet, dan krijg je de basisvormgeving en werkt alles nog. En wat ik oplever loop ik na met een toetsenbord en met een screenreader, want dat is te controleren en een aanname niet.
En frameworks?
Ik schrijf CSS en JavaScript met de hand. React, Vue en Angular gebruik ik niet dagelijks, en het opzetten en bijhouden van zo'n applicatie doe ik niet. Ik heb er wel in gewerkt, onder andere aan een Next.js-site bij Perfect Web Team, en ik lever HTML/CSS aan die erin past.
Het werk dat ik doe zit onder het framework: de markup, de CSS, de interactie, en of iemand met een toetsenbord verder komt. Dat is in elk van die frameworks hetzelfde vak, en het is het deel dat een bezoeker daadwerkelijk merkt.
Waar je het aan kunt zien
Ik vind het makkelijker om iets te laten zien dan om het te beweren, dus heb ik wat demo's gemaakt. In waarom je site traag voelt staan zes redenen met demo's die je zelf kunt proberen. Onder tools staan de dingen die ik in mijn eigen werk miste en daarom heb gebouwd en weggegeven. En in het portfolio staat het werk dat ik met en voor anderen heb gemaakt.
Wat ik voor opdrachtgevers doe en wat ik beter aan iemand anders overlaat, staat op de dienstenpagina.