Forbedre Din Design Med Prinsippene Om Stenging Og Figur-Bakken (Del 2)

Om Forfatteren

Jon var en visuell designer for mange år før du tar spranget til interaksjonsdesign., Han har en mastergrad i Human-Computer Interaction fra DePaul …Mer aboutJon↬

Har du noen gang lurt på hvordan elementene kommer sammen for å skape en vellykket design? Det er ingen tilfeldighet at overbevisende design bare ser ut til å fungere., Hva de fleste av disse designene har felles, er bruk av gestalt-gruppering prinsipper for å organisere informasjon som hjelper oss med å forstå sammenhenger og forskjeller mellom elementer. Som designere, kan vi bruke disse prinsippene for å lage vår egen engasjerende og vellykket arbeid.

La oss begynne med Gestalt prinsippet om stenging.

Nedleggelse

i Henhold til de generelle Prinsippene for Design, dette prinsippet sier at vi har en tendens til å oppfatte et sett av individuelle elementer som en enkelt, gjenkjennelig mønster, snarere enn flere individuelle deler., Ved hjelp av stenging effektivt reduserer kompleksitet ved å redusere elementer til færrest mulige deler som trengs for å fullføre et objekt. Utstyrt med nok informasjon, vil vi fylle ut de manglende deler for å skape en helhet. Dette oppnås gjennom bruk av positive og negative plass.

I eksempelet nedenfor, våre sinn fullføre linjer for å danne en sirkel, selv om formen ikke eksisterer. Positive og negative plass kombineres for å danne vår oppfatning av sirkelen.,

Stenging kan brukes til å få oss til å oppfatte objekter eller mønstre ved hjelp av den minste mengden av informasjon. Våre sinn er så ivrige etter å fylle inn manglende informasjon at det kan gjøres med svært få elementer. Imidlertid, hvis vi ikke gir nok informasjon til å fullføre mønsteret, da vi ikke kan oppfatte objektet og nedleggelse mislykkes, noe som gjør sirkelen mye mer vanskelig å danne seg i våre sinn. Ta en titt og se om du kan fullføre i ditt sinn. Det er mye mer vanskelig, er det ikke?, Vi kan ikke helt sette det sammen nå med den sparsomme mengden av informasjon som er gitt.

å Skape Effektive Nedleggelse

eksemplene ovenfor er svært grunnleggende illustrasjoner av hvordan vi oppfatter mønstre for å danne nedleggelse. I virkeligheten, er det mange visuelle elementer som vi kan bruke til å hjelpe oss med form effektiv lukking:

• Positive og negative plass. Som nevnt tidligere, positive og negative plass kombinere i nedleggelse å danne en helhet., Dette kan oppnås ved å se etter skjulte former i det negative rommet av en design, eller innen typen. I tillegg, fjerne elementer fra forgrunnen kan skape interessante negative former, og på den måten forenkle en design.
• Kontrast. Nøkkelen til å danne nedleggelse er å skape en sterk kontrast mellom forgrunn elementer og bakgrunn. Som alltid, sorte og hvite skaper den beste kontrasten, men du kan også eksperimentere med komplementære farger for sterk kontrast så vel.
• Farge., Fargen ikke bare legger liv til en design, har det også kan brukes til å forsterke relasjoner, spesielt hvis du bruker abstrakte former til å representere former.

Alle nedleggelse bruker mange, om ikke alle av de ovennevnte visuelle elementer. Ved hjelp av disse og eksperimentere med reduksjon i din design vil hjelpe deg å oppdage nye former. La oss nå ta en titt på nedleggelse i den virkelige verden og se hvordan det hele kommer sammen.

Nedleggelse I Praksis

ved Hjelp av nedleggelse, kan vi redusere elementene som trengs for å formidle visuell informasjon, redusere kompleksitet og å lage design til en mer engasjerende., En av de mer vanlige bruker av nedleggelse er i utformingen av firmalogoer, nettopp fordi stenging kan forenkle en design for raskt å formidle en merkevare identitet.

