Over De Auteur
Steven Bradley is de auteur van Design Fundamentals: Elementen, Attributen, & Principes en CSS-Animaties en Overgangen voor het Moderne internet., Wanneer niet …Meer aboutSteven Bradley↬
- 10 min lezen
- Inspiratie,Ontwerpen,Creativiteit,Ontwerp Principes
- Opgeslagen voor offline lezen
- Delen op Twitter, LinkedIn
ontwerp is een arrangement van zowel vormen als ruimte. Om effectiever met de ruimte te werken, moet je je er eerst bewust van worden en leren om het te zien — leren om de vormen te zien die de ruimte vormt en hoe de ruimte communiceert. Dit is het tweede deel van een serie over ontwerpprincipes voor beginners. Het eerste deel behandelde een introductie tot gestalt; de rest van de serie (inclusief dit artikel) zal voortbouwen op die gestaltprincipes en laten zien hoeveel van de fundamentele principes waarmee we als ontwerpers werken daar hun oorsprong hebben.,
de verhouding figuur-grond
het gestaltprincipe dat het meest op de ruimte van toepassing is, is dat van figuur-grond. Alles in een ontwerp van jou zal worden gezien als het een of het ander, en de relatie tussen hen is wederzijds exclusief. Geen van beide kan worden waargenomen, behalve in relatie tot de ander, en het veranderen van de ene is onmogelijk zonder ook de andere te veranderen.
de relatie tussen figuur en grond is ook complementair. Figuur en grond kunnen verbeteren of afbreuk doen aan elkaar, en het organiseren van de twee ten opzichte van elkaar is een van de belangrijkste aspecten van het ontwerp., Het zet een context voor hoe uw ontwerp communiceert en hoe het zal worden geïnterpreteerd.
” witruimte moet worden beschouwd als een actief element, niet als een passieve achtergrond.”
— Jan Tschichold
in het derde paneel zijn twee van de zwarte lijnen verwijderd. Dit activeert de ruimte, waardoor het lijkt te zitten op de top van het grijze veld., De grond is de figuur geworden en voegt meer diepte aan het ontwerp.
Er zijn drie soorten figure-ground relaties:
- stabiel (boven links)
Het is duidelijk wat figure en wat ground is. De ene of de andere domineert meestal de compositie. - Reversible(above center)
zowel figuur als grond trekken de aandacht van de kijker gelijk., Hierdoor ontstaat spanning, waarbij de een de ander kan inhalen, wat leidt tot een dynamisch ontwerp. - dubbelzinnig (boven rechts)
elementen kunnen zowel figuur als grond tegelijkertijd lijken te zijn. Ze vormen even interessante vormen, en de kijker wordt overgelaten aan hun eigen ingang in de compositie te vinden.
afhankelijk van welke relatie u opzet en hoe u zowel figuur als grond balanceert, richt u het publiek om naar verschillende delen van het ontwerp te kijken en te interpreteren wat ze in verschillende contexten zien.,
figuur-grond is niet het enige gestaltprincipe waarin ruimte een prominente rol speelt. Twee andere zijn deze:
- Proximity
Proximity gebruikt ruimte om elementen te verbinden en te scheiden door sommige elementen in de ruimte te omsluiten. Een voorbeeld dat we voor lief kunnen nemen zijn paragrafen van de tekst op de pagina. De spatie tussen alinea ‘ s is groter dan de spatie tussen regels tekst binnen een alinea. - Closure
Dit maakt gebruik van ruimte als spaties tussen elementen. Kijkers vullen de gaten met hun eigen informatie om een geheel van de onderdelen te voltooien. Te veel ruimte en geen sluiting optreedt., Te weinig ruimte en geen sluiting nodig. Alleen de juiste balans tussen ruimte en ingevulde ruimte zal de ruimte activeren en leiden tot sluiting.
ruimte als ontwerpelement
denk even aan muziek. Als elke noot of akkoord tegelijkertijd gespeeld zou worden, zou je geen muziek hebben. Je zou lawaai hebben. Muziek treedt op wanneer geluiden worden gecontrasteerd tegen stilte. Het variëren van het patroon van geluid en stilte creëert ritme en melodie., Zonder de stilte is er geen muziek.
ruimte vervult visueel dezelfde functie. Het geeft positieve elementen ruimte om te ademen. Het geeft het oog de vrijheid om door een ontwerp te bewegen en de elementen te ontdekken die het zoekt. Het positieve wordt alleen gezien in contrast met het negatieve. Zonder ruimte heb je geen design. Je hebt visuele ruis.
tenzij ruis is wat je probeert te communiceren, leun naar de ruimte. Mensen hebben minder kans om te klagen over te veel ruimte dan over te weinig.,
ruimte kan het volgende doen:
- contrast, nadruk en hiërarchie vestigen;
- drama en spanning genereren;
- zorgen voor visuele rust tussen groepen elementen.
zoals de figuur-grond relatie impliceert, heb je alleen ruimte als er iets in aanwezig is. Voorafgaand aan de toevoeging van positieve elementen is ruimte niet gedefinieerd. De figuur-grond relatie moet worden vastgesteld voordat de ruimte kan bestaan en haar communicatie begint.
een van de belangrijkste functies van de ruimte is het verbeteren van de leesbaarheid en leesbaarheid., Macro-ruimte maakt tekst uitnodiger. Micro-ruimte maakt het leesbaarder.
- Micro-ruimte
Dit is ruimte binnen elementen in een groep. Het is de ruimte tussen letters, woorden en alinea ‘ s. - Macro-ruimte
Dit is ruimte tussen belangrijke elementen. Het scheidt elementen of groepen van elementen en biedt wegen voor het oog om te volgen en plaatsen om te rusten tussen elementen.
ruimte correleert met kwaliteit. Meer ruimte betekent minder elementen of een zeldzaamheid van elementen. Vergelijk high-end en discount winkels., Welke heeft meestal meer ruimte binnen, en welke verpakt producten in elk beetje beschikbare ruimte? Wat communiceert de ruimte met jou?
ruimte kan ook andere attributen dan kwaliteit bevatten, zoals:
- verfijning,
- eenvoud,
- luxe,
- netheid,
- eenzaamheid,
- openheid.
u verspilt ruimte wanneer u er niet aan denkt. Je kunt ruimte verspillen door het te vol te maken. U kunt ruimte verspillen door het te vangen in elementen van een ontwerp en niet toe te staan om verbinding te maken met andere ruimte in het ontwerp.,
ontwerp is uiteindelijk een rangschikking van vormen, en dat omvat de vormen gevormd door de ruimte. Wees niet bang om ruimte te gebruiken. Bekijk het als een belangrijk ontwerpelement onder uw controle.
een paar voorbeelden van ruimte op Websites
om ruimte beter te gebruiken, moet u zich er eerst bewust van worden. Leer ruimte te herkennen in verschillende ontwerpen. Let op de vorm die het vormt, en denk na over wat de ruimte communiceert. Laten we daarom eens kijken naar het ontwerp van sommige websites, rekening houdend met hoe de ruimte wordt gebruikt.,
Old Guard
het ontwerp van Tom Johnson ‘ s Old Guard gebruikt veel witruimte, waardoor tekst en andere elementen ruimte krijgen om te ademen. Er is geen misverstand over wat figuur en wat grond is.
informatie is opgenomen en gescheiden door ruimte (herinner aan het principe van nabijheid), waarbij groepen van elementen worden onderscheiden., U kunt gemakkelijk vertellen waar de ene post eindigt en de volgende begint, alleen door de ruimte tussen hen.
de hoofdinhoud ligt enigszins uit het midden op de pagina, met ruime ruimte aan beide zijden. Deze ruimte wordt af en toe onderbroken door elementen, waardoor zowel de ruimte als de onderbrekende elementen worden geactiveerd. Dit helpt om de aandacht te vestigen op het gebied en vooral de elementen binnen.
Heroku ‘ s Staus pagina
de afbeelding hieronder toont een deel van de statuspagina voor Heroku Als voornamelijk spatie., Ik toevallig de website te vangen op een bijzonder goede dag, omdat extra positieve elementen zou betekenen meer gemelde incidenten op het platform. Hier betekent meer witruimte een betere service.
merk op dat de witruimte niet Wit hoeft te zijn. Hoewel de pagina is overdreven genereus met ruimte, je bent waarschijnlijk niet te klagen dat er te veel van., Alleen belangrijke informatie — in dit geval, statusupdates en meldingen van incidenten — onderbreken de ruimte.
introductie van de roman
de ruimte aan de bovenkant van de introductie van de roman is asymmetrisch en actief. Merk op hoe het grote blok aan de linkerkant je oog direct naar de inhoud leidt. Als u doorklikt naar de website en vanaf de bovenkant naar beneden scrolt, ziet u dat de ruimte ook wordt gebruikt om blokken informatie te scheiden en te groeperen.
dunne lichtlijnen worden ook gebruikt om deze blokken te groeperen en te scheiden. Bij het bekijken van de website, merk op hoe de lijnen niet altijd raken, waardoor de ruimte om hen heen stromen en verbinding maken met andere ruimte. Dit voorkomt dat de ruimte vast komt te zitten.Elliot Jay Stocks de website van Elliot Jay Stocks zou jullie allemaal bekend moeten zijn, omdat hij achter het ontwerp van deze staat. Asymmetrische ruimte op Elliot ‘ s website leidt weer tot actieve ruimte.,
De grote afbeelding bovenaan deze pagina kan mogelijk als een tijdelijk blok staan om toegang te krijgen tot de inhoud hieronder; een royale hoeveelheid ruimte naast de afbeelding biedt echter voldoende en uitnodigende ruimte voor het oog om er omheen te bewegen., Als de zijbalk aan de linkerkant dezelfde achtergrondkleur had als de hoofdinhoud, dan zou het waarschijnlijk gemakkelijker zijn voor het oog om rond de afbeelding te bewegen, maar de verandering in kleur maakt het nauwelijks moeilijk.
net als bij de websites hierboven, wordt ruimte gebruikt om zowel groepen van afzonderlijke informatie te omsluiten als te scheiden, waardoor elke groep kan opvallen en het oog kan vinden wat het wil en er tussen kan rusten.
Phil Coffman
De inhoud op de website van Phil Coffman vormt een enkele vorm die grotendeels leeg is., De afwezigheid van veel positieve elementen verhoogt het belang van degenen die aanwezig zijn.
zelfs binnen de gekleurde rechthoekige achtergronden heeft de tekst voldoende ruimte om gemakkelijk te lezen en niet te worden verward met een andere categorie tekst op de pagina.,
de positieve vorm (en de vorm van de ruimte) past zich responsief aan verschillende browserbreedtes aan, maar het patroon van een enkele grote vorm omgeven door ruimte blijft bestaan.
nieuwe avonturen in webdesign
zoals veel van de websites hier, laat de 2013 website voor de New Adventures in webdesign conferentie royale ruimte rond elementen. Verschillende groepen informatie worden door de ruimte ingeperkt, en de ruimte is actief in het hele ontwerp.
interessant om op te merken zijn de grijze cirkelpijlen tussen de afbeelding linksboven en de hoofdinhoud rechts.
blokkeren deze pijlen de ruimtestroom? Omdat ze elkaar niet raken en omdat ze allemaal worden gestreept waar ze de ruimte onderbreken, kan de ruimte er doorheen stromen, hoewel ze duidelijk beperkter is in die stroom.
de lichtgrijze kleur helpt. Het voorkomt dat de pijlen domineren, en het is niet moeilijk voor te stellen dat de ruimte over de lijnen stroomt.,
eerlijk gezegd, als mijn browser breder was toen ik de schermafbeelding pakte, zouden de pijlen niet overlappen met de hoofdinhoud. Echter, ongeveer 1280 pixels tot waar het ontwerp wordt een enkele kolom, ze doen. Over het algemeen werkt het, hoewel ik me af vraag of de ruimte beter zou stromen zonder de pijlen aanwezig.
een paar voorbeelden van logo ‘s
Ik laat u enkele logo’ s zien waarin ruimte is opgenomen als een integraal onderdeel van het ontwerp. In plaats van te wijzen op het gebruik van de ruimte in elk, zal ik een paar algemene opmerkingen te maken en dan laat je de ruimtes te verkennen voor jezelf.,
merk op hoe onderstaande logo ‘ s gebruik maken van de figuur-grond relatie. Met sommige, totdat je zowel figuur en grond ziet, zie je niet het volledige logo. Beide zijn noodzakelijke bijdragen aan wat er wordt gecommuniceerd.
verschillende van deze logo ‘ s zijn gebaseerd op het sluitingsprincipe. Wat je hoort te zien is er niet echt, maar je ziet het toch. Een paar van deze logo ‘ s spelen ook met figuur en grond. Wat is figuur als je in het hele logo tegen de achtergrond wordt Grond voor een kleinere figuur binnen., Deze omkeerbare figuur-grond relatie staat centraal in wat er wordt gecommuniceerd.
- Cloud Bed
- Black Cat Lounge
- Shift
- Dolphin & Seal Logo Designer
- Dental Implants Guide
- Wineforest
samenvatting
Ik hoop dat u twee belangrijke dingen uit deze post weg te nemen., Ten eerste is het verband tussen het gebruik van de ruimte in het ontwerp en het gestaltprincipe van figuur-grond. Gestaltprincipes liggen ten grondslag aan veel van wat we als ontwerpers doen.
ten tweede, en misschien nog belangrijker, doe een inspanning om tijd te besteden aan het observeren hoe ruimte wordt gebruikt in ontwerp. Laat ruimte geen bijproduct zijn van je positieve elementen. Leer ruimte zo veel als, zo niet meer dan, positieve elementen te ontwerpen. De lay-out van een pagina is uiteindelijk een organisatie van de ruimte.
analyseer bewust die ruimte, en gebruik deze bewust om een beter ontwerp te maken. Laat het niet zijn wat over is., Bekijk het als een essentieel ontwerpelement en bekijk vervolgens de relatie tussen ruimte en positieve elementen als een ontwerpelement dat u vormgeeft.
De volgende keer zullen we meer gestaltprincipes aan de mix toevoegen en onderzoeken hoe focal points, continuation en common fate ons leiden naar ideeën zoals visueel gewicht en compositorische balans.
- let op uw En En Em streepjes: typografische Etiquette
- ontwerpprincipes: visueel gewicht en richting
- Hoe Geometrie Het Logo ontwerp beïnvloedt
- over kunst
(al, ml, il)