Share
Ruimte is een fundamentele parameter in webdesign, maar ook een van de meest onderschatte. Als we de controle over witruimte begrijpen, kunnen we een subtiel, maar bepalend element van een webpagina beheren en er goed gebruik van maken.
Kort samengevat, witte ruimte is de afstand tussen verschillende elementen, of het nu tussen de eigenlijke secties van de pagina is, of precies tussen de letters. In de meeste gevallen gebruiken we witte ruimte (ook wel negatieve ruimte genoemd) om inhoud weg te spoelen voor eenvoudiger en uiteindelijk sneller scannen van een pagina zonder de noodzaak om specifieke scheidingselementen in te voegen.
Vandaag zullen we bespreken hoe u negatieve ruimte in uw ontwerpen kunt gebruiken en uitzoeken hoe het precies helpt om uw ontwerp een schoon, opgeruimd gevoel te geven.
Zoals ik net heb uitgelegd, is witte ruimte (of negatieve ruimte) de afstand tussen verschillende elementen die niets bevat. Voor vergelijkingsdoeleinden noemen we de ruimte die positief is gevuld. De negatieve ruimte helpt eigenlijk om te vormen en te definiëren wat de positieve ruimte is. Dit kan worden aangetoond door naar de onderstaande optische illusie te kijken.
Wat zie je? De vaas, of de twee gezichten? Als je de gezichten ziet, komt dat omdat in dit specifieke ontwerp de witte ruimte als de negatieve ruimte fungeert, terwijl zwart de positieve is. We kunnen de rollen omkeren en een heel andere kijk krijgen omdat ze allebei samenwerken om het beeld te vormen.
Waar dit voorbeeld op probeert te komen is dat je negatieve ruimte vrij belangrijk is omdat het kan helpen de inhoud te definiëren die zich in de positieve ruimte bevindt. Denk niet aan witte ruimte als de overgebleven bit waarvoor je geen inhoud hebt gemaakt, maar eerder een belangrijke structurele speler in de lay-out van je site.
Er zijn ook twee niveaus van witte ruimte. Dit zijn macro- en microwitruimtes, gerelateerd aan de ruimte tussen de kernelementen en de ruimte tussen de kleinere elementen.
Google is, zoals je kunt zien, een groot voorstander van witte ruimte in hun ontwerpen. De zoekmachine wordt algemeen beschouwd als een schoon ontwerp, omdat de focus ligt op het hoofddoel van de pagina, zonder enorme toewijding aan andere gebieden (in tegenstelling tot andere).
Ik bewonder het ontwerpwerk dat het Envato-team met deze site deed. Er is een mooi, gebalanceerd gebruik van witte ruimte tussen de titels, kredietlijnen en alinea's.
Negatieve ruimte hoeft eigenlijk geen enkel kleurblok te zijn. In de fotografie kan elk gebied dat niet in focus is, worden geclassificeerd als negatieve ruimte. In dit voorbeeld trekt het gebrek aan focus op de achtergrond je ogen naar de mok die er is. (En ook, heeft Starbucks hun logo niet gewijzigd?)
Wanneer iemand ontwerpt, concentreert hij zich normaal op de positieve ruimte. Het is bijna onbewust dat de negatieve ruimte volgt en in feite helpt om vorm te geven en te vormen hoe de positieve ruimte wordt uitgelegd en vervolgens te lezen. Deze eigenschap kan vervolgens worden aangepast om de ervaring aan te passen voor een betere tijdaflezing en interactie met de positieve ruimte.
Laten we zeggen dat je in een winkel bent. Het zou geen comfortabele of aangename ervaring zijn als je moeite zou hebben met bewegen door de overvolle gangpaden, naast de verkoopmedewerker die voortdurend vraagt om hun speciale aanbiedingen. Er is gewoon te veel om naar te kijken en je hebt noch de tijd noch het geduld om te vinden waar je oorspronkelijk naar op zoek was. Het is niet leuk.
Dit is een van de belangrijkste kenmerken van waarom Apple-winkels zo goed werken. Ze zijn erg minimalistisch en een groot deel van de werkvloer wordt aan de producten zelf gegeven. Als u zich echter in een andere pc-winkel begeeft, wordt u opgeslokt door eindeloze gangpaden met machines die er anders uitzien en anders functioneren. In mijn ervaring is de minimalistische winkelervaring een stuk aangenamer.
Wat heeft dat met webdesign te maken? Veel eigenlijk. We komen niet online voor de taak om een specifieke reeks tekst te zoeken onder een schat aan zinloze inhoud waar je niet om geeft. Negatieve ruimte helpt bij beide problemen door ontwerpen overzichtelijk te houden en tegelijkertijd de aandacht te vestigen op het brandpunt van de pagina.
Je zou je kunnen afvragen, waarom zou ik moeite doen om ervoor te zorgen dat mijn negatieve ruimte precies goed is?
Tekst op het web is in tegenstelling tot tekst op een ander platform en we passen onze ontwerpen allemaal aan, zodat de eindgebruiker de gemakkelijkste ervaring heeft met het lezen van onze inhoud. In tegenstelling tot een krant kan het op internet frustrerend zijn om te proberen te ontcijferen waar de inhoud waarin u bent geïnteresseerd feitelijk is. Rommelige ontwerpen die te zwaar zijn om aan te pakken bieden geen schone, eenvoudige leeservaring, omdat we eerst de webpagina moeten onderzoeken om elementen van elkaar te onderscheiden. Witte ruimte hackt een buffer tussen elementen in, dus het is gemakkelijker voor ons om de inhoud te vinden waar we om geven.
We kunnen ons ook richten op een recent artikel over mijn typografie, waarbij ik acht belangrijke factoren heb bekeken die bijdragen aan goede webtypografie. Door de ruimtelijke elementen (zoals afstand en letterafstand) te kraken, kunnen we de leesbaarheid vergroten. Werken op dit niveau betekent dat we werken met micro-witruimte.
In een notendop (een andere dan die eerder genoemd), witte ruimte spaties alles uit, geeft elementen hun eigen ruimte om zichzelf te zijn, om herkend te worden en om gemakkelijk te lezen en in wisselwerking te staan met.
Negatieve ruimte wordt op veel creatieve gebieden gebruikt, met name fotografie. In fotografie is negatieve ruimte elke ruimte die niet wordt gebruikt om een onderwerp vast te houden, wat niet ver verwijderd is van zijn rol in webontwerp. Als we naar het webontwerp van Apple kijken, gebruiken ze natuurlijk zowel macro- als microwitruimte om elementen weg te spelen en hun eigen plek op de webpagina te geven.
Het ontwerp van Apple maakt gebruik van zowel macro- als microwitruimte, gedefinieerd door de twee verschillende kleuren die op de onderstaande afbeelding zijn gelegd. Dit resulteert in een schoon, elegant ontwerp dat genadig is uit elkaar geplaatst. Je weet het misschien niet, maar je aandacht voor de inhoud zal zijn beïnvloed door het gebrek aan inhoud in de witte ruimtegebieden. Onze aandachtsspanne is op internet korter gebleken, dus de rommelige, zware drukontwerpen waren geen trend die doorging naar de virtuele ontwerpsferen.
Natuurlijk hoeft de ruimte niet echt wit te zijn. Elk type lege ruimte dat niet concurreert met de focusinhoud kan worden aangemerkt als "witte ruimte", zoals het onderstaande ontwerp doet vermoeden.
In het gedrukte ontwerp merkt u misschien dat uw klant wil dat elk laatste stuk van zijn onroerend goed wordt gebruikt om zijn product te promoten. Het is echter een ander verhaal bij het ontwerpen voor virtuele landen. Witte ruimte kan een gevoel van verfijning en luxe toevoegen aan een generieke webpagina door het gevoel te creëren dat het product belangrijker is dan het onroerend goed waarin het leeft. Het kan een product er luxe laten uitzien door het "less is more" -principe te gebruiken. Als je naar de website van Apple kijkt - een merk dat we beschouwen als een van de betere computers - is er heel weinig nodig, omdat de producten voor zichzelf spreken, zij het samen met een aantal minimalistische slogan. Dit is een fenomeen dat ook populair is bij premium gezondheids- en welzijnswebsites waar weinig inhoud nodig is om het algemene idee van het product of de geadverteerde service te communiceren.
Vaak lijken goedkopere merken zoveel mogelijk informatie in een ruimte te proppen; verschillende markten, verschillende eindgebruikers. De HP- en Apple-sites benadrukken dit punt bijvoorbeeld. Apple is notoir zeker en laat hun producten voor zichzelf spreken. Als u het product wilt, kijk eens rond, als u niet meebeweegt. Aan de andere kant maakt de HP-site drukker gebruik van up- en cross-selling, promotie van aanbiedingen en duwen van goedkope prijzen in de geest van de gebruiker, evenals het presenteren van een assortiment alternatieve producten waarin u wellicht geïnteresseerd zou zijn.
Inmiddels zou u moeten herkennen wat een negatieve ruimte is en hoe u deze kunt identificeren in uw ontwerp. Als u nieuw bent in dit veld, kunt u in verwarring raken wanneer iemand u voorstelt de witte ruimte te verbeteren. Ik zou niet helemaal verbaasd zijn als je zou reageren met iets in de trant van "dat is gewoon de restruimte". Nou, in feite kan je negatieve ruimte aanzienlijk worden verbeterd door een paar veel voorkomende problemen aan te passen om het bestaan ervan veel effectiever te maken.
Inconsistente spatiëring kan een van de grootste problemen zijn, maar een die gemakkelijk kan worden aangepast. Alles lijkt meer gebalanceerd en over het algemeen ziet het er beter uit als je opvulling rond een element gelijk is. Als we naar het onderstaande voorbeeld kijken, het ontwerp (dat van onze zustersite, ActiveTuts +), ziet de echte aan de rechterkant er veel beter uit omdat de opvulling tussen elementen veel consistenter is.
Marges mogen ook niet tot gevolg hebben dat een ontwerp losraakt. Te grote marges kunnen de relatie tussen elementen verbreken en het gevoel van eenheid in het ontwerp verminderen. Grote marges verspillen ook uw onroerend goed, waardoor de effectiviteit van uw werk mogelijk afneemt.
Zoals eerder uitgelegd, is de tussenruimte op microniveau de negatieve ruimte tussen de kleinste elementen op de pagina, zoals de letters in een alinea.
Regelafstand kan de leesbaarheid van een tekstgedeelte drastisch verbeteren, omdat het een kritieke dealbreaker is in uw case study van goed toegesneden typografie. Regelafstand, of voorloop, is de micro-witruimte tussen tekstregels. Over het algemeen geldt dat hoe groter de leiding, des te beter de ervaring zal zijn tijdens het lezen, hoewel te veel de eenheid kan doorbreken en het ontwerp kan ontkoppelen.
Ik heb de afbeelding hieronder in verschillende artikelen hier bij Tuts + gebruikt, en ik wil hem hier nogmaals laten zien. Het voorbeeld aan de rechterkant heeft meer richting, en zou, bij gebruik in een bredere selectie van tekst, het gemakkelijker moeten maken om te lezen.
Op dezelfde manier kan de spatiëring van de letters bijdragen aan de goed gebruikte negatieve ruimte. Krappe letters zijn niet zo leuk om te lezen, maar geen van beide zijn fouten die je kunt verwarren met individuele woorden. Nogmaals, het gaat alleen om het vinden van de perfecte balans.
Wanneer u uw webontwerp ontwerpt en op maat maakt, doe dit dan met een frisse geest die niet wordt besmet met wat u de vorige keer goed hebt gedaan. Elk project is anders en omdat er geen vooraf gedefinieerde richtlijnen of consistente wiskunde zijn, moet u uw nieuw verfijnde oog gebruiken om elk product afzonderlijk te analyseren.
Negatieve ruimte, zoals ik in dit artikel verschillende keren heb genoemd, ontsluiert zowel het ontwerp als helpt bij het vormen en de aandacht vestigen op de inhoud op de pagina. Terugkomend op de analogie met winkelen, niemand wil moeten werken om het gewenste resultaat te bereiken. In plaats daarvan willen ze dat het wordt geserveerd op een gemakkelijk herkenbaar bord dat niet wordt gestoord door zinloze bijgerechten waar ze niet om hebben gevraagd, en ook niet willen.
Samenvattend kunnen we ook het negatieve ruimtegebruik verbeteren door de marges te analyseren en te verfijnen door ze in de meeste omstandigheden consistent te houden en aandacht te schenken aan typografie en afstanden op microniveau. Idealiter zou je elk project ook anders moeten nemen om de positieve plek in het ontwerp te herkennen.
Afgezien van de praktische voordelen van een schone, overzichtelijke webpagina, kan negatieve ruimte een gevoel van verfijning en elegantie creëren door de inhoud te laten "spreken voor zichzelf" zonder grote inbraken die goedkoop lijken..
Bedankt voor het duiken in een interessante reis in een gebied dat dat niet is. Hopelijk heb je iets geleerd (dat heb ik zeker wel) over de belangrijke negatieve ruimte in het ontwerp, en misschien denk je twee keer na voordat je een miljoen onzinnige of onnodige objecten op je pagina probeert te duwen. Voordat ik je vertrek, nog een laatste tip: probeer de test van vijf seconden (bekijk een webpagina vijf seconden en noteer wat je onthoudt) om te bevestigen dat je ontwerp overzichtelijk is en de witte ruimte goed gebruikt.
Accentsconagua