Sett nedenfor er den berømte logoen vi gjenkjenner som NBC peacock. I å sammenligne den nåværende logoen (til høyre) med den gamle logoen, kan du se at de ikke er vidt forskjellig. Men ved å redusere elementer og arbeider med negative plass, den nåværende logoen blir mye enklere og mer elegant., Nedleggelsen lykkes med tett gruppert, positive former som fjær, med vår oppfatning av peacock ‘ legeme dannet gjennom bruk av negative tomrom i midten.

en Annen godt-anerkjent logo som sysselsetter nedleggelse vellykket er fra FedEx., I denne logoen, nedleggelse er oppnådd med negative hvite mellomrom, ved å bruke deler av stor bokstav E og små bokstaver x for å danne kjent fremover-å flytte pilen. Designer eksperimentert med mange utførelser, slutt å trekke bokstaver tettere og tettere sammen, før han så på pilen forming mellom e og x. Dette viser at å eksperimentere med reduksjon i ditt design, og ser for mellomrom i mellom, kan gi fantastiske resultater. For historien bak etableringen av logo, sjekk ut Matteus Mai flott artikkel i Fast Company. Kan du se pilen i logoen?, Du vil aldri gå glipp av det fra nå av!

eksemplene ovenfor er velkjente logoer som bruker avslutning på noe åpenbare måter. Det er imidlertid mindre kjente logoer som bruker nedleggelse mer subtilt. For eksempel, Houzz sysselsetter nedleggelse mer konseptuelt. Ved første øyekast, grønn, svart og hvit figurene kan ligne på en hylle, del av en bygning, eller veggen mønster, noe som tyder på hva nettsiden handler om., Men en nærmere titt avslører noe annet også. Våre sinn er ønske om å fylle inn feltene og komplette mønstre gir oss muligheten til å kombinere separate figurer i en helhet, og danner en stor H i tre-dimensjonale rommet.

Mens nedleggelse er stor for etablering av interessante logoer, det kan fungere på andre måter også., Nettsteder kan også bruke positive og negative plass i utformingen av sine grensesnitt for å produsere effektiv lukking. Nedenfor Uncrate logo bruker positiv plass mot en svart, negative bakgrunnen for å danne brev av sin logo og lage merkevarebygging av området. Dette er også et godt eksempel på figur-grunn som vi vil komme inn om kort tid.

ved Hjelp av Stenging Når du Lager Ikoner

Ikoner er spesielt nyttig når vi har behov for å formidle et budskap eller forsterke et konsept innenfor et lite område. De må være enkle og strippet ned til sine grunnleggende elementer for å hjelpe folk raskt forstå deres betydning. Nedleggelse fungerer godt i etableringen av ikonene, utnytte positive og negative plass til å redusere kompleksitet, samtidig som tyder på figurer eller objekter som vi oppfatter som helheter, som i disse eksemplene fra Substantivet Prosjektets nettside.,

Abstrakt Nedleggelse

Nedleggelse kan bli ganske abstrakt og fortsatt tillater oss å danne gjenkjennelige mønstre. En av mine favoritt bruker av nedleggelse er i Google doodle., Google benytter nedleggelse ofte i sin kruseduller, å stole på vår iboende behov for å fylle inn manglende informasjon til å lage et helt objekt. Google kruseduller avhenger av vår fortrolighet med Google-logoen som gjør det mulig for oss å lese bildet nedenfor tross inneholder svært abstrakte former. Her color bidrar til å styrke forholdet mellom hver bokstav i Googles logo også.,

Som du kan se, bruke positive og negative plass kreativt, og å redusere elementer i våre design, kan vi skape noen virkelig interessante motiver med nedleggelse. Vi kan dra nytte av behovet for å fylle ut de manglende deler for å redusere kompleksiteten og forenkle vår design., Neste, vil vi ta en titt på hvordan vi kan bruke positive og negative plass til å lage god figur-bakken relasjoner.

Figur-Bakken

