Design Principper: Rum-Og Figur-Grund Forholdet

Om Forfatteren

Steven Bradley er forfatter af Design Fundamentals: Elementer, Attributter, & Principper og CSS-Animationer og Overgange til det Moderne internet., Når den ikke er …Mere aboutSteven Bradley↬

• 10 min at læse
• Inspiration,Design,Kreativitet,Design Principper
• Gemte til offline-læsning
• Dele på Twitter, LinkedIn

Hvis du ser grafisk design som en proces med at arrangere figurer på et lærred, så du kun ser halvdelen af, hvad du arbejder med. Det negative rum på lærredet er lige så vigtigt som de positive elementer, vi placerer på lærredet.,

Design er et arrangement af både former og rum. For at arbejde mere effektivt med rummet skal du først blive opmærksom på det og lære at se det — lær at se de former, som rummet danner, og hvordan rummet kommunikerer. Dette er anden del af en serie om designprincipper for begyndere. Den første del dækkede en introduktion til gestalt; resten af serien (inklusive dette indlæg) vil bygge videre på disse gestalt-principper og vise, hvor mange af de grundlæggende principper, vi arbejder med, da designere har deres oprindelse der.,

forholdet mellem figur og jord

gestaltprincippet, der gælder mest for rummet, er det for figur-jord. Alt i dit design vil blive set som det ene eller det andet, og forholdet mellem dem er gensidigt eksklusivt. Hverken kan opfattes undtagen i forhold til den anden, og at ændre den ene er umulig uden at ændre den anden også.

forholdet mellem figur og jord er også komplementært. Figur og jord kan forbedre eller forringe hinanden, og organisere de to i forhold til hinanden er en af de mere vigtige aspekter af design., Det sætter en kontekst for, hvordan dit design kommunikerer, og hvordan det vil blive fortolket.

“hvidt rum skal betragtes som et aktivt element, ikke en passiv baggrund.”
— Jan Tschichold

I den tredje panel, to af de sorte streger er blevet fjernet. Dette aktiverer rummet, så det ser ud til at sidde oven på det grå felt., Jorden er blevet figuren og tilføjer mere dybde til designet.

Der er tre typer af figure-ground forhold:

• Stabil (ovenfor til venstre)
  Det er klart, hvad der er figur og hvad der er på jorden. Den ene eller den anden dominerer normalt sammensætningen.
• reversibel(over midten)
  både figur og jord tiltrækker seerens opmærksomhed lige., Dette skaber spænding, hvorved enten kan overhale den anden, hvilket fører til et dynamisk design.
• tvetydige (over højre)
  elementer kan synes at være både figur og jord samtidigt. De danner lige så interessante figurer, og seeren er tilbage for at finde deres eget indgangspunkt i kompositionen.

afhængigt af hvilket forhold du opretter, og hvordan du balancerer både figur og jord, Leder du publikum til at se på forskellige dele af designet og fortolke, hvad de ser i forskellige sammenhænge.,

figur-jorden er ikke det eneste gestaltprincip, hvor rummet spiller en fremtrædende rolle. To andre er disse:

• nærhed
  nærhed bruger plads til at forbinde og adskille elementer ved at omslutte nogle elementer i rummet. Et eksempel, vi måske tager for givet, er tekstafsnit på siden. Mellemrummet mellem afsnit er større end mellemrummet mellem tekstlinjer i et afsnit.
• lukning
  Dette gør brug af plads som mellemrum mellem elementer. Seerne udfylder hullerne med deres egne oplysninger for at fuldføre en helhed fra delene. For meget plads og ingen lukning sker., For lidt plads og ingen lukning er nødvendig. Kun den korrekte balance mellem plads og udfyldt plads aktiverer rummet og fører til lukning.

Plads Som Et Design Element

Tænk om musik for et øjeblik. Hvis hver note eller akkord blev spillet på samme tid, ville du ikke have musik. Du ville have støj. Musik opstår, når lyde kontrasteres mod stilhed. Varierende mønster af lyd og stilhed skaber rytme og melodi., Uden stilheden er der ingen musik.

mellemrum udfører den samme funktion visuelt. Det giver positive elementer plads til at trække vejret. Det giver øjet frihed til at bevæge sig gennem et design og opdage de elementer, det leder efter. Det positive ses kun i modsætning til det negative. Uden plads har du ikke design. Du har visuel støj.

medmindre støj er det, du forsøger at kommunikere, skal du læne dig mod rummet. Folk er mindre tilbøjelige til at klage over for meget plads end om for lidt.,

