designprinciper: Space och Figure-Ground Relationship

• 10 min läs
• Inspiration,Design,kreativitet,designprinciper
• Sparad för offline läsning
• Dela på Twitter, LinkedIn

om du ser grafisk design som en process för att ordna former på en duk ser du bara hälften av vad du arbetar med. Det negativa utrymmet på duken är lika viktigt som de positiva elementen som vi placerar på duken.,

Design är ett arrangemang av både former och utrymme. För att arbeta mer effektivt med rymden måste du först bli medveten om det och lära dig att se det — lära dig att se de former som rymden bildar och hur rymden kommunicerar. Detta är andra delen av en serie om designprinciper för nybörjare. Den första delen omfattade en introduktion till gestalt; resten av serien (inklusive detta inlägg) kommer att bygga på de gestalt-principerna och visa hur många av de grundläggande principerna vi arbetar med som designers har sitt ursprung där.,

Figure-Ground Relationship

gestaltprincipen som gäller mest för rymden är den för figure-ground. Allt i din design kommer att ses som det ena eller det andra, och förhållandet mellan dem är ömsesidigt uteslutande. Varken kan uppfattas utom i förhållande till den andra, och ändra en är omöjligt utan att ändra den andra också.

figurgrundsförhållandet kompletterar också varandra. Figur och mark kan förbättra eller förringa varandra, och organisera de två i förhållande till varandra är en av de viktigaste aspekterna av design., Det sätter ett sammanhang för hur din design kommunicerar och hur det kommer att tolkas.

”vitt utrymme ska betraktas som ett aktivt element, inte en passiv bakgrund.”
— Jan Tschichold

i den tredje Panelen har två av de svarta linjerna tagits bort.borttagen. Detta aktiverar utrymmet, vilket gör att det verkar sitta ovanpå det grå fältet., Marken har blivit figuren och lägger till mer djup i designen.

det finns tre typer av figurjordrelationer:

• stabil (ovanför vänster)
  det är klart vad som är figur och vad som är markerat. Den ena eller den andra dominerar vanligtvis kompositionen.
• reversibel (ovanför mitten)
  både figur och mark lockar betraktarens uppmärksamhet lika., Detta skapar spänning, varigenom antingen kan köra den andra, vilket leder till en dynamisk design.
• tvetydiga (ovanför höger)
  element kan tyckas vara både figur och mark samtidigt. De bildar lika intressanta former, och tittaren lämnas för att hitta sin egen ingångspunkt i kompositionen.

beroende på vilket förhållande Du ställer in och hur du balanserar både figur och mark, riktar du publiken att titta på olika delar av designen och tolka vad de ser i olika sammanhang.,

figur-marken är inte den enda gestaltprincipen där rymden spelar en framträdande roll. Två andra är dessa:

• Proximity
  Proximity använder utrymme för att ansluta och separera element genom att innesluta vissa element i rymden. Ett exempel som vi kan ta för givet är textstycken på sidan. Utrymmet mellan styckena är större än utrymmet mellan textraderna i ett stycke.
• stängning
  Detta använder utrymme som luckor mellan element. Tittarna fyller i luckorna med sin egen information för att slutföra en helhet från delarna. För mycket utrymme och ingen stängning inträffar., För lite utrymme och ingen stängning behövs. Endast rätt balans mellan utrymme och ifyllt utrymme aktiverar utrymmet och leder till stängning.

utrymme som designelement

Tänk på musik för ett ögonblick. Om varje anteckning eller ackord spelades samtidigt, skulle du inte ha musik. Du skulle ha oväsen. Musik uppstår när ljud kontrasteras mot tystnad. Att variera mönstret av ljud och tystnad skapar rytm och melodi., Utan tystnaden finns det ingen musik.

Space utför samma funktion visuellt. Det ger positiva element utrymme att andas. Det ger ögat frihet att gå igenom en design och att upptäcka de element som den Letar efter. Det positiva ses endast i motsats till det negativa. Utan utrymme har du inte design. Du har Visuellt Ljud.

om inte buller är vad du försöker kommunicera, luta dig mot rymden. Människor är mindre benägna att klaga på för mycket utrymme än om för lite.,

utrymme kan göra följande:

• upprätta kontrast, betoning och hierarki;
• generera drama och spänning;
• ge visuell vila mellan grupper av element.

