Share
In het vorige artikel hebben we geleerd hoe dimensionering en schaalvergroting kunnen worden gebruikt om uw ontwerpen harmonieus en duidelijk te maken. Hierin, ons laatste artikel over onzichtbare krachten in ontwerp, zullen we leren hoe subtiel gebruik van ruimte - vaak "witte ruimte" of "negatieve ruimte" genoemd - kan worden gebruikt om uw ontwerpen efficiënt te laten communiceren.
Hoe bewuster u de witte ruimte gebruikt, hoe hoger uw "gegevens- / inktverhouding". Dit is een concept geïntroduceerd door de informatieontwerpgoeroe Edward Tufte. Het is een functie van hoeveel informatie wordt overgedragen door elke druppel inkt - of, in het geval van mobiel en webontwerp - per pixel.
De linkergrafiek heeft een veel hogere gegevens- / inktverhouding dan de grafiek aan de rechterkant. Moet de grafiek echt worden ingevuld met "inkt"? Nee, het communiceert prima met stippen en lijnen.
Stel dat je een stap verder ging en de lijnen verwijderde, alleen de punten achterlatend?
Nu is de communicatie uit elkaar gevallen. Ja, u kunt alle gegevenspunten zien, maar nu bent u het "verhaal" kwijt over hoe de gegevens in de loop van de tijd zijn veranderd. Bovendien is het moeilijk te onderscheiden van een eenvoudige scatterplotgrafiek, waarin "tijd" niet een van de variabelen is en de gegevens niet lineair verlopen.
In het eerste artikel van deze serie hebben we geleerd hoe de uitlijning van elementen relaties tussen deze elementen impliceert. Wat ook belangrijk is, is hoe dicht die elementen bij elkaar zijn.
Dit is slechts een eenvoudig raster van vierkanten, zoals tegels op een vloer.
Maar als u een bredere horizontale afstand tussen verticale rijen met vierkanten maakt, heeft u nu een reeks kolommen.
Dus als er in de bovenstaande grafiek drastische wijzigingen in de gegevens zijn, kan de geest de punten in de verkeerde volgorde willen verbinden, alleen omdat de ene stip dichter bij de andere staat.
Deze principes reiken veel verder dan lijngrafieken. Ze zijn aanwezig in alles wat je ontwerpt. Vooral als je ontwerpt voor kleine schermen, wil je niet dat pixels worden verspild - je wilt ontwerpen met een hoge gegevens- / inktverhouding.
Ontwerpers hebben de neiging om rasters te gebruiken om informatie in een lay-out te ordenen. Met rasters worden elementen uitgelijnd, zoals tekstregels, die vervolgens regio's van informatie maken die aan elkaar gerelateerd zijn.
Hier is een basislay-out, ontworpen op een raster. De linkerkant is uw navigatie en het grotere gebied bevat de hoofdinhoud.
Deze lay-out is goed, maar merk op dat de witte ruimte tussen de navigatie en de witte ruimte tussen tekstkolommen binnen het hoofdinhoudsgebied hetzelfde is.
Het zou logisch zijn om de goot tussen het navigatie- en het hoofdinhoudsgebied enigszins te verbreden.
Nu is er een meer heldere aflijning tussen de navigatie en de hoofdinhoud en hoefden we alleen wat witte ruimte toe te voegen.
In het vorige artikel hebben we geleerd hoe de dimensionering een van de vele factoren is die kunnen worden gebruikt om typografische hiërarchieën te maken. Witte ruimte kan ook helpen bij het organiseren van je typografie.
Bekijk bijvoorbeeld deze koptekst, metagegevens en body-kopie.
Ze hebben harmonieuze maatrelaties met elkaar, dankzij het feit dat hun maten zijn gekozen uit een gevarieerde schaal, maar ze zien er behoorlijk slordig uit!
Het probleem is dat de negatieve ruimtes tussen deze elementen niet zijn overwogen.
De metadatatrix onderscheidt zich al aardig van de koptekst: het is een ander formaat, het is in alle hoofdletters, en het is zelfs een beetje een beetje gespreid.
Een goede truc is om de hoogte van het metadatatype te gebruiken om te bepalen hoeveel ruimte er moet zijn tussen de metagegevenskop. Zoals dit:
Over het algemeen gebruik je je oogballen om deze afstand te berekenen. Er is geen wiskundige manier om u precies te vertellen hoeveel ruimte er zou zijn. Het is een functie van de lijnhoogte, de hoeveelheid marge of opvulling die u gebruikt en de kenmerken van het specifieke lettertype.
Het is logisch dat de metadata zich heel dicht bij de header bevinden, maar de header hoeft niet zo dicht bij de body-kopie te staan. In feite kunnen de koptekst en de metagegevens hun eigen eenheid zijn.
Je kunt de afstand van de bovenkant van de kop tot de onderkant van de metadata als richtlijn gebruiken en de halve afstand tussen de metadata en de body-kopie plaatsen.
Door na te denken over de manier waarop u uw lay-out vormgeeft en communiceert met witruimte, zullen uw ontwerpen er schoner en duidelijker uitzien en beter bruikbaar zijn en beter converteren.
Dat wrapt de zaken nu - als je dat nog niet hebt gedaan, kijk dan eerst naar het eerste en tweede artikel van de serie!
Accentsconagua