Îmbunătățească Desene Cu Principiile De Închidere Și Figura-Sol (Partea 2)

Despre Autor

Jon a fost un designer vizual pentru mulți ani înainte de a face saltul de la design de interacțiune., El are o diplomă de master în Interacțiunea Om-Calculator de la DePaul …Mai mult aboutJon↬

v-ați întrebat vreodată cât de elemente vin împreună pentru a crea modele de succes? Nu este un accident că designul convingător pare să funcționeze., Ceea ce au în comun majoritatea acestor modele este utilizarea principiilor de grupare gestalt pentru a organiza informații care ne ajută să înțelegem relațiile și diferențele dintre elemente. Ca designeri, putem folosi aceste principii pentru a crea propria noastră lucrare de succes și de succes.să începem cu principiul Gestalt al închiderii.conform principiilor universale ale designului, acest principiu afirmă că avem tendința de a percepe un set de elemente individuale ca un model unic, recunoscut, mai degrabă decât mai multe părți individuale., Utilizarea închiderii reduce în mod eficient complexitatea prin reducerea elementelor la cele mai puține părți posibile necesare pentru a finaliza un obiect. Furnizate cu suficiente informații, vom completa părțile lipsă pentru a crea un întreg. Acest lucru se realizează prin utilizarea spațiului pozitiv și negativ.

în exemplul de mai jos, mințile noastre completează liniile pentru a forma un cerc, chiar dacă forma nu există. Spațiul pozitiv și negativ se combină pentru a forma percepția noastră asupra cercului.,

Închidere poate fi folosit pentru a ne face să percepem obiecte sau modele, folosind cea mai mică cantitate de informații. Mințile noastre sunt atât de dornice să completeze informațiile lipsă încât se poate face cu foarte puține elemente. Cu toate acestea, dacă nu furnizăm suficiente informații pentru a completa modelul, atunci nu putem percepe obiectul și închiderea eșuează, făcând cercul mult mai dificil de format în mintea noastră. Aruncați o privire și vedeți dacă o puteți completa în mintea voastră. E mult mai dificil, nu-i așa?, Nu putem pune totul împreună acum cu cantitatea redusă de informații oferite.

Crearea Eficientă de Închidere

În exemplele de mai sus sunt foarte simple ilustrații de cum percepem noi modele pentru a forma închidere. În realitate, există multe elemente vizuale pe care le putem folosi pentru a ne ajuta să formăm o închidere eficientă:

• spațiu pozitiv și negativ. Așa cum am menționat mai devreme, spațiul pozitiv și negativ se combină în închidere pentru a forma un întreg., Acest lucru poate fi realizat prin căutarea formelor ascunse în spațiul negativ al unui design sau în interiorul tipului. În plus, eliminarea elementelor din prim-plan poate crea forme negative interesante și, în acest sens, poate simplifica un design.
• Contrast. Cheia pentru formarea închiderii este crearea unui contrast puternic între elementele din prim plan și fundal. Ca întotdeauna, alb-negru creează cel mai bun contrast, dar puteți experimenta și culori complementare pentru un contrast puternic.
• culoare., Culoarea nu numai că adaugă viață unui design, ci poate fi folosită și pentru a consolida relațiile, mai ales dacă folosiți forme abstracte pentru a reprezenta forme.

Toate closure utilizează multe, dacă nu toate elementele vizuale de mai sus. Utilizarea acestora și experimentarea cu reducerea desenelor vă vor ajuta să descoperiți noi forme. Să aruncăm acum o privire la închidere în lumea reală și a vedea cum totul vine împreună.folosind closure, putem reduce elementele necesare pentru a transmite informații vizuale, reducând complexitatea și făcând design-urile mai captivante., Una dintre cele mai frecvente utilizări ale închiderii este în proiectarea logo-urilor companiei, tocmai pentru că închiderea poate simplifica un design pentru a transmite rapid identitatea unei mărci.