mellemrum kan gøre følgende:

• etablere kontrast, vægt og hierarki;
• generer drama og spænding;
• give visuel hvile mellem grupper af elementer.

som figur-jordforholdet indebærer, har du kun plads, når der er noget inde i det. Før tilsætning af positive elementer er rummet udefineret. Forholdet mellem figur og jord skal etableres, før rummet kan eksistere, og dets kommunikation begynder.

en af de vigtigste funktioner i rummet er at forbedre læsbarheden og læsbarheden., Makro-plads gør tekst mere indbydende. Mikrorum gør det mere læseligt.

• Micro-space
  Dette er plads i elementer i en gruppe. Det er mellemrummet mellem bogstaver, ord og afsnit.
• Makrorum
  Dette er mellemrum mellem hovedelementer. Det adskiller elementer eller grupper af elementer og giver muligheder for øjet at følge og steder at hvile mellem elementer.

mellemrum korrelerer med kvalitet. Mere plads medfører færre elementer eller en sjældenhed af elementer. Sammenlign high-end og discount butikker., Hvilken har typisk mere plads inde, og hvilken pakker produkter ind i hver en smule ledig plads? Hvad kommunikerer rummet til dig?

Plads kan også formidle attributter andre end kvalitet, såsom:

• raffinement,
• enkelhed,
• luksus,
• forrige
• ensomhed,
• åbenhed.

du spilder plads, når du undlader at overveje det. Du kan spilde plads ved at overfylde det. Du kan spilde plads ved at fange det inde i elementer i et design og ikke lade det oprette forbindelse til andet rum i designet.,

Design er i sidste ende et arrangement af former, og det inkluderer de former, der er dannet af rummet. Vær ikke bange for at bruge plads. Se det som et vigtigt designelement under din kontrol.

et par eksempler på plads på Websebsteder

for bedre at bruge plads skal du først blive bevidst opmærksom på det. Lær at genkende plads i forskellige designs. Bemærk den form, den danner, og tænk over, hvad rummet kommunikerer. Med henblik herpå, lad os se på udformningen af nogle hjemmesider, tage notits af, hvordan rummet bruges.,

Old Guard

designet af Tom Johnsons Old Guard bruger masser af hvidt rum, hvilket giver tekst og andre elementer plads til at trække vejret. Der er ingen fejl, hvad der er figur og hvad der er jorden.

Information er indeholdt og adskilt af plads (husk nærhedsprincippet), der adskiller grupper af elementer., Du kan nemt fortælle, hvor et indlæg slutter, og det næste begynder, udelukkende af mellemrummet mellem dem.

Hovedindholdet er lidt væk fra midten på siden, med generøs plads på hver side. Dette rum afbrydes lejlighedsvis af elementer, der aktiverer både rummet og de afbrydende elementer. Dette hjælper med at henlede opmærksomheden på området og især elementerne inden for.

Heroku ‘ s Staus side

billedet nedenfor viser en del af status siden for Heroku som værende for det meste plads., Jeg fangede tilfældigvis websiteebstedet på en særlig god dag, fordi yderligere positive elementer ville betyde mere rapporterede hændelser på platformen. Her betyder mere hvidt rum bedre service.

bemærk, hvordan det hvide rum ikke behøver at være hvidt. Mens siden er alt for generøs med plads, er det usandsynligt, at du klager over, at der er for meget af det., Kun vigtige oplysninger — i dette tilfælde statusopdateringer og rapporter om hændelser-Afbryder rummet.

introduktion af romanen

rummet øverst på introduktionen af romanen er asymmetrisk og aktiv. Bemærk, hvordan den store blok plads til venstre fører øjet direkte til indholdet. Hvis du klikker igennem til websiteebstedet og ruller ned fra toppen, vil du se, at rummet også bruges til at adskille og gruppere informationsblokke.

tynde lyslinjer bruges også til at gruppere og adskille disse blokke. Når du ser på websiteebstedet, skal du bemærke, hvordan linjerne ikke altid berører, så pladsen kan flyde omkring dem og oprette forbindelse til andet rum. Dette forhindrer pladsen i at blive fanget.

Elliot Jay Stocks

hjemmesiden til Elliot Jay Stocks skal være kendt for jer alle, da han står bag designet af denne. Asymmetrisk plads på Elliot ‘ s hjemmeside fører igen til active space.,