som figure-ground-förhållandet innebär, Har du bara utrymme när något är närvarande inuti det. Före tillsatsen av positiva element är utrymmet odefinierat. Förhållandet mellan figur och mark måste fastställas innan rymden kan existera och kommunikationen börjar.

en av de viktigaste funktionerna i rymden är att förbättra läsbarhet och läsbarhet., Makro-space gör text mer inbjudande. Mikroutrymme gör det mer läsbart.

• Micro-space
  Detta är utrymme inom element i en grupp. Det är utrymmet mellan bokstäver, ord och stycken.
• Makro-space
  Detta är utrymme mellan stora element. Det separata element eller grupper av element och ger vägar för ögat att följa och platser att vila mellan element.

Utrymme korrelerar till kvalitet. Mer utrymme medför färre element eller en sällsynthet av element. Jämför high-end och rabatt butiker., Vilken har vanligtvis mer utrymme inuti, och vilken packar produkter i varje bit av tillgängligt utrymme? Vad kommunicerar utrymmet till dig?

utrymme kan också förmedla andra attribut än kvalitet, till exempel:

• sofistikering,
• enkelhet,
• lyx,
• renlighet,
• ensamhet,
• öppenhet.

du slösar utrymme när du misslyckas med att överväga det. Du kan slösa utrymme genom att överfylla den. Du kan slösa utrymme genom att fånga den inuti delar av en design och inte låta den ansluta till annat utrymme i designen.,

Design är i slutändan ett arrangemang av former, och det inkluderar de former som bildas av rymden. Var inte rädd för att använda utrymme. Se det som ett viktigt designelement under din kontroll.

några exempel på utrymme på webbplatser

för att bättre använda utrymme måste du först bli medveten om det. Lär dig att känna igen utrymme i olika utföranden. Lägg märke till den form den bildar och tänk på vad utrymmet kommunicerar. För detta ändamål, låt oss titta på utformningen av vissa webbplatser, med notis om hur utrymme används.,

gammal vakt

utformningen av Tom Johnsons gamla vakt använder gott om vitt utrymme, vilket ger text och andra element utrymme att andas. Det går inte att misstänka vad som är figur och vad som är marken.

informationen finns och separeras av rymden (minns principen om närhet), särskiljande grupper av element., Du kan enkelt berätta var ett inlägg slutar och nästa börjar, enbart av utrymmet mellan dem.

huvudinnehållet är något av mitten på sidan, med generöst utrymme på vardera sidan. Detta utrymme avbryts ibland av element, vilket aktiverar både utrymmet och de avbrytande elementen. Detta bidrar till att uppmärksamma området och särskilt elementen inom.

Herokus Staus-sida

bilden nedan visar en del av statussidan för Heroku som mestadels utrymme., Jag råkade fånga webbplatsen på en särskilt bra dag, eftersom ytterligare positiva element skulle innebära mer rapporterade incidenter på plattformen. Här betyder mer vitt utrymme bättre service.

Lägg märke till hur det vita utrymmet inte behöver vara vitt. Medan sidan är alltför generös med utrymme, är det osannolikt att du klagar på att det finns för mycket av det., Endast viktig information — i det här fallet, statusuppdateringar och rapporter om incidenter — avbryter utrymmet.

introducerar romanen

utrymmet överst på introduktionen av romanen är asymmetrisk och aktiv. Lägg märke till hur det stora blocket av utrymme till vänster leder ögat direkt till innehållet. Om du klickar till webbplatsen och bläddrar ner från toppen ser du att utrymmet också används för att separera och gruppera informationsblock.

tunna ljuslinjer används också för att gruppera och separera dessa block. När du tittar på webbplatsen märker du hur linjerna inte alltid rör, så att utrymmet kan flöda runt dem och ansluta till annat utrymme. Detta förhindrar att utrymmet fastnar.

Elliot Jay lager

webbplatsen för Elliot Jay lager bör vara bekant för er alla, eftersom han är bakom utformningen av denna. Asymmetriskt utrymme på Elliots hemsida leder igen till aktivt utrymme.,

