förbättra dina mönster med principerna för stängning och Figure-Ground (del 2)

har du någonsin undrat hur element samlas för att skapa framgångsrika mönster? Det är ingen slump att övertygande design bara verkar fungera., Vad de flesta av dessa mönster har gemensamt är användningen av gestalt gruppering principer för att organisera information som hjälper oss att förstå relationer och skillnader mellan element. Som designers kan vi använda dessa principer för att skapa vårt eget engagerande och framgångsrika arbete.

låt oss börja med gestalt-principen om stängning.

stängning

enligt de universella principerna för Design anger denna princip att vi har en tendens att uppfatta en uppsättning enskilda element som ett enda, igenkännligt mönster, snarare än flera enskilda delar., Att använda stängning minskar effektivt komplexiteten genom att minska element till minsta möjliga delar som behövs för att slutföra ett objekt. Försedd med tillräckligt med information, kommer vi att fylla i de saknade delarna för att skapa en helhet. Detta uppnås genom användning av positivt och negativt utrymme.

i exemplet nedan Slutför våra sinnen linjerna för att bilda en cirkel, även om formen inte existerar. Positivt och negativt utrymme kombineras för att bilda vår uppfattning om cirkeln.,

stängning kan användas för att få oss att uppfatta objekt eller mönster med den minsta mängden information. Våra sinnen är så angelägna om att fylla i den saknade informationen att det kan göras med mycket få element. Men om vi inte ger tillräckligt med information för att slutföra mönstret kan vi inte uppfatta objektet och stängningen misslyckas, vilket gör cirkeln mycket svårare att bilda i våra sinnen. Ta en titt och se om du kan slutföra det i ditt sinne. Det är mycket svårare, eller hur?, Vi kan inte riktigt sätta ihop det nu med den glesa mängden information som ges.

skapa effektiv stängning

exemplen ovan är mycket grundläggande illustrationer av hur vi uppfattar mönster för att bilda stängning. I verkligheten finns det många visuella element som vi kan använda för att hjälpa oss att skapa effektiv stängning:

• positivt och negativt utrymme. Som tidigare nämnts kombineras positivt och negativt utrymme i stängning för att bilda en helhet., Detta kan uppnås genom att leta efter de dolda formerna i det negativa utrymmet i en design eller inom Typ. Dessutom kan borttagning av element från förgrunden skapa intressanta negativa former, och därigenom förenkla en design.
• kontrast. Nyckeln till att bilda stängning skapar en stark kontrast mellan förgrundselementen och bakgrunden. Som alltid skapar svartvitt den bästa kontrasten, men du kan också experimentera med kompletterande färger för stark kontrast också.
• färg., Färg lägger inte bara livet till en design, det kan också användas för att förstärka relationer, speciellt om man använder abstrakta former för att representera former.

all stängning använder många om inte alla ovanstående visuella element. Med hjälp av dessa och experimentera med minskning av din design hjälper dig att upptäcka nya former. Låt oss nu ta en titt på stängning i den verkliga världen och se hur allt kommer ihop.

stängning I praktiken

med stängning kan vi minska de element som behövs för att förmedla visuell information, minska komplexiteten och göra mönster mer engagerande., En av de vanligaste användningsområdena för stängning är i utformningen av företagslogotyper, just för att stängning kan förenkla en design för att snabbt förmedla ett varumärkes identitet.

sett nedan är den berömda logotypen vi känner igen som NBC peacock. När du jämför den nuvarande logotypen (till höger) med den gamla logotypen kan du se att de inte är väldigt olika. Men genom att minska elementen och arbeta med negativt utrymme blir den nuvarande logotypen mycket mer förenklad och elegant., Stängning uppnås framgångsrikt med hjälp av tätt grupperade, positiva former som fjädrar, med vår uppfattning om påfågelns kropp bildad genom användning av det negativa vita utrymmet i mitten.

en annan välkänd logotyp som använder stängning framgångsrikt är från FedEx., I denna logotyp uppnås stängning med negativt vitt utrymme, med hjälp av delarna av versaler E och små bokstäver x för att bilda den välbekanta framåtgående pilen. Designern experimenterade med många mönster, så småningom dra bokstäverna närmare och närmare varandra tills han såg pilen bildas mellan E och x. Detta visar att experimentera med minskning av din design, och letar efter mellanslag däremellan, kan ge fantastiska resultat. För historien bakom skapandet av logotypen, kolla Matthew mays stora artikel på Fast Company. Kan du se pilen i logotypen?, Du kommer aldrig att missa det från och med nu!

