Verbeter uw ontwerpen met de principes van sluiting en figuur-grond (deel 2)

over de auteur

Jon was jarenlang een visueel ontwerper voordat hij de sprong maakte naar interactieontwerp., Hij heeft een master ‘ s degree in Human-Computer Interaction van de DePaul …Meer aboutJon↬

heeft u zich ooit afgevraagd hoe elementen samenkomen om succesvolle ontwerpen te maken? Het is geen toeval dat overtuigend ontwerp gewoon lijkt te werken., Wat de meeste van deze ontwerpen gemeen hebben, is het gebruik van gestaltgroepingsprincipes om informatie te organiseren die ons helpt de relaties en verschillen tussen elementen te begrijpen. Als ontwerpers kunnen we deze principes gebruiken om ons eigen boeiende en succesvolle werk te creëren.

laten we beginnen met het Gestaltprincipe van afsluiting.

Closure

volgens de universele principes van Design, stelt dit principe dat we de neiging hebben om een verzameling van individuele elementen als een enkel, herkenbaar patroon, in plaats van meerdere, afzonderlijke delen waar te nemen., Het gebruik van sluiting vermindert effectief de complexiteit door elementen te reduceren tot zo min mogelijk onderdelen die nodig zijn om een object te voltooien. Voorzien van voldoende informatie, vullen we de ontbrekende delen in om een geheel te creëren. Dit wordt bereikt door het gebruik van positieve en negatieve ruimte.

in het voorbeeld hieronder vullen onze geesten de lijnen aan om een cirkel te vormen, ook al bestaat de vorm niet. Positieve en negatieve ruimte vormen samen onze perceptie van de cirkel.,

sluiting kan worden gebruikt om ons objecten of patronen te laten waarnemen met behulp van de kleinste hoeveelheid informatie. Onze geest staat zo te popelen om de ontbrekende informatie in te vullen dat het met zeer weinig elementen kan worden gedaan. Echter, als we niet genoeg informatie geven om het patroon te voltooien, dan kunnen we het object niet waarnemen en de afsluiting faalt, waardoor de cirkel veel moeilijker te vormen is in onze gedachten. Neem een kijkje en kijk of je het kunt voltooien in je geest. Het is een stuk moeilijker, niet?, We kunnen het nu niet helemaal samenbrengen met de schaarse hoeveelheid informatie die wordt gegeven.

creëren van effectieve afsluiting

De voorbeelden hierboven zijn zeer eenvoudige illustraties van hoe we patronen waarnemen om sluiting te vormen. In werkelijkheid zijn er veel visuele elementen die we kunnen gebruiken om effectieve afsluiting te vormen:

• positieve en negatieve ruimte. Zoals eerder vermeld, combineren positieve en negatieve ruimte in sluiting tot een geheel., Dit kan worden bereikt door te zoeken naar de verborgen vormen in de negatieve ruimte van een ontwerp of binnen het type. Bovendien, het verwijderen van elementen van de voorgrond kan interessante negatieve vormen te creëren, en te doen, vereenvoudigen een ontwerp.
• Contrast. De sleutel tot het vormen van sluiting is het creëren van een sterk contrast tussen de voorgrond elementen en de achtergrond. Zoals altijd zorgt Zwart en wit voor het beste contrast, maar je kunt ook experimenteren met complementaire kleuren voor een sterk contrast.
• kleur., Kleur voegt niet alleen leven toe aan een ontwerp, het kan ook worden gebruikt om relaties te versterken, vooral als het gebruik van abstracte vormen om vormen te vertegenwoordigen.

alle sluitingen gebruiken veel, zo niet alle bovenstaande visuele elementen. Met behulp van deze en experimenteren met vermindering van uw ontwerpen zal u helpen nieuwe vormen te ontdekken. Laten we nu eens kijken naar afsluiting in de echte wereld en zien hoe het allemaal samenkomt.

Closure in de praktijk

door middel van closure kunnen we de elementen verminderen die nodig zijn om visuele informatie over te brengen, de complexiteit verminderen en ontwerpen aantrekkelijker maken., Een van de meest voorkomende toepassingen van sluiting is in het ontwerp van bedrijfslogo ‘ s, juist omdat sluiting Een ontwerp kan vereenvoudigen om snel de identiteit van een merk over te brengen.

