Forbedre Dine Design Med Principperne For Lukning Og Figur Jorden (Del 2)

Om Forfatteren

Jon var en visuel designer for mange år, før den springer til interaktionsdesign., Han har en master ‘ s degree in Human-Computer Interaktion fra DePaul …Mere aboutJon↬

har du nogensinde spekuleret på, hvordan elementer samles for at skabe succesfulde designs? Det er ikke tilfældigt, at overbevisende design bare ser ud til at fungere., Hvad de fleste af disse designs har til fælles er brugen af gestaltgrupperingsprincipper til at organisere information, der hjælper os med at forstå forholdet og forskellene mellem elementer. Som designere kan vi bruge disse principper til at skabe vores eget engagerende og succesrige arbejde.

lad os begynde med Gestaltprincippet om lukning.

lukning

i henhold til de universelle designprincipper siger dette princip, at vi har en tendens til at opfatte et sæt individuelle elementer som et enkelt genkendeligt mønster snarere end flere individuelle dele., Brug af lukning reducerer effektivt kompleksiteten ved at reducere elementer til færrest mulige dele, der er nødvendige for at fuldføre et objekt. Forsynet med tilstrækkelig information, vil vi udfylde de manglende dele til at skabe en helhed. Dette opnås ved brug af positivt og negativt rum.

i eksemplet nedenfor afslutter vores sind linjerne for at danne en cirkel, selvom formen ikke findes. Positiv og negativ plads kombineres for at danne vores opfattelse af cirklen.,

Afslutning, kan bruges til at gøre os til at opfatte objekter eller mønstre ved hjælp af den mindste mængde af information. Vores sind er så ivrige efter at udfylde de manglende oplysninger, at det kan gøres med meget få elementer. Men hvis vi ikke giver nok information til at fuldføre mønsteret, kan vi ikke opfatte objektet, og lukningen mislykkes, hvilket gør cirklen meget vanskeligere at danne i vores sind. Tag et kig og se om du kan fuldføre det i dit sind. Det er meget vanskeligere, er det ikke?, Vi kan ikke helt sætte det sammen nu med den sparsomme mængde information, der gives.

Oprettelse af en Effektiv Lukning

ovenstående eksempler er meget grundlæggende illustrationer af, hvordan vi opfatter mønstre at danne lukning. I virkeligheden er der mange visuelle elementer, som vi kan bruge til at hjælpe os med at danne effektiv lukning:

• positivt og negativt rum. Som tidligere nævnt kombineres positivt og negativt rum i lukning for at danne en helhed., Dette kan opnås ved at kigge efter de skjulte former i det negative rum af et design eller inden for type. Derudover kan fjernelse af elementer fra forgrunden skabe interessante negative former, og dermed forenkle et design.
• kontrast. Nøglen til at danne lukning skaber en stærk kontrast mellem forgrundselementerne og baggrunden. Som altid skaber sort og hvid den bedste kontrast, men du kan også eksperimentere med komplementære farver for stærk kontrast.
• farve., Farve tilføjer ikke kun liv til et design, det kan også bruges til at styrke relationer, især hvis du bruger abstrakte former til at repræsentere former.

Al lukning bruger mange, hvis ikke alle de ovennævnte visuelle elementer. Ved hjælp af disse og eksperimentere med reduktion i dine designs vil hjælpe dig med at opdage nye former. Lad os nu tage et kig på lukning i den virkelige verden og se, hvordan det hele kommer sammen.

Lukning i praksis

Ved hjælp af lukning kan vi reducere de elementer, der er nødvendige for at formidle visuel information, reducere kompleksiteten og gøre design mere engagerende., En af de mere almindelige anvendelser af lukning er i design af firmalogoer, netop fordi lukning kan forenkle et design for hurtigt at formidle et brands identitet.

ses nedenfor er det berømte logo, vi genkender som NBC peacock. Når du sammenligner det aktuelle logo (til højre) med det gamle logo, kan du se, at de ikke er vildt forskellige. Men ved at reducere elementerne og arbejde med negativt rum bliver det nuværende logo meget mere forenklet og elegant., Lukning opnås med succes ved hjælp af tæt grupperede, positive former som fjer, med vores opfattelse af påfuglens krop dannet ved brug af det negative hvide rum i midten.

en Anden velkendt logo, der beskæftiger lukning med succes er fra FedEx., I dette logo opnås lukning med negativt hvidt rum ved hjælp af delene af store bogstaver E og små bogstaver x til at danne den velkendte fremadrettede pil. Designeren eksperimenterede med mange designs, til sidst trækker bogstaverne tættere og tættere sammen, indtil han så pilen dannes mellem e og.. dette viser, at eksperimentere med reduktion i dine designs, og leder efter mellemrummet imellem, kan give fantastiske resultater. For historien bag oprettelsen af logoet, tjek Matthe.May ‘ s store artikel hos Fast Company. Kan du se pilen i logoet?, Du vil aldrig gå glip af det fra nu af!