den stora bilden längst upp på denna sida kan potentiellt stå som ett tillfälligt block för att komma åt innehållet nedan; men en generös mängd utrymme bredvid bilden ger gott och inbjudande utrymme för ögat att flytta runt det., Om sidofältet till vänster hade samma bakgrundsfärg som huvudinnehållet, skulle det förmodligen vara lättare för ögat att flytta runt bilden, men färgförändringen gör det knappast svårt.

som med webbplatserna ovan används utrymme för att både bifoga och separera grupper av distinkt information, så att varje grupp kan sticka ut och låta ögat hitta vad det vill och vila däremellan.

Phil Coffman

innehållet på Phil Coffmans hemsida bildar en enda form som sitter i mestadels tomt utrymme., Frånvaron av många positiva element ökar betydelsen av de som är närvarande.

även inom de färgade rektangulära bakgrunderna har texten tillräckligt med utrymme runt det för att enkelt läsas och inte misstas för en annan kategori av text på sidan.,

den positiva formen (och formen på utrymmet) anpassar sig ansvarsfullt till olika webbläsarbredder, men mönstret av en enda stor form omgiven av utrymme kvarstår.

nya äventyr i webbdesign

liksom många av webbplatserna här lämnar 2013-webbplatsen för de nya äventyren i Web Design conference generösa rum runt element. Distinkta grupper av information finns i rymden, och utrymmet är aktivt i hela designen.

något intressant att notera är de grå cirkulära pilarna mellan bilden i övre vänstra och huvudinnehållet till höger.

blockerar dessa pilar flödet av utrymme? Eftersom de inte rör och eftersom varje är streckad där det avbryter utrymmet, kan utrymmet strömma igenom, även om det är klart mer begränsat i det flödet.

den ljusare grå färgen hjälper. Det hindrar pilarna från att dominera, och det är inte svårt att föreställa sig det utrymme som flyter över linjerna.,

i rättvisans namn, om min webbläsare var bredare när jag tog skärmdumpen, skulle pilarna inte överlappa med huvudinnehållet. Men runt 1280 pixlar ner till där designen blir en enda kolumn, gör de. Sammantaget fungerar det, även om jag undrar om utrymmet skulle flöda bättre utan pilarna närvarande.

några exempel på logotyper

Jag lämnar dig med några logotyper där utrymme ingår som en integrerad del av designen. Istället för att påpeka användningen av utrymme i varje, ska jag göra några allmänna kommentarer och sedan låta dig utforska utrymmena för dig själv.,

Lägg märke till hur logotyperna nedan använder sig av figure-ground-förhållandet. Med några, tills du ser både figur och mark, ser du inte hela logotypen. Båda är nödvändiga bidragsgivare till vad som kommuniceras.

flera av dessa logotyper är beroende av principen om stängning. Vad du är menad att se är inte riktigt där, men du ser det ändå. Några av dessa logotyper spelar också runt med figur och mark. Vad är figur när du tar in hela logotypen mot bakgrunden blir marken för en mindre siffra inom., Denna reversibla figur-Mark relation är central för vad som kommuniceras.

• Cloud Bed
• Black Cat Lounge
• Shift
• Dolphin & Seal Logo Designer
• tandimplantat Guide
• Wineforest

sammanfattning

Jag hoppas att du tar bort två Huvudimplantat saker från det här inlägget., Först är sambandet mellan användningen av utrymme i design och gestaltprincipen för figurjord. Gestalt principer underligt mycket av vad vi gör som designers.

För det andra, och kanske ännu viktigare, anstränga sig för att spendera tid att observera hur utrymme används i design. Låt inte utrymme vara en biprodukt av dina positiva element. Lär dig att designa utrymme så mycket som, om inte mer än, positiva element. Layouten på en sida är i slutändan en organisation av rymden.

medvetet analysera det utrymmet, och medvetet använda den för att skapa en bättre design. Låt det inte vara det som är kvar., Se det som ett viktigt designelement och se sedan förhållandet mellan utrymme och positiva element som ett designelement som du formar.

nästa gång lägger vi till fler gestaltprinciper i mixen och utforskar hur kontaktpunkter, fortsättning och gemensamt öde leder oss till idéer som visuell vikt och kompositionsbalans.

• Tänk på din En och Em streck: typografisk etikett
• designprinciper: visuell vikt och riktning
• hur geometri påverkar Logo Design
• om konst

(al, ml, il)