Hieronder is het beroemde logo dat we herkennen als de NBC peacock. Als je het huidige logo (rechts) vergelijkt met het oude logo, kun je zien dat ze niet Wild verschillen. Maar door de elementen te verminderen en met negatieve ruimte te werken, wordt het huidige logo veel eenvoudiger en eleganter., Sluiting wordt met succes bereikt met behulp van Strak gegroepeerde, positieve vormen als veren, met onze perceptie van het lichaam van de Pauw gevormd door het gebruik van de negatieve witte ruimte in het midden.

een ander goed herkend logo dat met succes sluit is van FedEx., In dit logo wordt de sluiting bereikt met negatieve witruimte, waarbij de delen van de hoofdletters E en de kleine letters x worden gebruikt om de bekende vooruit bewegende pijl te vormen. De ontwerper experimenteerde met vele ontwerpen, waarbij hij uiteindelijk de letters dichter en dichter bij elkaar trok totdat hij de pijl tussen de e en x zag vormen. Dit toont aan dat experimenteren met vermindering van uw ontwerpen, en het zoeken naar de ruimtes ertussen, fantastische resultaten kan opleveren. Voor het verhaal achter de creatie van het logo, check out Matthew May ‘ S Grote artikel op Fast Company. Zie je de pijl in het logo?, Vanaf nu zul je het nooit meer missen!

De voorbeelden hierboven zijn bekende logo ‘ s die sluiting op enigszins voor de hand liggende manieren gebruiken. Er zijn echter minder bekende logo ‘ s die de sluiting subtieler gebruiken. Houzz maakt bijvoorbeeld meer conceptueel gebruik van sluiting. Op het eerste gezicht kunnen de groene, zwart-witte vormen lijken op een plank, een deel van een gebouw of een wandpatroon, wat suggereert waar de website over gaat., Maar een nadere blik onthult ook iets anders. Het verlangen van onze geest om de ruimtes en complete patronen in te vullen stelt ons in staat om de afzonderlijke vormen te combineren tot een geheel, dat een hoofdletter H vormt in de driedimensionale ruimte.

hoewel afsluiten geweldig is voor het maken van interessante logo ‘ s, kan het ook op andere manieren werken., Websites kunnen ook positieve en negatieve ruimte gebruiken in het ontwerp van hun interfaces om effectieve sluiting te produceren. Hieronder gebruikt het Uncrate-logo positieve ruimte tegen een zwarte, negatieve achtergrond om de letters van het logo te vormen en de branding van de site te creëren. Dit is ook een goed voorbeeld van figuur-grond waar we binnenkort op ingaan.

Closure gebruiken bij het maken van pictogrammen

pictogrammen zijn handig voor wanneer we een boodschap moeten overbrengen of een concept binnen een kleine ruimte moeten versterken. Ze moeten eenvoudig zijn en gestript tot aan hun basiselementen om mensen te helpen snel hun betekenis te begrijpen. Sluiting werkt goed in het creëren van pictogrammen, gebruik te maken van positieve en negatieve ruimte om de complexiteit te verminderen, terwijl nog steeds suggereren vormen of objecten die we waarnemen als gehelen, zoals in deze voorbeelden van de website van het zelfstandig naamwoord Project.,

Abstracte afsluiting

afsluiting kan vrij abstract worden en ons nog steeds in staat stellen herkenbare patronen te vormen. Een van mijn favoriete toepassingen van sluiting is in de Google doodle., Google maakt gebruik van sluiting vaak in zijn doodles, vertrouwen op onze inherente noodzaak om de ontbrekende informatie in te vullen om een heel object te maken. Google doodles zijn afhankelijk van onze bekendheid met het Google-logo dat ons in staat stelt om de afbeelding hieronder te lezen, ondanks het feit dat het zeer abstracte vormen bevat. Hier, kleur helpt om de relatie tussen elke letter van Google ‘ s logo te versterken en.,

zoals u kunt zien, kunnen we met behulp van positieve en negatieve ruimte creatief, en het verminderen van elementen in onze ontwerpen, een aantal echt interessante ontwerpen maken met sluiting. We kunnen profiteren van de noodzaak om de ontbrekende onderdelen in te vullen om de complexiteit te verminderen en onze ontwerpen te vereenvoudigen., Vervolgens gaan we kijken hoe we positieve en negatieve ruimte kunnen gebruiken om goede relaties te creëren.

