Een onderscheidende website hoeft niet de nieuwste vormtrend te volgen. Hij moet een herkenbaar verhaal vertellen, de juiste informatie zichtbaar maken en prettig te gebruiken zijn. Grote koppen, afgeronde kaarten, verlopen en animaties zijn middelen. Ze worden pas een ontwerp wanneer duidelijk is waarom ze op deze plek iets bijdragen.
Begin bij het beoordelen van een ontwerp met echte tekst en beeld. Daarmee wordt zichtbaar of het een bedrijf vertegenwoordigt of vooral een lege compositie vult. Een fraaie demopagina met perfecte tekstlengtes zegt nog weinig over een website met echte diensten, lange titels en ontbrekende foto’s.
Kies eerst wat het ontwerp moet overbrengen
Beschrijf de gewenste indruk in gewone woorden, gekoppeld aan inhoud. “Persoonlijk” kan betekenen dat bezoekers zien wie hun opdracht uitvoert. “Precies” kan betekenen dat een dienst helder wordt afgebakend en afspraken makkelijk te vinden zijn. “Rustig” kan betekenen dat één hoofdvraag per schermdeel aandacht krijgt.
Gebruik die keuzes om ontwerpen te bespreken. Vraag niet alleen welke versie mooier is, maar waar de bezoeker het aanbod begrijpt, wat hij onthoudt en of hij weet hoe hij verder kan. Zo wordt een ontwerpbespreking specifieker dan een voorkeur voor wit of zwart.
Geef typografie een taak
Een grote kop kan een helder standpunt dragen. Hij wordt minder bruikbaar als een korte slogan zoveel ruimte inneemt dat de dienst onduidelijk blijft. Test koppen met echte woorden, langere bedrijfsnamen en een mobiele breedte. Laat regelafbrekingen de betekenis ondersteunen in plaats van woorden op willekeurige plekken uit elkaar te trekken.
Geef lopende tekst voldoende ruimte en een duidelijke hiërarchie. Maak aanvullende informatie niet zo licht dat ze nauwelijks leesbaar wordt. WCAG 2.2 noemt voor gewone tekst op AA-niveau een minimaal contrast van 4,5:1 en voor grote tekst 3:1, met beschreven uitzonderingen. De precieze definities staan bij W3C over tekstcontrast. Een fraai lettertype neemt die controle niet weg.
Tarieven
Wat kost het?
Het begint bij . Wat jij betaalt hangt af van je situatie.
Laat beelden iets vertellen dat de tekst niet kan
Een foto van de mensen achter een bedrijf kan de toon persoonlijk maken. Een beeld van de werkomgeving geeft context. Een projectscreenshot kan functionaliteit toelichten, mits de inhoud echt is en leesbaar wordt getoond. Gebruik geen namaakschermen als bewijs van gebouwd werk.
Generieke of gegenereerde beelden kunnen een sfeer of abstract onderwerp illustreren. Maak er alleen geen vermeende klant, medewerker of gerealiseerd project van. Vraag bij ieder beeld: wat begrijpt de bezoeker hierdoor beter? Als het antwoord alleen “de lege plek is gevuld” is, kan een eenvoudiger ontwerp sterker zijn.
Een denkvoorbeeld: bij een adviesdienst kan een echte foto van een overleg aansluiten op een uitleg van de aanpak. Bij een softwarefunctie helpt een afgebakende schermuitsnede met een korte toelichting mogelijk meer. Dat is een inhoudelijke keuze, geen universele regel dat fotografie altijd boven illustratie gaat.
Gebruik kaarten en witruimte met een reden
Kaarten zijn handig wanneer bezoekers vergelijkbare onderdelen naast elkaar moeten beoordelen, zoals verschillende diensten met dezelfde kerninformatie. Ze zijn minder vanzelfsprekend voor een verhaal dat juist in een volgorde moet worden gelezen. Een mozaïek van ongelijke vakken kan er spannend uitzien, maar de inhoud onbedoeld even belangrijk maken of de leesrichting verstoren.
Witruimte helpt om onderdelen te scheiden en nadruk te leggen. Het is geen doel op zichzelf. Controleer of belangrijke uitleg niet onnodig ver uit elkaar komt te staan en of de mobiele variant nog steeds samenhang laat zien. Een heldere lijst is soms een betere interface dan zes decoratieve blokken.
Maak beweging ondersteunend en optioneel waar dat kan
Een korte overgang kan laten zien dat een menu opent of een onderdeel van toestand verandert. Doorlopende beweging achter leestekst stelt een andere vraag: kan iemand de inhoud nog rustig gebruiken? Een animatie is geen bewijs van snelheid en maakt de interactie niet automatisch beter.
Respecteer de systeemvoorkeur voor minder beweging. Met prefers-reduced-motion kan een interface niet-essentiële bewegingsanimaties beperken of uitschakelen. W3C beschrijft dit als een techniek om rekening te houden met gebruikers die last kunnen hebben van beweging. Zie de reduced-motion-techniek. Test de rustige variant daadwerkelijk; laat noodzakelijke informatie niet alleen in een animatie bestaan.
Liever even bellen?
Laat je terugbellen
Eén telefoontje is vaak sneller dan drie mailtjes. Je hoort binnen een werkdag van ons.
Ontwerp ook de toestanden die niet in het portfolio staan
Bekijk een lange titel, een leeg zoekresultaat, een formulierfout, een afbeelding die niet laadt en een gebruiker die tekst vergroot. Juist die toestanden laten zien of de vormgeving een systeem is of alleen een mooi screenshot.
Voor gewone verticaal leesbare webinhoud beschrijft WCAG reflow bij een breedte gelijk aan 320 CSS-pixels, zonder verlies van informatie of functies en zonder noodzakelijke horizontale én verticale scroll. Er zijn uitzonderingen voor inhoud die echt een tweedimensionale layout nodig heeft. Zie W3C over reflow. Gebruik dit naast handmatige controles op mobiel, met zoom en met toetsenbord; geen enkele losse test bewijst volledige toegankelijkheid.
Wanneer is het ontwerp klaar om te bouwen?
Wanneer de belangrijkste pagina’s met echte inhoud werken, de componenten onderling samenhangen en de lastige toestanden zijn besproken. Leg vast welke vrijheid redacteuren krijgen, hoe beelden worden uitgesneden en welke varianten werkelijk nodig zijn. Dat maakt de vormgeving ook na de eerste oplevering bruikbaar.
De vraag is uiteindelijk niet of de site eruitziet als een trendoverzicht van dit jaar. De vraag is of deze keuzes bij dit bedrijf en zijn bezoekers passen. Bij een bestaande website hoort daar ook een plan voor inhoud en routes bij; dat staat in de gids over een gecontroleerd redesign.