Inhoud
Dit artikel verscheen voor het eerst in nummer 229 van .net magazine - 's werelds best verkochte tijdschrift voor webdesigners en -ontwikkelaars.
Een van de belangrijkste dingen waarop u zich kunt concentreren als het gaat om het opmaken van een pagina in HTML / CSS, is het verticale ritme - het visuele patroon waarin de blokken tekst of regels tekst zich vormen terwijl u de pagina scant.
Andere dingen kunnen dit ritme beïnvloeden, zoals koppen, lijstitems, afbeeldingen, enzovoort. Het hebben van een goed verticaal ritme is van het grootste belang omdat het de leesbaarheid en scanbaarheid van uw pagina ('s) bevordert.
Er zijn nogal wat geweldige tutorials (zie bijvoorbeeld hier en hier) op internet waar je kunt vinden hoe je technisch het juiste verticale ritme kunt bereiken door ems te gebruiken voor je lijnhoogte en te leren wat je type 'in fase' houdt middelen.
Hiërarchie
De basiszaken om goed op te letten, zijn de lijnhoogte tussen elementen en de algehele visuele hiërarchie op de pagina. Het instellen van de juiste verhoudingen voor lijnhoogte kan een ingewikkelde ontwerpoefening zijn, maar het is belangrijk om het onder de knie te krijgen. Hiërarchie is ook belangrijk, omdat de afbeeldingen en tekstelementen visueel in harmonie met elkaar moeten zijn - de belangrijkste dingen zijn over het algemeen groter en komen als eerste op de pagina.
Printontwerpers hebben jarenlang met het idee van verticaal ritme te maken gehad en het is pas in het recente verleden dat webontwerpers zich hier echt in moesten verdiepen. Met de steeds toenemende behoefte om websites uit te bouwen met behulp van rasterlay-outs en aandacht te besteden aan responsieve implementaties om meerdere schermbreedtes mogelijk te maken, is het nu belangrijker dan ooit vanuit een visueel ontwerpperspectief, waarschijnlijk meer dan alleen een technische.
Vijf voorbeelden om te bekijken
1. De elementen van typografische stijl Dit boek van Robert Bringhurst is de standaard voor typografiestudie. Lees het, consumeer het, giet het op elke mogelijke manier in je hersenen.
2. Frank Chimero Behalve dat het in het algemeen absoluut geweldig is, vertoont het recente herontwerp van de persoonlijke website van ontwerper Frank Chimero een uitstekend verticaal ritme. Hij gebruikt een parallax-effect om het ritme naar huis te drijven terwijl je ook de pagina naar beneden scrolt.
3. Dan Cederholm Kijk voor een goed voorbeeld van een geweldig typografisch verticaal ritme op de blog van Dan Cederholm. De regelhoogte van de tekst en koppen is in perfecte verhouding.
4. Focus Lab Het webdesign- en merkbedrijf Focus Lab maakt handig gebruik van hiërarchie om te helpen communiceren wat het belangrijkst is voor de bezoeker.
5. Typofonderie De website voor Typografie Studio Typofonderie heeft een geweldig verticaal ritme met zijn afbeeldingen en tekst. De afstand tussen de elementen is in verhouding op de hele website en de hiërarchie tussen de hoofdafbeelding en secundaire afbeeldingen / secties is perfect.
Ontdek 10 geweldige voorbeelden van experimenteel ontwerp bij Creative Bloq.