Det store billede øverst på denne side potentielt kunne stå som en midlertidig blok til at få adgang til indholdet nedenfor, men en generøs mængde af plads ved siden af billedet giver rigelig og indbydende rum for øjet at bevæge sig rundt om det., Hvis sidebjælken til venstre havde den samme baggrundsfarve som hovedindholdet, ville det sandsynligvis være lettere for øjet at bevæge sig rundt i billedet, men farveændringen gør det næppe vanskeligt.

som med websebstederne ovenfor bruges plads til både at vedlægge og adskille grupper af forskellige oplysninger, så hver gruppe kan skille sig ud og lade øjet finde, hvad det vil, og hvile imellem.

Phil Coffman

Indholdet på Phil Coffmans websiteebsted danner en enkelt form, der sidder i det meste tomme rum., Fraværet af mange positive elementer øger betydningen af dem, der er til stede.

selv inden for de farvede rektangulære baggrunde har teksten nok plads omkring den til let at læse og ikke forveksles med en anden kategori af tekst på siden.,

den positive form (og formen på rummet) justerer responsivt til forskellige bro .serbredder, men mønsteret af en enkelt stor form omgivet af plads forbliver.

nye eventyr inden for Webebdesign

som mange af websebstederne her efterlader 2013-websiteebstedet til ne.Adventures in .eb Design conference generøst plads omkring elementer. Forskellige grupper af information er indeholdt af rummet, og rummet er aktivt i hele designet.

noget interessant at bemærke er de grå cirkulære pile mellem billedet øverst til venstre og hovedindholdet til højre.

blokerer disse pile for strømmen af plads? Fordi de ikke rører, og fordi hver er stiplet, hvor det afbryder rummet, kan rummet strømme igennem, selvom det klart er mere begrænset i den strøm.

den lysere grå farve hjælper. Det forhindrer pilene i at dominere, og det er ikke svært at forestille sig, at rummet flyder over linjerne.,i retfærdighed, hvis min bro .ser var bredere, da jeg greb skærmbilledet, ville pilene ikke overlappe med hovedindholdet. Men omkring 1280 pi .els ned til hvor designet bliver en enkelt kolonne, gør de det. Samlet set fungerer det, selvom jeg spekulerer på, om rummet ville flyde bedre uden de tilstedeværende pile.

et par eksempler på logoer

Jeg vil efterlade dig med nogle logoer, hvor rummet er indarbejdet som en integreret del af designet. I stedet for at påpege brugen af plads i hver, vil jeg lave et par generelle kommentarer og så lade dig udforske rummene for dig selv.,

bemærk, hvordan logoerne nedenfor gør brug af figur-jord-forholdet. Med nogle, indtil du ser både figur og jord, kan du ikke se det fulde logo. Begge er nødvendige bidragydere til det, der kommunikeres.

flere af disse logoer er afhængige af lukningsprincippet. Hvad du er beregnet til at se, er ikke rigtig der, men du ser det alligevel. Et par af disse logoer spiller også rundt med figur og jord. Hvad er tallet, når du tager i hele logoet mod baggrunden bliver grund til en mindre figur inden for., Dette reversible figur-jord-forhold er centralt for, hvad der kommunikeres.

• Cloud Bed
• Sort Kat Lounge
• Shift
• Dolphin & Seal Logo Design
• Tandimplantater Guide
• Wineforest

Oversigt

jeg håber, du tager væk i to vigtigste ting fra dette indlæg., For det første er forbindelsen mellem brugen af plads i design og gestaltprincippet for figur-jorden. Gestalt principper ligger til grund for meget af det, vi gør som designere.

for det andet, og måske endnu vigtigere, gør en indsats for at bruge tid på at observere, hvordan plads bruges i design. Lad ikke plads være et biprodukt af dine positive elementer. Lær at designe plads så meget som, hvis ikke mere end, positive elementer. Layoutet på enhver side er i sidste ende en organisering af rummet.

bevidst analysere dette rum, og bevidst bruge det til at skabe et bedre design. Lad det ikke være det, der er tilbage., Se det som et vigtigt designelement, og se derefter forholdet mellem rum og positive elementer som et designelement, som du former.

næste gang tilføjer vi flere gestalt-principper til blandingen og undersøger, hvordan fokuspunkter, fortsættelse og fælles skæbne fører os ind i ideer som visuel vægt og kompositionsbalance.

• Mind Your Da Og græsser: Typografiske Etikette
• Design Principper: Visuel Vægt Og Retning
• Hvordan Geometri, Påvirkninger Logo Design
• Kunst

(al, ml, il)