uitlijnen-lijnen-1

Uitlijnen is het ordenen van onderdelen langs denkbeeldige lijnen. Uitlijnen zorgt voor meer rust en consistentie in je website. Uitlijnen geeft je website een betere en professionelere uitstraling.

Uitlijnen is niet heel ingewikkeld, maar wel een krachtig instrument. Het is een design principe dat al eeuwen gebruikt wordt in allerlei kunstvormen, zoals architectuur en schilderkunst. Uitlijnen wordt heden te dage ook gebruikt voor de opmaak van kranten, tijdschriften en natuurlijk websites.

Naast uitlijnen zijn andere bekende design principes: groeperen, contrast en witruimte.

Uitlijnen en websites

Voor het uitlijnen van websites kun je denken aan het logo, afbeeldingen en tekst. Hieronder een voorbeeld van de website van Apple. Links het origineel en rechts ingevuld met de uitlijning.

Uitlijning op website Apple, links het origineel, rechts ingevuld met uitlijning.

Apple voert de uitlijning consequent uit. De icoontjes en het menu bovenaan zijn horizontaal uitgelijnd en de tekst en foto verticaal.

Hieronder een website waarbij de uitlijning niet volledig is doorgevoerd. Maar niet getreurd, met enkele kleine aanpassingen is dit te verhelpen.

Screenshot website Benthem Gratama advocaten
Screenshot originele website (benthemgratama.nl, 19 januari 2021)

Het ziet er op het eerste gezicht helemaal niet verkeerd uit. Maar ik wil laten zien dat de website beter wordt bij, als het uitlijnen consequenter wordt toegepast. Het resultaat is subtiel, maar uitstraling en de (eerste) indruk die wij hebben van een website werkt vaak onbewust.

Om het uitlijnen te beoordelen kijk ik om te beginnen naar de volgende hoofdlijnen:

  • centrale lijn
  • de buitenkanten
Centrale lijn en zijkanten voor uitlijnen website.

De centrale lijn loopt door de pijl naar beneden, boven het woord Actueel. Dit is het midden van de website en daarmee een belangrijk punt voor het uitlijnen.

De rechterkant van de website is te vinden bij de opsommingslijst met de groene achtergrond. Hiermee is de afstand bekend tussen het midden en de rechter buitenkant. Daarmee is ook de linkergrens te bepalen. Voor het uitlijnen moet deze afstand gelijk zijn.

Nu zien we ook direct de probleemgebieden links en rechts. Zowel het logo als de menu’s zijn niet uitgelijnd.

Resultaat verbetering uitlijnen

Hieronder dezelfde website, maar met een verbeterde uitlijning.

Website met verbeterde uitlijning.
Website met verbeterde uitlijning.

Belangrijkste wijzigingen:

  • menu en logo uitlijnen op links
  • menu rechtsboven en de zoekfunctie uitlijnen op rechts

Tenslotte heb ik enkele onderdelen ook wat meer ruimte gegeven (witruimte heet dat bij vormgeving). Dit geeft wat meer lucht en balans aan de website. Zo heeft de opsomming – witte tekst rechts – aan de linkerzijde meer ruimte gekregen. De opsomming zat wel erg strak tegen de rand aan.

Uitlijnen website voorbeeld verbeterd
Links het origineel, rechts de website met verbeterde uitlijning

Resultaat is een beter uitgelijnde website.

Conclusie

Uitlijning is een zeer effectief en krachtig instrument om de opmaak van je website te verbeteren. Er lopen allerlei onzichtbare lijnen die we daarvoor kunnen gebruiken. Door het goed uitvoeren van uitlijning kun je de kwaliteit, uitstraling en indruk van je website verbeteren.