Hva er prinsippet for figur-grunn? I henhold til Universelle Prinsipper for Utforming, figur-bakken er den staten som vi oppfatter elementer som enten objekter av fokus eller bakgrunnen. Som avslutning, figur-bakken verk gjennom bruk av positive og negative plass. Figur-bakken finnes i praktisk talt alt vi visuelt oppfatter, om en scene, en komposisjon, en nettside, en logo eller et ikon.,

Figur-bakken er stabil når gjenstander er gjenkjennelig fra bakgrunn og bakgrunnen har ingen interesse. Stabil figur-bakken gir en innstilling for objekter og gjør det mulig for oss å sette fokus, der vi vil ha det. For eksempel, vi oppfatter bildet nedenfor som en sirkel på bakgrunnen. Sirkelen er i fokus og har vår oppmerksomhet, mens bakgrunnen er av liten interesse. Dette eksemplet viser sterk figur-bakken stabilitet som figuren har form og er oppfattet å være i front, mens bakgrunnen er formløse, fortsetter bak figuren på en ytterligere dybde.,

Når figur-bakken er ikke stabil, som i eksempelet nedenfor, perseptuelle tvetydighet er innført, og relasjonene mellom elementene er uklart. I dette bevisst oversimplified eksempel-tallet, og bakken er reversible, noe som fører oss til å veksle mellom å se ett element, og deretter den andre som figur og deretter bakken.

Imidlertid tvetydighet er ikke nødvendigvis en dårlig ting., Denne mangelen på stabilitet kan brukes til vår fordel når du utformer. Målbevisst destabiliserende figuren-bakken forhold kan introdusere uenighet eller spenning, legge til spenning og interesse til våre design. En av mine favoritt bruker av denne spenningen i figur-bakken er i den Kriminelle Underverdenen plakat serien av Simon C. Side. Her, Siden bevisst desta-bi-lizes figur og bakken, der prinsippet mot seg selv som figur og bakken kjempe om vår oppmerksomhet, mye som helten og skurken i plakaten kamp mot en annen.,

å Skape God Figur-Bakken Relasjoner

Det er mange visuelle elementer som vi kan bruke til å forsterke figur-bakken forhold i våre design. Ved hjelp av disse elementene kan hjelpe oss å sette fokus, der vi vil ha det, bistå i memorability av et nettsted eller andre design:

• Kontrast., Hvit eller svart, sammen med farge, som vi har sett i den Kriminelle Underverdenen plakater, skaper svært sterk kontrast. Likeledes, komplementære farger er utmerket for å skape kontrast. Hvis rene farger er for intense, endre verdien (hvor mørk eller lys fargen er) for å skape mer effektiv kontrast.
• Farge. Varme farger, som er gule, oransje og røde, blir oppfattet som nærmer seg, og kan brukes til å styrke figur. Kule farger, for eksempel lilla, blå og grønne, blir oppfattet som viker og kan brukes til å styrke bakken.
• Størrelse., Når et stort element fyller de fleste av bakken, vil det bli oppfattet som figuren. I motsatt fall, en liten del i en stor bakke, vil bli oppfattet som figuren.
• Posisjon. Elementene er plassert i lavere områder vil bli oppfattet som en figur, mens elementer plassert i øvre delene vil bli oppfattet som bakken. Dette spiller med vår oppfatning av avstand, som vi oppfatter objekter plassert i lavere områder for å være nærmere til oss og objekter er plassert i øvre delene å være lenger unna.
• Fokus., Elementer som er i fokus, vil bli oppfattet som figur, mens elementer som er ute av fokus, uskarpe, blasse, eller fargede, vil bli oppfattet som bakken.

de Fleste god figur-bakken relasjoner er laget med en kombinasjon av mange av disse visuelle elementene. Neste, la oss ta en titt på noen reelle eksempler og se hvordan disse elementene fungerer sammen for å skape vellykkede figur-bakken.,

Figur-grunn I Praksis

