Raportul de aur: Ghidul final pentru înțelegere și utilizare

Designerii de pretutindeni ar trebui să știe despre Golden Ratio. Este un raport matematic care creează modele estetice plăcute. Deoarece raportul de aur există atât de frecvent în natură, nu este o surpriză faptul că rezultatele sale sunt naturale.

Fotografie de Bogomil Mihaylov pe Unsplash

Proporția de aur are și alte nume:

• Proporția divină
• Golden Mean
• Secțiunea de aur
• Phi (litera greacă)

Matematica din spatele raportului de aur

Voi explica matematica Raportului de Aur cât mai simplu posibil și fără a intra în detaliile pe care nu trebuie să le cunoașteți. Dacă poți ține pasul cu matematica, minunat. Dar dacă nu poți, este în regulă - vei putea folosi conceptul în designul tău.

Pentru a înțelege raportul de aur, trebuie să înțelegeți mai întâi dreptunghiul de aur

Dreptunghiul de aur este un dreptunghi mare care are un pătrat în interiorul său. Laturile pătratului sunt egale cu cea mai scurtă lungime a dreptunghiului:

Sursa: Wikipedia

Raportul de aur este un număr care este (un fel de) egal cu 1,618, la fel ca pi este aproximativ egal cu 3,14, dar nu exact.

Luați o linie și o împărțiți în două părți - o parte lungă (a) și o parte scurtă (b). Întreaga lungime (a + b) împărțită la (a) este egală cu (a) împărțită la (b). Și ambele numere sunt egale cu 1.618. Deci, (a + b) împărțit la (a) este egal cu 1.618, și (a) împărțit la (b) este egală , de asemenea , 1.618.

Înapoi la Dreptunghiul de Aur, pentru că este mult mai ușor de înțeles

Când plasați un pătrat în interiorul dreptunghiului, acesta creează un alt dreptunghi mai mic. Ignorați liniile negre și priviți casetele roșii și verzi:

Pătratul roșu are patru laturi egale în lungime, iar acea lungime este egală cu cea mai scurtă lungime a dreptunghiului. Secționând acest pătrat, creați automat un alt dreptunghi mai mic (conturat în verde). Împreună, creează un aspect complet Golden Ratio și o bază pentru Spirala de Aur.

De asemenea, puteți face un nou dreptunghi auriu din dreptunghiul mai mic, ca acesta pe care l-am subliniat în albastru:

O diagramă tradițională a raportului de aur are opt dreptunghiuri de aur:

Și iată cel mai mic dreptunghi de aur, # 8:

Dacă începeți în stânga jos și faceți un arc pentru a conecta partea îndepărtată a fiecărei secțiuni transversale dreptunghiulare pătrate și mici, veți obține Spirala de Aur.

Secvența Fibonacci

Secvența Fibonacci este destul de simplu de înțeles: începeți cu zero și 1, apoi obțineți următorul număr adăugând cele două numere dinaintea acestuia. 0 + 1 = 1, apoi 1 + 1 = 2, etc. Primele câteva numere din secvență sunt 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Dacă utilizați aceste numere pentru a crea pătrate cu lățimile respective, puteți crea o spirală de aur:

Sursa: Math is Fun

Cercurile de aur

Uneori, veți vedea cercuri desenate în pătrate în loc de sau în plus față de spirală. Dacă desenați cercuri perfecte în casetele suprapunerii Golden Ratio, acestea vor avea raportul 1: 1.618 cu un cerc adiacent.

Sursa: Departamentul Limelight

Logo-urile Pepsi și Twitter folosesc cercurile de aur:

Sursa: Discuții hibride

Ai văzut asta, o mulțime

Natura este plină de raportul de aur. Este în floră, scoici, vreme ...

Sursa: Fotografie de Annie Spratt pe Unsplash

Sursa: Fotografie de NASA pe Unsplash

Și pentru că o vedem atât de des, creierul nostru o preferă. Această atracție înnăscută este motivul pentru care este un aspect atât de puternic pe care îl pot folosi designerii.

Raportul de aur în artă și design

Uneori, raportul de aur este foarte ușor de recunoscut:

Sursa: staceysdetailinginc.com

Uneori te duci, „habar n-am despre ce vorbești ... oh stai. Acum îl văd. Eu cred."

Sursa: Marketing Insiders

Alteori ai putea înnebuni uitându-te la el ...

Sursa: Widewalls

... dar dacă vă apropiați de principalul dreptunghi auriu, devine puțin mai clar:

Să aruncăm o privire la un exemplu frecvent menționat: Partenonul

Sursa: Creative Bloq

La început, s-ar putea să vedeți acest lucru și să spuneți: „Asta doar mi se pare simetric. Cum se încadrează ceea ce privesc în chestia cu Spirala Rectangulului de Aur? ”

Raportul de aur nu se referă la modul în care fiecare parte a unui design se încadrează complet și numai în secțiunile specifice. Dacă acesta era punctul, partea dreaptă a Partenonului ar fi un bloc mare, iar partea stângă ar fi secționată în blocuri mai mici.

În schimb, raportul este folosit pentru a crea armonie și proporție, iar acest lucru poate fi interpretat în câteva moduri diferite.

În timp ce raportul de aur este bazat pe matematică, acesta poate fi adaptat în moduri creative. În cazul Partenonului, raportul de aur determină înălțimea și amplasarea componentelor de proiectare. În plus, există o serie de moduri de a stabili diagrame Golden Ratio:

Sursa: Archinect

Sursa: Esther Sugihto pe mediu

Sursa: GoldenNumber.net

Raportul de aur și designul site-ului web