Figure-Ground

Wat is het principe van figure-ground? Volgens universele ontwerpprincipes is figuurgrond de staat waarin we elementen waarnemen als ofwel de objecten van focus of de achtergrond. Net als sluiting werkt figuuraarde door het gebruik van positieve en negatieve ruimte. Figure-ground bestaat in vrijwel alles wat we visueel waarnemen, of een scène, een compositie, een website, een logo of een icoon.,

figuur-grond is stabiel wanneer objecten te onderscheiden zijn van de achtergrond en de achtergrond heeft geen interesse. Stabiele figuur-grond biedt een setting voor objecten en stelt ons in staat om de aandacht te richten waar we het willen. We zien de afbeelding hieronder bijvoorbeeld als een cirkel op een achtergrond. De cirkel is de focus en houdt onze aandacht terwijl de achtergrond van weinig belang is. Dit voorbeeld vertoont een sterke figuur-grond stabiliteit als de figuur heeft vorm en wordt gezien als vooraan, terwijl de achtergrond is vormloos, voortzetting achter de figuur op een verdere diepte.,

wanneer de figuur-grond niet stabiel is, zoals in het voorbeeld hieronder, wordt perceptuele ambiguïteit geïntroduceerd en worden de relaties tussen elementen onduidelijk. In dit opzettelijk oversimplificeerde voorbeeld zijn de figuur en de grond omkeerbaar, waardoor we afwisselen tussen het zien van het ene item en dan het andere als de figuur en dan de grond.

echter, dubbelzinnigheid is niet noodzakelijk een slechte zaak., Dit gebrek aan stabiliteit kan in ons voordeel worden gebruikt bij het ontwerpen. Doelbewust destabiliseren van de figuur-grond relatie kan leiden tot onenigheid of spanning, het toevoegen van opwinding en interesse aan onze ontwerpen. Een van mijn favoriete toepassingen van deze spanning in figuur-grond is in de Criminal Underworld poster serie van Simon C. Page. Hier destabiliseert Page opzettelijk figuur en grond, waarbij het principe tegen zichzelf wordt opgezet als figuur en grond vechten om onze aandacht, net als de held en schurk in de poster tegen elkaar vechten.,

creëren van goede figuur-grond relaties

Er zijn veel visuele elementen die we kunnen gebruiken om de figuur-grond relatie in onze ontwerpen te versterken. Het gebruik van deze elementen kan ons helpen de aandacht te richten waar we het willen, en helpen bij de memorabiliteit van een website of ander ontwerp:

• Contrast., Wit of zwart, gecombineerd met kleur, zoals te zien is in de criminele onderwereld posters, zorgt voor een zeer sterk contrast. Ook complementaire kleuren zijn uitstekend voor het creëren van contrast. Als zuivere kleuren te intens zijn, verander dan de waarde (hoe donker of licht de kleur is) om effectiever contrast te creëren.
• kleur. Warme kleuren, zoals geel, Sinaasappels en rood, worden als naderend ervaren en kunnen worden gebruikt om figuur te versterken. Koele kleuren, zoals paars, blauw en groen, worden gezien als terugwijkende en kunnen worden gebruikt om grond te versterken.
• grootte., Wanneer een groot element het grootste deel van de grond vult, zal het worden gezien als de figuur. Omgekeerd, een klein element binnen een grote grond zal worden gezien als de figuur.
• positie. Elementen in lagere gebieden zullen worden waargenomen als figuur, terwijl elementen in hogere gebieden zal worden waargenomen als grond. Dit speelt met onze waarneming van afstand, zoals we waarnemen objecten geplaatst in lagere gebieden om dichter bij ons en objecten geplaatst in hogere gebieden om verder weg te zijn.
• Focus., Elementen die in focus zullen worden waargenomen als figuur, terwijl elementen die uit focus, wazig, vervaagd, of getint, zal worden waargenomen als grond.

De meeste goede figuur-grond relaties worden gecreëerd met een combinatie van veel van deze visuele elementen. Volgende, laten we eens een kijkje nemen op een aantal real-world voorbeelden en zien hoe deze elementen samenwerken om een succesvolle figuur-grond te creëren.,

