Zes webdesignprincipes (hiërarchie, witruimte, contrast, uitlijning, nabijheid, tikdoelen), elk getoond als live voor-en-na-demo die u kunt omschakelen, met de CSS achter de oplossing.
Goed webdesign komt grotendeels voort uit zes gewoonten: rangschik inhoud met een duidelijke visuele hiërarchie, laat genoeg witruimte, houd het tekstcontrast op 4.5:1 of beter, lijn dingen uit op gedeelde randen, groepeer verwante elementen dicht bij elkaar, en maak tikdoelen minstens 24 pixels in het vierkant. Schakel elke demo hieronder tussen voor en na om het verschil te zien.
De zes principes en de CSS die ze meestal oplost
Artikelen over ontwerpprincipes beschrijven ze met woorden en stockfoto's. Hier is elk principe een kleine productkaart of een formulier dat twee keer is getekend, kapot en gerepareerd, zodat u tussen beide kunt schakelen en precies ziet wat er veranderde.
De principes die dagelijks het meest uitmaken zijn hiërarchie, witruimte, contrast, uitlijning, nabijheid en comfortabele tikdoelen. Consistentie verbindt ze: dezelfde spacing, lettergroottes en kleuren, herhaald op elke pagina.
Visuele hiërarchie is de volgorde waarin mensen dingen op een pagina opmerken. Ontwerpers sturen die met grootte, gewicht, kleur, positie en ruimte, zodat de kop als eerste wordt gezien, ondersteunende details als tweede, en de belangrijkste actie makkelijk te vinden is.
WCAG 2.2 succescriterium 1.4.3, niveau AA, vraagt minstens 4.5:1 voor normale tekst en 3:1 voor grote tekst, die het definieert als minstens 18 punt, of 14 punt vet.
Het beschrijft hoe mensen tekstrijke pagina's vaak scannen: over de bovenkant, iets lager nog een keer, en dan langs de linkerkant naar beneden. De praktische les is om sleutelwoorden aan het begin van koppen en regels te zetten, en belangrijke punten niet midden in een alinea te verstoppen.
WCAG 2.2 criterium 2.5.8 op niveau AA stelt een minimum van 24 bij 24 CSS-pixels voor aanwijsdoelen, met enkele uitzonderingen zoals links binnen een zin. Veel ontwerpteams maken primaire knoppen groter, zodat ze makkelijk te raken zijn.
Drie typografische stappen rangschikken de inhoud, de spacing komt uit een schaal van 8px, en de gedempte tekst blijft donker genoeg om 4.5:1 op wit te halen.
Titel, prijs en knop hebben dezelfde grootte en hetzelfde gewicht, dus het oog weet niet waar het moet landen.
Grootte, gewicht en kleur rangschikken de inhoud: eerst de titel, dan de prijs, dan de actie.
Alles is van rand tot rand volgepropt, wat rommelig oogt en moeilijk te scannen is.
Ruime padding en tussenruimtes scheiden groepen en geven elk element ruimte om te ademen.
Lichtgrijze tekst op wit zit ruim onder het WCAG-minimum voor normale tekst.
Donkere tekst op wit haalt 4.5:1, het minimum van WCAG 2.2 niveau AA voor tekst van normale grootte.
Een mix van gecentreerde en links uitgelijnde regels geeft rafelige randen die het oog moet volgen.
Eén gedeelde linkerrand maakt van losse regels één leesbaar blok.
Labels staan even ver van elk veld, dus het is onduidelijk welk label waar hoort.
Elk label staat dicht tegen zijn eigen veld en paren hebben ruimte ertussen, dus de groepering is duidelijk.
Piepkleine links staan dicht op elkaar en zijn met een vinger makkelijk te missen.
Doelen zijn minstens 24 bij 24 CSS-pixels, het minimum van WCAG 2.2 niveau AA, met ruimte ertussen.
Principe
Versie
Voor
Na
Voor: {text}
Na: {text}
Zuurdesembrood
$9, dagelijks gebakken
Nu bestellen
Openingstijden
Ma tot vr, 7 uur 's ochtends tot 6 uur 's avonds
Za, 8 uur 's ochtends tot 2 uur 's middags
We bezorgen binnen 5 km van de winkel, elke ochtend voor 9 uur.
Tekstkleur {hex} op wit
Catering
Schalen voor 10 tot 100 personen.
Bestel twee dagen van tevoren.
Naam
Telefoon
Menu
Openingstijden
Bestellen
Gratis beginnen · Geen creditcard nodig