Fie că vă place matematica, fie că sunteți pe punctul de a exploda, Golden Ratio este puțin mai ușor de înțeles în ceea ce privește designul. Ai făcut greutăți mari. Acum este timpul să luați suprapunerea de bază și să vă faceți componentele web perfect plăcute.

Raportul de aur și aspectul

Dacă doriți un aspect perfect al raportului de aur, setați dimensiunile la 1: 1.618. De exemplu, puteți seta lățimea la 960 pixeli și înălțimea la 594 pixeli. Dreptunghiul auriu are 594 pixeli pe fiecare parte, iar dreptunghiul ocupă restul aspectului (594 x 366).

Calculator Soup are un calculator util Golden Ratio, unde puteți seta orice termen (A, B sau A + B) pentru a găsi valorile corecte ale Golden Ratio.

Sau, puteți utiliza pur și simplu acest tip de aspect cu două coloane, unde o coloană este destul de lată decât cealaltă coloană. Este organizat și arată clar ierarhia.

Sursa: National Geographic

Folosesc acest lucru pe site-ul meu web, deoarece pagina principală este o colecție de postări pe blogul meu și consider că acesta este unul dintre cele mai recunoscute machete pentru bloguri:

În opinia mea, totuși, aspectul simetric pe care îl folosim pe teme elegante este mai modern:

Raportul și spațiul de aur

Raportul de aur vă poate ajuta să stabiliți unde să plasați elementele designului, proporțiile de utilizat și unde să lăsați spațiu negativ. Iată un exemplu simplu și puteți vedea aproape suprapunerea Golden Ratio fără a fi nevoie chiar să o puneți deasupra:

Sursa: Digiarts 2011

Iată cum arată când aplic Spirala de Aur în Photoshop:

Din nou, Golden Ratio se bazează pe matematică, dar atunci când vine vorba de aplicarea acestuia la design, nu este perfect. Acest design nu este creat pe un dreptunghi de aur, astfel încât Spirala de aur este în afara proporțiilor normale. Cu toate acestea, puteți vedea cum poate ghida un designer să aleagă unde să plaseze cel mai mare element al designului, precum și cele mai mici elemente și spațiul negativ.

De asemenea, puteți stratifica suprapunerea Golden Ratio pentru ao aplica diferitelor elemente din același design:

Sursa: Branding by Lemongraphic. Exemplu din Canva.

Raportul de aur și conținutul

Când vă gândiți la aspectul și distanțarea raportului de aur, puteți începe să decideți unde să plasați conținut pe site-ul dvs. web.

Să ne uităm din nou la site-ul National Geographic, de data aceasta cu o suprapunere a raportului de aur al Canva:

Aspectul este împărțit astfel încât conținutul să se alinieze de-a lungul liniei centrale a spiralei. În stânga, există un bloc mare de conținut. În dreapta, conținutul devine mai dens și există mult mai mult spațiu negativ. Spre curbura centrală a spiralei, veți vedea un al doilea logo National Geographic - nu există o modalitate mai bună de a conduce branding-ul acasă decât de a-l plasa acolo unde ochiul merge în mod natural.

Iată un exemplu minunat despre cum Spirala de Aur vă poate conduce ochiul printr-un design, chiar și după componenta sa principală. Acest lucru este util dacă aveți mult conținut pe care să-l strângeți pe o singură pagină. De asemenea, veți observa că, chiar și cu un design atât de ambalat și detaliat, există încă spațiu negativ acolo.

Sursa: Design by Helms Workshop. Exemplu din Canva.

Mențiune de onoare: raportul de aur și imagini

Golden Ratio este, de asemenea, utilizat în compoziția fotografică. În loc să creeze o spirală de aur, Raportul de aur împarte imaginea în șase blocuri. Același raport de aur este utilizat în acest tip de rețea: lățimile și înălțimile secțiunilor sunt fie 1, fie 0,618.

Sursa: Canva

Apoi folosiți intersecțiile pentru a compune fotografia. Scopul este de a pune un subiect sau o parte principală a unui subiect pe una dintre liniile care se intersectează - subiectul nu ar trebui să fie centrat, iar unele blocuri să fie lăsate goale (cel puțin în majoritatea cazurilor - macro fotografie și portrete din prim plan va umple aproape tot cadrul). Procedând astfel, creați un portret mai interesant decât dacă subiectul ar fi centrat.

O modalitate mult mai simplă și mai accesibilă de a respecta această regulă este de a utiliza grila Rule of Thirds, pe care probabil o aveți pe camera încorporată a telefonului sau DSLR.

Iată o fotografie pe care am făcut-o fiului vărului meu. Am așezat grila Rule of Thirds peste ea pentru a vă arăta unde subiectul completează cadrul și nu.

De asemenea, uitați-vă cum Spirala de Aur se înfășoară aproape perfect în jurul subiectului:

Proporția de aur diferă de Regula treimilor, deoarece grila Regula treimilor are secțiuni cu lungimi și lățimi egale. Cu toate acestea, este atât de aproape - și atât de ușor - încât fotografii folosesc de obicei atunci când compun sau editează o fotografie.

Încheierea

Raportul de aur poate fi folosit ca atare sau adaptat scopurilor dvs. și modificat pentru dimensiune - matematica poate avea reguli dificile și rapide, dar creativitatea nu. În timp ce puteți utiliza Golden Ratio de la început pentru a vă ghida designul, îl puteți utiliza și după ce ați început să proiectați pentru a face modificări și îmbunătățiri. Scopul este ca raportul să vă ghideze, nu să încorporați forțat un design în el.

Sunteți gata să jucați cu aspectul site-ului dvs. web și mai mult? Consultați articolul nostru despre utilizarea noilor opțiuni de înălțime și lățime Divi pentru a crea un design receptiv.