eksemplerne ovenfor er velkendte logoer, der bruger lukning på noget åbenlyse måder. Der er dog mindre berømte logoer, der bruger lukning mere subtilt. For eksempel, Hou.. beskæftiger lukning mere konceptuelt. Ved første øjekast, den grønne, sort og hvid figurer kan ligne en hylde, en del af en bygning, eller væg mønster, tyder på, hvad hjemmesiden handler om., Men et nærmere kig afslører også noget andet. Vores sinds ønske om at udfylde rummene og komplette mønstre giver os mulighed for at kombinere de separate former i en helhed og danne en stor bogstav H i tredimensionelt rum.

mens lukning er fantastisk til oprettelse af interessante logoer, kan det også fungere på andre måder., Websebsteder kan også bruge positivt og negativt rum i designet af deres grænseflader til at producere effektiv lukning. Under, Uncrate-logoet bruger positivt rum mod en sort, negativ baggrund til at danne bogstaverne i sit logo og skabe branding af siteebstedet. Dette er også et godt eksempel på figurgrund, som vi snart kommer ind på.

Bruger Lukning, Når du Opretter Ikoner

Ikoner er nyttigt, når vi skal formidle et budskab eller styrke et koncept inden for et lille rum. De skal være enkle og strippet ned til deres grundlæggende elementer for at hjælpe folk med hurtigt at forstå deres betydning. Lukning fungerer godt i oprettelsen af ikoner ved hjælp af positivt og negativt rum for at mindske kompleksiteten, mens det stadig antyder former eller objekter, som vi opfatter som helhed, som i disse eksempler fra Noun-projektets websiteebsted.,

abstrakt lukning

Lukning kan blive ret abstrakt og giver os stadig mulighed for at danne genkendelige mønstre. En af mine foretrukne anvendelser af lukning er i Google doodle., Google beskæftiger lukning ofte i sine kruseduller, bygger på vores iboende behov for at udfylde de manglende oplysninger for at skabe et helt objekt. Google doodles afhænger af vores kendskab til Google-logoet, som giver os mulighed for at læse billedet nedenfor på trods af at de indeholder meget abstrakte former. Her hjælper farve også med at styrke forholdet mellem hvert bogstav i Googles logo.,

Som du kan se, ved hjælp af positive og negative rum kreativt, og at reducere elementer i vores design, kan vi skabe nogle rigtig spændende designs med lukning. Vi kan drage fordel af behovet for at udfylde de manglende dele for at mindske kompleksiteten og forenkle vores design., Næste, vi vil tage et kig på, hvordan vi kan bruge positiv og negativ plads til at skabe gode figur-jorden relationer.

figur-Ground

Hvad er princippet om figur-ground? Ifølge universelle principper for Design, figur-jorden er den tilstand, hvor vi opfatter elementer som enten objekter af fokus eller baggrunden. Ligesom lukning fungerer figur-ground ved hjælp af positivt og negativt rum. Figur-ground findes i stort set alt, hvad vi visuelt opfatter, om en scene, en komposition, en hjemmeside, et logo eller et ikon.,

figur-jorden er stabil, når objekter kan skelnes fra baggrunden, og baggrunden har ingen interesse. Stabil figur-ground giver en indstilling for objekter og giver os mulighed for at fokusere opmærksomheden, hvor vi ønsker det. For eksempel opfatter vi billedet nedenfor som en cirkel på en baggrund. Cirklen er fokus og holder vores opmærksomhed, mens baggrunden er af ringe interesse. Dette eksempel udviser stærk figur-ground stabilitet som figuren har form og opfattes at være foran, mens baggrunden er formløs, fortsætter bag figuren på en yderligere dybde.,

Når figur-jorden er ikke stabil, som i eksemplet nedenfor, perceptuelle tvetydighed er indført, og de relationer mellem elementer bliver uklart. I dette bevidst overforenklede eksempel er figuren og jorden reversibel, hvilket får os til at skifte mellem at se et element og derefter det andet som figuren og derefter jorden.

Men, flertydighed ikke nødvendigvis en dårlig ting., Denne mangel på stabilitet kan bruges til vores fordel ved design. Målrettet destabilisering af forholdet mellem figur og jord kan introducere uenighed eller spænding, hvilket tilføjer spænding og interesse for vores design. En af mine foretrukne anvendelser af denne spænding i figur-ground er i Criminal under Underworldorld poster series af Simon C. Page. Her, Side bevidst destabiliserer figur og baggrund, grubetæring princippet mod sig selv som figur og baggrund kæmpe om vores opmærksomhed, ligesom helten og skurken i den plakat kamp mod hinanden.,

at Skabe God Figur-Grund Forhold

Der er mange visuelle elementer, som vi kan bruge til at styrke figure-ground forhold i vores designs. Brug af disse elementer kan hjælpe os med at fokusere opmærksomheden, hvor vi ønsker det, hjælpe med at huske et websiteebsted eller andet design:

• kontrast., Hvid eller sort, parret med farve, som det ses i de kriminelle underverden plakater, skaber meget stærk kontrast. Ligeledes er komplementære farver fremragende til at skabe kontrast. Hvis rene farver er for intense, skal du ændre værdien (hvor mørk eller lys farven er) for at skabe mere effektiv kontrast.
• farve. Varme farver, såsom gule, appelsiner og røde, opfattes som nærmer sig og kan bruges til at styrke figur. Kølige farver, såsom lilla, blå og grønne, opfattes som tilbagegående og kan bruges til at styrke jorden.
• størrelse., Når et stort element fylder størstedelen af jorden, vil det blive opfattet som figuren. Omvendt vil et lille element inden for en stor jord opfattes som figuren.
• Position. Elementer placeret i nedre områder vil blive opfattet som figur, mens elementer placeret i øvre områder vil blive opfattet som jorden. Dette spiller med vores opfattelse af afstand, da vi opfatter objekter placeret i lavere områder for at være tættere på os og objekter placeret i øvre områder for at være længere væk.
• fokus., Elementer, der er i fokus, vil blive opfattet som figur, mens elementer, der er ude af fokus, sløret, falmet eller tonet, vil blive opfattet som jorden.

de fleste gode figur-ground relationer er skabt med en kombination af mange af disse visuelle elementer. Næste, lad os tage et kig på nogle virkelige verden eksempler og se, hvordan disse elementer arbejder sammen om at skabe en vellykket figur-ground.,

Figur-Grund I Praksis

som eksempel figur-grund i den Kriminelle Underverden plakat serie ovenfor viser princippet i en ustabil tilstand, hvor figur og baggrund, kæmpe mod hinanden om opmærksomheden. Ustabil figur-jorden fungerer godt, når der er få elementer, og designet er enkelt. Dette kan dog ikke nødvendigvis være den ønskede brug af princippet, når vi designer websebsteder, selvom det afhænger af indholdet og konteksten på websiteebstedet. Websebsites har brug for at formidle komplekse oplysninger og stadig være klar og brugbar., Med stabil figur-ground, kan vi guide opmærksomhed, hvor vi ønsker det, og undgå enhver tvetydighed af det budskab, vi forsøger at kommunikere.

se på eksemplet nedenfor fra Apple Music-websiteebstedet. Mest sandsynligt er dit øje trukket til billedet af smartphonen, som sammen med kopien til venstre for den er figurelementerne. Mens baggrunden begynder at kæmpe for vores opmærksomhed, forbedres figurelementerne ved hjælp af flere visuelle elementer. Først figur styrkes gennem stor kopi og den store størrelse af smartphone., Placering af smartphone i bunden af skærmen hjælper også med at bringe figur fremad. Figuren forbedres yderligere ved at farve videoanimationen tilbage i baggrunden, hvilket får jorden til at trække sig tilbage. Endelig giver kontrast mellem den lyse skærm og den mørke baggrund god adskillelse mellem figur og jord.

I det næste eksempel, fra Naya ‘ s hjemmeside, størrelsen af figur er det stærkeste visuelle element, der anvendes til at skabe en god figur-grund. Her opfatter vi kvinden (og hendes meget store hat!) som figur som hun fylder størstedelen af jorden. Desuden hjælper brugen af en kølig farve i baggrunden samt smart brug af overlappende elementer med at hjælpe baggrunden med at falde. Endelig, som Apple Music-eksemplet, er der god kontrast, der adskiller forgrunden fra baggrunden.,

Endelig, fremragende kontrast mellem figur og baggrund er styrken af R/m Design Skolens hjemmeside. Her menuen udviser stærk kontrast, ved hjælp af lyse farver og sort til at adskille figur fra jorden. Derudover bruges varm farve til at styrke opfattelsen af figuren, der kommer mod os. Vil du ikke bare nå ud og få fat i de røde fliser!,

Konklusion

at Forstå, hvordan at bruge lukning og figur jorden, som vil hjælpe dig med at opbygge stærke relationer og forskelle mellem elementer i dit design.,

• Se på det negative rum lige så meget som den positive rum til at opdage interessante former;
• Spille rundt med at fjerne elementer i forgrunden og bruge det negative rum til at danne figurer i stedet;
• Endelig, mix visuelle elementer, såsom kontrast, farve, størrelse, position og fokus på at skabe både stabile og ustabile figure-ground forhold.

nu hvor du ved, hvordan du bruger disse to principper i dit arbejde, skal du gå videre og oprette dine egne engagerende og succesrige designs!,

i den tredje og sidste del af denne serie fokuserer vi på principperne om Fortsættelse og fælles skæbne, som involverer bevægelse, både underforstået og animeret, for at skabe relationer.

ressourcer og god læsning

• “Gestalt principper” på Scholarpedia.
• Universelle Principper for Design revideret og opdateret: 125 måder til at forbedre brugervenligheden, indflydelse opfattelse, øge appel, lave bedre design beslutninger, og lære gennem design af William Lidwell, Kritina Holden og Jill Butler. Rockport Pub, 2010.,
• Information visualisering: perception for design af Colin .are. Elsevier, 2012.

• Design Principper: Visuel Perception Og Principperne For Gestalt
• at Forbinde Og Adskille Elementer Gennem Kontrast Og Lighed
• Kompositorisk Balance, Symmetri Og Asymmetri
• Hvordan man kan Forbedre Din e-Mail-Workflow Med Modulære Design

(ml, da, og, jb, il)