văzut mai jos este faimosul logo pe care îl recunoaștem ca peacock NBC. Comparând logo-ul curent (din dreapta) cu logo-ul vechi, puteți vedea că acestea nu sunt extrem de diferite. Dar prin reducerea elementelor și lucrul cu spațiul negativ, logo-ul actual devine mult mai simplificat și mai elegant., Închiderea se realizează cu succes folosind forme bine grupate, pozitive ca pene, cu percepția noastră asupra corpului păunului format prin utilizarea spațiului alb negativ din mijloc.

Un alt logo bine recunoscut care utilizează închiderea cu succes este de la FedEx., În acest logo, închiderea se realizează cu spațiu alb negativ, folosind părțile majuscule E și minuscule x pentru a forma săgeata familiară în mișcare înainte. Proiectantul experimentat cu multe modele, în cele din urmă trăgând literele mai aproape și mai aproape împreună până când a văzut săgeata formând între E și x. Acest lucru arată că experimentarea cu reducerea desene, și caută spațiile între, poate da rezultate fantastice. Pentru povestea din spatele creării logo-ului, consultați marele articol al lui Matthew May la Fast Company. Poți vedea săgeata din logo?, Nu veți pierde niciodată de acum încolo!

exemplele de mai sus sunt logo-uri bine-cunoscute care utilizează închiderea în moduri oarecum evidente. Cu toate acestea, există logo-uri mai puțin cunoscute care folosesc închiderea mai subtil. De exemplu, Houzz folosește închiderea Mai conceptual. La prima vedere, formele verde, alb-negru pot semăna cu un raft, o parte a unei clădiri sau un model de perete, sugerând despre ce este vorba pe site., Dar o privire mai atentă dezvăluie și altceva. Dorința minții noastre de a completa spațiile și modelele complete ne permite să combinăm formele separate într-un întreg, formând o majusculă H în spațiul tridimensional.

deși închiderea este excelentă pentru crearea de logo-uri interesante, poate funcționa și în alte moduri., Site-urile web pot utiliza, de asemenea, spațiu pozitiv și negativ în proiectarea interfețelor lor pentru a produce o închidere eficientă. Mai jos, logo-ul Uncrate folosește spațiu pozitiv pe un fundal negru, Negativ pentru a forma literele logo-ului său și pentru a crea brandingul site-ului. Acesta este, de asemenea, un bun exemplu de figura-sol care vom ajunge în scurt timp.

utilizarea închiderii la crearea pictogramelor

pictogramele sunt utile atunci când trebuie să transmitem un mesaj sau să consolidăm un concept într-un spațiu mic. Ei trebuie să fie simpli și dezbrăcați până la elementele lor de bază pentru a ajuta oamenii să înțeleagă rapid semnificația lor. Închiderea funcționează bine în crearea icoanelor, utilizând spațiul pozitiv și negativ pentru a reduce complexitatea, sugerând în același timp forme sau obiecte pe care le percepem ca întreg, ca în aceste exemple de pe site-ul proiectului Noun.,

Abstract de Închidere

Închidere poate obține destul de abstract și încă ne permită să formeze modele recunoscute. Una dintre utilizările mele preferate de închidere este în Google doodle., Google folosește închiderea adesea în Doodle – urile sale, bazându-se pe nevoia noastră inerentă de a completa informațiile lipsă pentru a crea un întreg obiect. Google doodles depinde de familiaritatea noastră cu logo-ul Google, care ne permite să citim imaginea de mai jos, în ciuda faptului că conține forme foarte abstracte. Aici, culoarea ajută la consolidarea relației dintre fiecare literă a logo-ului Google.,

după Cum puteți vedea, folosind pozitive și negative spațiu creativ, și reducerea elemente din modelele noastre, putem crea niste modele interesante cu închidere. Putem profita de necesitatea de a completa piesele lipsă pentru a reduce complexitatea și a simplifica desenele noastre., Apoi, vom arunca o privire la modul în care putem folosi spațiul pozitiv și negativ pentru a crea relații bune figura-sol.

Figure-Ground

