4 dingen die elke ontwerper moet weten over witruimte
Whitespace (of "negative space") is een lege ruimte tussen en rond objecten van een pagina. Elementen van witruimte in grafische gebruikersinterfaces zijn:
- Marges, opvullingen en dakgoten
- Ruimte rond afbeeldingen en grafische objecten
- Regelafstand en letterspatiëring binnen tekstinhoud
Hoewel sommige mensen whitespace beschouwen als een verspilling van waardevol schermbezit, is het een essentieel element in een ontwerp. In feite is witruimte net zo belangrijk als de inhoud. Zoals Jan Tschichold zei:
Whitespace moet worden beschouwd als een actief element, niet als een passieve achtergrond
Alle goede gebruikersinterfaces bevatten de juiste witruimtewaarden in alle pagina-elementen van boven naar beneden. De witruimte op een pagina kan net zo belangrijk zijn als de ruimte die door UI-elementen wordt ingenomen, omdat tekst, knoppen, logo's en andere objecten ruimte moeten hebben om te ademen.
In dit artikel vindt u hoe u witruimte in uw ontwerpen gebruikt om het een schoon, overzichtelijk gevoel te geven:
1. Verbeter tekstleesbaarheid
Whitespace kan het lezen veel gemakkelijker maken door het aantal tekstbezoekers in één keer te verminderen. Het ontbreken van witruimte (rommelige pagina) laat gebruikers de inhoud niet lezen. Aan de andere kant is gebleken dat goed gebruikte witruimte het tekstbegrip vergroot tot 20%, zoals aangegeven door Dmitry Fadeyev .
Twee belangrijke zaken waarmee u rekening moet houden bij het optimaliseren van uw tekstcontent zijn paragraafmarges en regelafstand (de spatie tussen elke regel in uw tekst). Dit laatste kan de leesbaarheid van een tekstlichaam drastisch verbeteren. Over het algemeen geldt dat hoe groter de spatiëring, des te beter de ervaring zal zijn tijdens het lezen (hoewel te veel regelafstand de lijnen kan loskoppelen).
2. Verduidelijkende relaties
De gehele lay-out ontstaat uit de som van de delen en inhoudsrelaties worden gedefinieerd door de omringende witruimte. De Wet van Nabijheid stelt dat objecten dichtbij elkaar lijken. De spatie fungeert in dit geval als een visuele aanwijzing. Bekijk de afbeelding hieronder:
De wetten van de Gestalt dicteren dat objecten in de onmiddellijke nabijheid als één "eenheid" zullen verschijnen; de witte ruimte fungeert als een visuele keu.
Bijna iedereen die deze afbeelding ziet, ziet twee groepen cirkels in plaats van slechts twaalf cirkels. De cirkels zijn allemaal identiek en het enige verschil tussen hen is de hoeveelheid witruimte die ze scheidt.
Het is mogelijk om items samen te groeperen door de ruimte tussen hen te verkleinen en de ruimte tussen hen en andere elementen op de pagina te vergroten.
Voor gebruikersinterfaces betekent dit dat objecten die zich dicht bij elkaar bevinden, als één "eenheid" worden weergegeven. Het is bijvoorbeeld in de context van webformulieren een goed idee om labels dicht bij de relevante velden te plaatsen om een object te maken. Wanneer labels dichter bij de velden worden geplaatst, is de relatie tussen deze labels voor gebruikers veel duidelijk.
Informatie wordt veel duidelijker gecommuniceerd wanneer labels dichter bij de velden worden geplaatst waar ze betrekking op hebben.
3. Aandacht trekken
Ontwerpers kunnen witruimten gebruiken om te communiceren wat het belangrijkst is in één oogopslag. Er is een relatie tussen een afstand en aandacht; grotere afstand dwingt aandacht. Het ontbreken van andere elementen zal alleen bestaande elementen meer opvallen. Het is mogelijk om een spatie voor uw voordeel te gebruiken om dwalende ogen op bepaalde pagina-elementen te trekken. Extra opvulling rond een bepaald inhoudsgedeelte dwingt de aandacht van gebruikers op dat gebied, simpelweg omdat er niets anders op het scherm is om de aandacht te trekken. Dus hoe meer witruimte rond een object, hoe meer het oog erop wordt getrokken.
4. Maak visuele hiërarchie
Wanneer witruimte op de juiste manier wordt gebruikt, kan een pagina een algemene stroom en balans creëren, wat op zijn beurt de intentie van het ontwerp helpt communiceren. Whitespace kan de algehele hiërarchie ondersteunen. Het produceert symmetrie of asymmetrie.
Symmetrie creëert geheugen en harmonie:
Mailchimp, zoals je kunt zien, is een groot voorstander van witte ruimte in hun ontwerpen. Wanneer bezoekers de startpagina scannen, trekt de knop 'Gratis aanmelden' bijna onmiddellijk hun aandacht. Met behulp van symmetrie is het mogelijk om een gebalanceerde lay-out te maken met even belangrijke rechter en linker delen.
Terwijl asymmetrie de aandacht trekt:
Asymmetrie is geweldig om aandacht te vestigen op een bepaald deel van de pagina.
Wanneer een element asymmetrische ruimte gebruikt, onderscheidt het zich van andere omringende elementen.
Conclusie
Whitespace is geen verspilde ruimte, het is een krachtig ontwerpprogramma. Het kan net zo belangrijk zijn als de ruimte die wordt gebruikt door afbeeldingen, tekst of andere gebruikersinterfaces, omdat zelfs lege ruimten een doel dienen en de visuele integriteit van een opmaak ondersteunen.
Hoewel het een eenvoudig onderwerp lijkt, kan witruimte moeilijk te beheersen zijn omdat het toepassen van witruimte zowel kunst als wetenschap is. Echt begrijpen hoeveel ruimte moet worden gebruikt om een goede lay-out te maken, vereist oefening.