eksempel på figur-grunn i den Kriminelle Underverdenen plakat serien ovenfor viser prinsippet i en ustabil tilstand, der figur og bakken kjemper mot hverandre for å få oppmerksomhet. Ustabil figur-bakken fungerer godt når det er få elementer og design er enkel. Dette kan imidlertid ikke nødvendigvis være den ønskede bruk av prinsippet når vi utformer websider, selv om det avhenger av innholdet og konteksten av nettstedet. Nettsteder trenger for å formidle kompleks informasjon og fortsatt være klart og brukervennlig., Med stabil figur-bakken, vi kan veilede oppmerksomhet der vi vil ha det, og unngå tvetydighet av budskapet vi prøver å kommunisere.

Ta en titt på eksemplet nedenfor fra Apple Musikk-nettsted. Mest sannsynlig, at øyet ikke er trukket til bildet av smarttelefonen, som, sammen med kopi til venstre for det, er det figur elementer. Mens bakgrunnen begynner å kjempe for vår oppmerksomhet, figur elementer er forbedret gjennom bruk av flere visuelle elementer. Første, figur er styrket gjennom store kopiere og den store størrelsen på smarttelefonen., Lokalisering smarttelefonen på bunnen av skjermen bistår også i arbeidet for å finne frem. Figuren er ytterligere forbedret ved å tone tilbake video animasjon i bakgrunnen, noe som fører bakken for å vike. Til slutt, kontrast mellom den lyse skjermen og den mørke bakgrunnen gir god separasjon mellom figur og grunn.

I det neste eksempelet, fra Naya hjemmeside, størrelsen på figuren er den sterkeste visuelle element som brukes til å lage god figur-bakken. Her oppfatter vi at kvinne (og hennes store hatten!) som figur som hun fyller de fleste av bakken. Videre er bruk av en kul farge i bakgrunnen, samt smart bruk av overlappende elementer, bistår i å hjelpe bakgrunnen vike. Til slutt, som Apple Musikk eksempel, det er god kontrast skille forgrunnen fra bakgrunnen.,

til Slutt, utmerket kontrast mellom figur og bakken er styrken av R/m Design Skolens hjemmeside. Her er menyen viser sterk kontrast, ved hjelp av lys farge og sort / hvitt for å skille figur fra bakken. I tillegg, varm farge er brukt til å styrke oppfatningen av figur komme mot oss. Tror ikke du bare ønsker å nå ut og ta tak i de røde fliser!,

Konklusjon

Forstå hvordan å bruke stenging og figur-bakken vil hjelpe deg å bygge sterke relasjoner og forskjeller mellom elementene i din design.,

• Se på de negative plass like mye som en positiv plass til å oppdage interessante former;
• Spille rundt med å fjerne elementer i forgrunnen, og bruk den negative plass til en form i stedet;
• til Slutt, bland visuelle elementer, for eksempel kontrast, farge, størrelse, posisjon og fokus til å lage både stabile og ustabile figur-bakken relasjoner.

Nå som du vet hvordan du skal bruke disse to prinsippene i arbeidet ditt, gå videre og opprette dine egne engasjerende og vellykket design!,

I den tredje og siste delen av denne serien, vil vi fokusere på prinsippene om videreføring og felles skjebne, som involverer bevegelse, både implisitt og animerte, for å skape relasjoner.

Ressurser Og God Leser

• «Gestalt-Prinsipper» på Scholarpedia.
• Universelle Prinsipper for Utforming revidert og oppdatert: 125 måter å forbedre brukervennlighet, påvirke oppfatningen, øke appell, ta bedre design beslutninger, og lære gjennom design av William Lidwell, Kritina Holden og Jill Butler. Rockport Pub, 2010.,
• Informasjon visualisering: persepsjon for design av Colin Ware. Elsevier, 2012.

• Design Prinsipper: Visuell Persepsjon Og Prinsippene For Gestalt
• Koble til Og Skille Elementer Gjennom Kontrast Og Likhet
• Kompositoriske Balanse, Symmetri Og Asymmetri
• Hvordan du kan Forbedre Din E-Arbeidsflyt Med Modulær Design

(ml, da, og, jb, il)