care este principiul figure-ground? Conform principiilor universale ale designului, figura-sol este starea în care percepem elementele fie ca obiecte de focalizare, fie ca fundal. Ca și închiderea, figura-sol funcționează prin utilizarea spațiului pozitiv și negativ. Figure-ground există practic în tot ceea ce percepem vizual, fie o scenă, o compoziție, un site web, un logo sau o pictogramă.,

figura-sol este stabil atunci când obiectele se disting de fundal și fundalul deține nici un interes. Stabil figura-Sol oferă o setare pentru obiecte și ne permite să se concentreze atenția în cazul în care ne-o dorim. De exemplu, percepem imaginea de mai jos ca un cerc pe fundal. Cercul este în centrul atenției și ne ține atenția, în timp ce fundalul este de puțin interes. Acest exemplu prezintă o puternică stabilitate figura-sol ca figura are forma și este percepută a fi în față, în timp ce fundalul este informă, continuând în spatele figura la o adâncime suplimentară.,

atunci Când figura-sol nu este stabil, ca în exemplul de mai jos, perceptuale ambiguitate este introdus și relațiile dintre elemente devin neclare. În acest exemplu în mod deliberat suprasimplificat, figura și solul sunt reversibile, determinându-ne să alternăm între a vedea un element și apoi celălalt ca figura și apoi solul.

cu toate Acestea, ambiguitatea nu este neapărat un lucru rău., Această lipsă de stabilitate poate fi folosită în avantajul nostru la proiectare. Destabilizarea intenționată a relației figură-sol poate introduce discordie sau tensiune, adăugând entuziasm și interes pentru desenele noastre. Una dintre utilizările mele preferate ale acestei tensiuni în figura-sol este în seria Poster Criminal Underworld de Simon C. Page. Aici, Page destabilizează în mod deliberat figura și pământul, punând principiul împotriva lui însuși, deoarece figura și pământul se luptă pentru atenția noastră, la fel ca eroul și ticălosul din lupta posterului unul împotriva celuilalt.,

Crearea Figură Bună-Sol Relații

Există multe elemente vizuale pe care o putem folosi pentru a consolida figura-sol relație cu proiectele noastre. Utilizarea acestor elemente ne poate ajuta să ne concentrăm atenția acolo unde dorim, asistând la memorabilitatea unui site web sau a unui alt design:

• Contrast., Albul sau negrul, asociat cu culoarea, așa cum se vede în afișele interlope criminale, creează un contrast foarte puternic. De asemenea, culorile complementare sunt excelente pentru crearea contrastului. Dacă culorile pure sunt prea intense, modificați valoarea (cât de întunecată sau de deschisă este culoarea) pentru a crea un contrast mai eficient.
• culoare. Culori calde, cum ar fi galben, portocale și roșii, sunt percepute ca se apropie și pot fi folosite pentru a consolida figura. Culorile reci, cum ar fi purpurii, albastrul și verdele, sunt percepute ca retragând și pot fi folosite pentru a întări terenul.
• Dimensiune., Atunci când un element mare umple majoritatea solului, acesta va fi perceput ca cifra. În schimb, un element mic într-un teren mare va fi perceput ca cifra.
• poziție. Elementele poziționate în zonele inferioare vor fi percepute ca figura, în timp ce elementele poziționate în zonele superioare vor fi percepute ca sol. Acest lucru se joacă cu percepția noastră despre distanță, deoarece percepem obiectele poziționate în zonele inferioare pentru a fi mai aproape de noi și obiectele poziționate în zonele superioare pentru a fi mai departe.
• Focus., Elementele care sunt în centrul atenției vor fi percepute ca figura, în timp ce elementele care nu sunt focalizate, neclare, decolorate sau colorate vor fi percepute ca fiind sol.cele mai bune relații figura-sol sunt create cu o combinație de multe dintre aceste elemente vizuale. Apoi, să aruncăm o privire la câteva exemple din lumea reală și să vedem cum aceste elemente lucrează împreună pentru a crea o figură de succes.,

  Figure-Ground în practică

  exemplul figure-ground din seria posterelor interlope criminale de mai sus arată principiul într-o stare instabilă, în care figura și solul se luptă reciproc pentru atenție. Instabil figura-sol funcționează bine atunci când există puține elemente, iar designul este simplu. Cu toate acestea, este posibil să nu fie neapărat utilizarea dorită a principiului atunci când proiectăm site-uri web, deși acest lucru depinde de conținutul și contextul site-ului web. Site-urile web trebuie să transmită informații complexe și să fie în continuare clare și utilizabile., Cu un teren stabil, putem ghida atenția acolo unde dorim și putem evita orice ambiguitate a mesajului pe care încercăm să-l comunicăm.aruncați o privire la exemplul de mai jos de pe site-ul Apple Music. Cel mai probabil, ochiul dvs. este atras de imaginea smartphone-ului, care, împreună cu copia din stânga acestuia, sunt elementele figurii. În timp ce fundalul începe să lupte pentru atenția noastră, elementele figurinei sunt îmbunătățite prin utilizarea mai multor elemente vizuale. În primul rând, cifra este consolidată prin copie mare și dimensiunea mare a smartphone-ului., Poziționarea smartphone-ul în partea de jos a ecranului ajută, de asemenea, în aducerea figura înainte. Cifra este îmbunătățită în continuare prin nuanțarea înapoi animație video în fundal, provocând la sol să se retragă. În cele din urmă, contrastul dintre ecranul luminos și fundalul întunecat asigură o bună separare între figură și sol.

  

  În exemplul următor, de la Naya-ul, dimensiunea de figura este cel mai puternic element vizual folosit pentru a crea figură bună-sol. Aici, percepem femeia (și pălăria ei foarte mare!) ca figura ca ea umple majoritatea solului. În plus, utilizarea unei culori reci în fundal, precum și utilizarea inteligentă a elementelor suprapuse, ajută la ajutarea fundalului să se retragă. În cele din urmă, la fel ca exemplul Apple Music, există un contrast bun care separă prim-planul de fundal.,

  

  în cele din Urmă, un contrast excelent între cifră și masă este puterea de R/m Design-ul Școlii. Aici, meniul prezintă un contrast puternic, folosind culori strălucitoare și negru pentru a separa figura de la sol. În plus, culoarea caldă este folosită pentru a întări percepția figurii care vine spre noi. Nu vrei doar să ajungă și apuca aceste plăci roșii!,

  

  Concluzie

  Înțelegerea cum să utilizați de închidere și figura-sol va ajuta să construiască relații puternice și diferențele dintre elemente in desene.,

  • Uită-te la spațiul negativ la fel de mult ca spațiul pozitiv pentru a descoperi forme interesante;
  • Joacă-te cu eliminarea elementelor din prim-plan și folosește spațiul negativ pentru a forma forme în schimb;
  • în cele din urmă, amestecă elemente vizuale precum contrastul, culoarea, dimensiunea, poziția și focalizarea pentru a crea atât relații figura-sol stabile, cât și instabile.acum, că știți cum să utilizați aceste două principii în munca dvs., mergeți mai departe și creați-vă propriile modele captivante și de succes!,în a treia și ultima parte a acestei serii, ne vom concentra pe principiile continuării și destinului comun, care implică mișcare, atât implicită, cât și animată, pentru a crea relații.
    

    resurse și bune Citește

    • „principiile Gestalt” pe Scholar.
    • Principii Universale de Design revizuit și actualizat: 125 modalități de a spori gradul de utilizare, influența percepția, crește recurs, face mai bine deciziile de design, și de a învăța prin design de William Lidwell, Kritina Holden și Jill Butler. Rockport Pub, 2010.,
    • vizualizarea informațiilor: percepția pentru design de Colin Ware. Elsevier, 2012.
    • Principii de Proiectare: Percepția Vizuală Și Principiile Gestalt
    • Conectarea Și Elemente de Separare Prin Contrast Și Similaritate
    • Echilibru Compozitional, Simetria Și Asimetria
    • Cum de A Îmbunătăți Dvs. de e-Mail Flux de lucru Cu Design Modular
    (ml, da, og, jb, il)