exemplen ovan är välkända logotyper som använder stängning på något uppenbara sätt. Det finns dock mindre kända logotyper som använder stängning mer subtilt. Till exempel använder Houzz stängning mer begreppsmässigt. Vid första anblicken kan de gröna, svarta och vita formerna likna en hylla, en del av en byggnad eller väggmönster, vilket tyder på vad webbplatsen handlar om., Men en närmare titt avslöjar något annat också. Vårt sinne önskan att fylla i utrymmen och kompletta mönster gör det möjligt för oss att kombinera de separata formerna i en helhet, bildar en versal h i tredimensionellt utrymme.

medan stängning är bra för att skapa intressanta logotyper kan det också fungera på andra sätt., Webbplatser kan också använda positivt och negativt utrymme i utformningen av sina gränssnitt för att producera effektiv stängning. Nedan använder Uncrate-logotypen positivt utrymme mot en svart, negativ bakgrund för att bilda bokstäverna i sin logotyp och skapa varumärkningen av webbplatsen. Detta är också ett bra exempel på figur-marken som vi kommer att komma in inom kort.

använda stängning när du skapar ikoner

ikoner är användbara för när vi behöver förmedla ett meddelande eller förstärka ett koncept inom ett litet utrymme. De måste vara enkla och avskalade till sina grundläggande element för att hjälpa människor att snabbt förstå deras mening. Stängning fungerar bra i skapandet av ikoner, utnyttja positivt och negativt utrymme för att minska komplexiteten, samtidigt som man föreslår former eller objekt som vi uppfattar som helheter, som i dessa exempel från Substantivprojektets hemsida.,

Abstrakt stängning

stängning kan bli ganska abstrakt och tillåter oss fortfarande att bilda igenkännliga mönster. En av mina favorit användningsområden för stängning är i Google doodle., Google använder stängning ofta i sina klotter, förlitar sig på vårt inneboende behov av att fylla i den saknade informationen för att skapa ett helt objekt. Google doodles beror på vår förtrogenhet med Googles logotyp som tillåter oss att läsa bilden nedan trots innehåller mycket abstrakta former. Här bidrar färg till att stärka förhållandet mellan varje bokstav i Googles logotyp också.,

som du kan se, med hjälp av positivt och negativt utrymme kreativt och minska element i våra mönster, kan vi skapa några riktigt intressanta mönster med stängning. Vi kan dra nytta av behovet av att fylla i de saknade delarna för att minska komplexiteten och förenkla våra mönster., Därefter tar vi en titt på hur vi kan använda positivt och negativt utrymme för att skapa bra figure-ground relationer.

Figure-Ground

vad är principen om figure-ground? Enligt universella designprinciper är figurjord det tillstånd där vi uppfattar element som antingen fokusens eller bakgrunden. Liksom stängning fungerar figure-ground genom användning av positivt och negativt utrymme. Figur-marken finns i praktiskt taget allt vi visuellt uppfattar, oavsett om en scen, en komposition, en webbplats, en logotyp eller en ikon.,

figur-marken är stabil när objekt är urskiljbara från bakgrunden och bakgrunden har inget intresse. Stabil figur-ground ger en inställning för objekt och tillåter oss att fokusera uppmärksamhet där vi vill ha det. Till exempel uppfattar vi bilden nedan som en cirkel på en bakgrund. Cirkeln är fokus och håller vår uppmärksamhet medan bakgrunden är av litet intresse. Detta exempel uppvisar stark figur-Mark stabilitet som figuren har form och uppfattas vara framför, medan bakgrunden är formlös, fortsätter bakom figuren på ett ytterligare djup.,

När figur-marken inte är stabil, som i exemplet nedan introduceras perceptuell tvetydighet och relationerna mellan elementen blir oklara. I detta avsiktligt förenklade exempel är figuren och marken reversibel, vilket får oss att växla mellan att se ett objekt och sedan det andra som figuren och sedan marken.

tvetydighet är dock inte nödvändigtvis en dålig sak., Denna brist på stabilitet kan användas till vår fördel vid utformningen. Målmedvetet destabilisera figur-Mark relation kan införa oenighet eller spänning, lägga spänning och intresse för våra mönster. En av mina favorit användningsområden för denna spänning i figure-ground är i Criminal Underworld affisch serien av Simon C. Page. Här, sida medvetet destabiliserar figur och mark, pitting principen mot sig själv som figur och marken slåss för vår uppmärksamhet, ungefär som hjälten och skurken i affischen kampen mot varandra.,

skapa bra Figure-Ground relationer

det finns många visuella element som vi kan använda för att förstärka figure-ground relation i våra mönster. Att använda dessa element kan hjälpa oss att fokusera uppmärksamhet där vi vill ha det, hjälpa till med att memorera en webbplats eller annan design:

