Efectuarea design-urilor web mai eficiente cu raportul de aur

Raportul de Aur este utilizat în cadrul unor aspecte grafice de tot felul, în special pentru a echilibra conținutul greu de text. Acesta poate ajuta designerii să creeze ierarhia și să atragă ochii utilizatorilor către anumite zone. Consultați următoarele exemple de site și vedeți cum îl folosesc designerii!

Care este raportul de aur?? 

Raportul de Aur este un raport matematic, frecvent întâlnit în natură, și folosit în teoria designului clasic pentru a crea compoziții echilibrate. Este aproximativ egal cu 1.6180, este, de asemenea, cunoscut sub numele de "Golden Mean", "Secțiunea de Aur", și este menționată de litera greacă Phi "φ".

Un "dreptunghi de aur" este un dreptunghi al cărui lungime este de 1,6180 ori lățimea sa. De exemplu, a  div care are o latură de 300px și altul de 300 * 1.6180 ≈ 485px ar putea fi spus drept un dreptunghi de aur.

Dacă tăiați un pătrat perfect din acest dreptunghi de aur, veți rămâne cu un alt dreptunghi de aur. 

Puteți face același lucru cu dreptunghiul mai mic, apoi același lucru din nou, pe termen nelimitat, oferindu-vă această imagine familiară:

Secvența Fibonacci

Secventa Fibonacci este similară cu Raportul de Aur, dar nu exact așa. Este o serie de numere în care următorul număr din secvență este suma celor două anterioare. De exemplu: 0, 1, 1, 2, 3, 5, 8

Dacă începem cu un pătrat perfect, apoi adăugăm un alt dreptunghi:

Continuați să adăugați pătrate de-a lungul celei mai lungi lungimi

Apoi adăugăm un alt pătrat, egal cu lungimea cea mai lungă a formei totale:

Apoi, din nou și din nou:

Acest lucru poate continua pe o perioadă nedeterminată, oferindu-ne același efect ca și Rectanghelul nostru de Aur, dar de data aceasta construind în loc să tăiem jos. Atât Raportul de Aur cât și Secvența Fibonacci ne oferă proporții similare atrăgătoare. 

Să analizăm acum câteva site-uri web unde le putem vedea în acțiune.

Exemplu # 1: YStudio

yourlocalstudio.dk

Ce este acest site Despre?

"Studio dvs. local" este un studio de design și dezvoltare cu sediul în Copenhaga, Danemarca. Ei se specializează în lucrul cu concepte vizuale în orice formă pentru a crea experiențe care îmbunătățesc împrejurimile.

Cum folosește mediul de aur

Site-ul de aici folosește mediul de aur pentru două dintre cele trei pagini ale sale. Pagina principală este o prezentare generală conceptuală a lucrărilor-cheie. Cu toate acestea, atunci când vizitați pagina studioului, se amestecă un pic de aspect tradițional de web cu forme medii aurii dreptunghiulare pe măsură ce defilați în jos pagina.

De ce este eficient

Doriți să ieșiți în mulțime? Yourlocalstudio (YLS) au făcut acest lucru prin utilizarea raportului de aur în design-ul site-ului lor. Designul are un aspect progresiv cu un sistem de rețea definit. Ai putea susține că aceste zile etotul arată ca o bootstrap... păstrați un ochi pentru mai multe și mai multe site-uri care doresc să-și atragă atenția cu un aspect mai dinamic din punct de vedere structural.

Exemplul nr. 2: Mashable

mashable.com

Ce este site-ul Despre?

Mashable este un site de știri; o sursă de informații, cunoștințe și resurse pentru "generația conectată". 

Cum folosește Media de Aur

Am folosit testul Golden Ratio de la UX Triggers pentru a demonstra modul în care Mashable utilizează secvența Fibonacci în aspectul său. Amplasarea conținutului este flexibilă, cu titlul spre stânga și legături către mai multe știri din dreapta, separate de grile. 

De ce este eficient

Raportul de Aur este eficient aici, deoarece permite unui site cu conținut foarte mulțumit să ofere tipografie spațiu de respirație. Site-uri asemănătoare pot apărea într-un mod mai dens cu conținut, folosind structurile tradiționale ale rețelei, dar Mashable demonstrează că Raportul de Aur poate fi eficient chiar și atunci când este invizibil.

Exemplul 3: Jackson & Kent

www.jandk.fr

Ce este site-ul Despre?

Jackson & Kent este o agenție de producție web din Franța. Ei se specializează în servicii digitale precum HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash etc..

Cum folosește Media de Aur

Imaginea de mai sus arată modul în care aspectul cuprinde în mare parte activitatea anterioară a clientului. De asemenea, oferă un bloc de conținut despre agenția în sine și o bară de navigare în centrul ecranului. Butonul de contact, după cum se arată mai jos, folosește de asemenea mediul de aur ca sistem de rețea pentru a organiza aspectul într-un mod unic. 

De ce este eficient

Exemplul de aici vă încurajează să navigați pe site și să explorați conținutul pe orizontală. Vizionarea în formă de grilă și forme de blocuri de dimensiuni diferite fac din conținut mai interesant din punct de vedere vizual. Întrucât utilizatorii pot viziona conținutul de pe un desktop (precum și tableta), pe navigarea pe axa orizontală există numere de paginare. Acesta este un mod inovativ de vizualizare a fiecărei bucăți de conținut, dar și a UI în ansamblul său.

Concluzie

Raportul de aur conduce în mod natural ochiul utilizatorilor către anumite puncte din cadrul unei interfețe de utilizator. Ca concept, vă poate ajuta să vă gândiți la plasarea conținutului și la utilizarea eficientă a ierarhiei. Combinația de aspect, tipografie, culoare și principii generale vă va ajuta să luați desenele dvs. la nivelul următor.