figuur-grond in de praktijk

het voorbeeld van figuur-grond in de Criminal Underworld poster serie hierboven toont het principe in een onstabiele toestand, waar figuur en grond vechten om aandacht. Onstabiele figuur-grond werkt goed als er weinig elementen en het ontwerp is eenvoudig. Dit hoeft echter niet noodzakelijk het gewenste gebruik van het principe te zijn wanneer we websites ontwerpen, hoewel dat afhankelijk is van de inhoud en context van de website. Websites moeten complexe informatie overbrengen en toch duidelijk en bruikbaar zijn., Met stabiele figuur-grond, kunnen we de aandacht leiden waar we het willen en elke dubbelzinnigheid van de boodschap die we proberen te communiceren vermijden.

bekijk het voorbeeld hieronder op de Apple Music-website. Hoogstwaarschijnlijk wordt je oog getrokken naar het beeld van de smartphone, die, samen met de kopie links ervan, de figuurelementen zijn. Terwijl de achtergrond begint te vechten voor onze aandacht, worden de figuurelementen versterkt door het gebruik van meerdere visuele elementen. Ten eerste wordt het cijfer versterkt door een groot exemplaar en het grote formaat van de smartphone., Het plaatsen van de smartphone aan de onderkant van het scherm helpt ook bij het naar voren brengen van figuur. De figuur wordt verder versterkt door de video-animatie op de achtergrond terug te kleuren, waardoor de grond afneemt. Tot slot zorgt het contrast tussen het heldere scherm en de donkere achtergrond voor een goede scheiding tussen figuur en grond.

In het volgende voorbeeld, van Naya ‘ s website, is de grootte van de figuur het sterkste visuele element dat wordt gebruikt om een goede figuur-grond te creëren. Hier zien we de vrouw (en haar zeer grote hoed!) als figuur als ze het grootste deel van de grond vult. Bovendien helpt het gebruik van een koele kleur op de achtergrond, evenals slim gebruik van overlappende elementen, bij het helpen van de achtergrond wijken. Tot slot is er, net als het Apple Music-voorbeeld, een goed contrast tussen de voorgrond en de achtergrond.,

tot slot is het uitstekende contrast tussen figuur en grond de sterkte van de website van R/m Design School. Hier vertoont het menu sterk contrast, met behulp van heldere kleur en zwart om figuur van de grond te scheiden. Bovendien wordt warme kleur gebruikt om de perceptie van de figuur die naar ons toe komt te versterken. Wil je niet gewoon die rode tegels pakken?,

conclusie

inzicht in het gebruik van sluiting en figuur-grond zal u helpen sterke relaties en verschillen tussen elementen in uw ontwerpen op te bouwen.,

• bekijk de negatieve ruimte net zo goed als de positieve ruimte om interessante vormen te ontdekken;
• speel rond met het verwijderen van elementen op de voorgrond en gebruik de negatieve ruimte om vormen te vormen;
• ten slotte meng visuele elementen zoals contrast, kleur, grootte, positie en focus om zowel stabiele als instabiele figuur-grond relaties te creëren.

nu je weet hoe je deze twee principes in je werk moet gebruiken, ga je gang en creëer je eigen boeiende en succesvolle ontwerpen!,

in het derde en laatste deel van deze serie zullen we ons richten op de principes van continuation en common fate, waarbij beweging betrokken is, zowel impliciet als geanimeerd, om relaties te creëren.

Resources And Good Reads

• “Gestalt Principles” on Scholarpedia.Universal Principles of Design revised and updated: 125 manieren om de bruikbaarheid te verbeteren, perceptie te beïnvloeden, aantrekkingskracht te vergroten, betere ontwerpbeslissingen te nemen en te onderwijzen door middel van ontwerp door William Lidwell, Kritina Holden en Jill Butler. Rockport Pub, 2010.,
• Informatievisualisatie: perceptie voor ontwerp door Colin Ware. Elsevier, 2012.

• Design Principles: Visual Perception And the Principles of Gestalt
• verbinden en scheiden van elementen door Contrast en gelijkenis
• compositorische balans, symmetrie en asymmetrie
• Hoe kunt u uw e-Mailworkflow verbeteren met modulair ontwerp

(ml, da, og, jb, il)