• kontrast., Vit eller svart, parat med färg, som ses i kriminella underjorden affischer, skapar mycket stark kontrast. På samma sätt är kompletterande färger utmärkt för att skapa kontrast. Om rena färger är för intensiva, ändra värdet (hur mörk eller ljus färgen är) för att skapa mer effektiv kontrast.
• färg. Varma färger, såsom gulnar, Apelsiner och röda, uppfattas som närmar sig och kan användas för att stärka figuren. Coola färger, som purpur, blues och gröna, uppfattas som vikande och kan användas för att stärka marken.
• storlek., När ett stort element fyller majoriteten av marken kommer det att uppfattas som figuren. Omvänt kommer ett litet element inom en stor mark att uppfattas som figuren.
• Position. Element placerade i nedre områden kommer att uppfattas som figur medan element placerade i övre områden kommer att uppfattas som mark. Detta spelar med vår uppfattning om avstånd, eftersom vi uppfattar objekt placerade i lägre områden för att vara närmare oss och objekt placerade i övre områden för att vara längre bort.
• fokus., Element som är i fokus kommer att uppfattas som figur medan element som är ur fokus, suddiga, bleka eller tonade, kommer att uppfattas som marken.

de flesta bra figur-mark relationer skapas med en kombination av många av dessa visuella element. Låt oss sedan ta en titt på några verkliga exempel och se hur dessa element fungerar tillsammans för att skapa framgångsrik figur-ground.,

Figure-Ground i praktiken

exemplet på figure-ground i den kriminella underjorden affisch serien ovan visar principen i ett instabilt tillstånd, där figur och marken slåss varandra för uppmärksamhet. Ostabil figur-marken fungerar bra när det finns få element och designen är enkel. Detta kan dock inte nödvändigtvis vara den önskade användningen av principen när vi utformar webbplatser, även om det beror på webbplatsens innehåll och sammanhang. Webbplatser måste förmedla komplex information och fortfarande vara tydliga och användbara., Med stabil figure-ground kan vi vägleda uppmärksamhet där vi vill ha det och undvika tvetydighet i meddelandet vi försöker kommunicera.

ta en titt på exemplet nedan från Apple Music-webbplatsen. Mest troligt är ditt öga ritat till bilden av smarttelefonen, som tillsammans med kopian till vänster om den är figurelementen. Medan bakgrunden börjar kämpa för vår uppmärksamhet, förbättras figurelementen genom användning av flera visuella element. Först stärks figuren genom stor kopia och smartphoneens stora storlek., Positionering av smarttelefonen längst ner på skärmen hjälper också till att föra figuren framåt. Figuren förbättras ytterligare genom att tona tillbaka videoanimationen i bakgrunden, vilket gör att marken recede. Slutligen ger kontrast mellan den ljusa skärmen och den mörka bakgrunden god separation mellan figur och mark.

i nästa exempel, från Nayas hemsida, är storleken på figuren det starkaste visuella elementet som används för att skapa bra figur-Mark. Här uppfattar vi kvinnan (och hennes mycket stora hatt!) som siffra som hon fyller majoriteten av marken. Dessutom hjälper användningen av en cool färg i bakgrunden, liksom smart användning av överlappande element, att hjälpa bakgrunden att återgå. Slutligen, som Apple Music-exemplet, finns det bra kontrast som skiljer förgrunden från bakgrunden.,

slutligen är utmärkt kontrast mellan figur och mark styrkan på R/M Design skolans hemsida. Här uppvisar menyn stark kontrast, med ljus färg och svart för att skilja figuren från marken. Dessutom används varm färg för att stärka uppfattningen av figuren som kommer mot oss. Don ’ t du bara vill nå ut och ta dessa röda plattor!,

slutsats

att förstå hur man använder stängning och figure-ground hjälper dig att bygga starka relationer och skillnader mellan element i din design.,

• titta på det negativa utrymmet lika mycket som det positiva utrymmet för att upptäcka intressanta former;
• leka med att ta bort element i förgrunden och använda det negativa utrymmet för att bilda former istället;
• slutligen blanda visuella element som kontrast, färg, storlek, position och fokus för att skapa både stabila och instabila figurjordrelationer.

Nu när du vet hur du använder dessa två principer i ditt arbete, gå ut och skapa dina egna engagerande och framgångsrika mönster!,

i den tredje och sista delen av denna serie fokuserar vi på principerna om fortsättning och gemensamt öde, vilket innebär rörelse, både underförstådd och animerad, för att skapa relationer.

resurser och bra läser

• ”Gestalt principer” på Scholarpedia.
• universella principer för Design reviderad och uppdaterad: 125 sätt att förbättra användbarheten, påverka uppfattningen, öka överklagandet, göra bättre designbeslut och undervisa genom design av William Lidwell, Kritina Holden och Jill Butler. Rockport Pub, 2010.,
• information visualisering: perception för design av Colin Ware. Elsevier, 2012.

• designprinciper: visuell Perception och principerna för Gestalt
• ansluta och separera element genom kontrast och likhet
• Kompositionsbalans, symmetri och asymmetri
• hur du förbättrar din e-post arbetsflöde med modulär Design

(ml, da, og, jb, il)