Share
Il Golden Ratio viene utilizzato all'interno di layout grafici di tutti i tipi, in particolare per bilanciare il contenuto che è pesante per il testo. Può aiutare i progettisti a creare gerarchie e attirare l'attenzione degli utenti su aree specifiche. Guarda i seguenti esempi di siti web e scopri come i progettisti se ne stanno servendo!
Il Golden Ratio è un rapporto matematico, comunemente trovato in natura, e utilizzato nella teoria del design classico per creare composizioni equilibrate. Corrisponde approssimativamente a 1.6180, è anche noto come "Golden Mean", la "Sezione aurea", ed è indicato con la lettera greca Phi "φ".
Un "rettangolo dorato" è un rettangolo la cui lunghezza è 1.6180 volte la sua larghezza. Ad esempio, a div che ha un lato di 300px e un altro di 300 * 1.6180 ≈ 485px si può dire che sia un rettangolo dorato.
Se tagli un quadrato perfetto da questo rettangolo dorato, ti verrà lasciato un altro rettangolo dorato.
Puoi fare lo stesso con il rettangolo più piccolo, poi lo stesso di nuovo, indefinitamente, dandoti questa immagine familiare:
La sequenza di Fibonacci è simile alla sezione aurea, ma non esattamente. È una serie di numeri in cui il numero successivo nella sequenza è la somma dei due precedenti. Ad esempio: 0, 1, 1, 2, 3, 5, 8
Se iniziamo con un quadrato perfetto, quindi aggiungiamone un altro otteniamo un rettangolo:
Continua ad aggiungere quadrati lungo la lunghezza più lungaQuindi aggiungiamo un altro quadrato, uguale alla lunghezza più lunga della forma totale:
Poi ancora e ancora:
Questo può andare avanti all'infinito, dandoci lo stesso effetto del nostro rettangolo dorato, ma questa volta aumentando invece di diminuire. Sia il Golden Ratio che la Sequenza di Fibonacci ci danno proporzioni altrettanto attraenti.
Analizziamo ora alcuni siti Web in cui possiamo vederli in azione.
yourlocalstudio.dk"Your Local Studio" è uno studio di progettazione e sviluppo con sede a Copenaghen, in Danimarca. Sono specializzati nel lavorare con concetti visivi in qualsiasi forma per creare esperienze che migliorano l'ambiente.
Il sito qui utilizza la media aurea per due delle sue tre pagine. La home page è una panoramica concettuale delle parti chiave del lavoro. Tuttavia, quando visiti la pagina dello studio, mescola un po 'del layout web tradizionale con forme rettangolari medie dorate mentre scorri lungo la pagina.
Vuoi distinguerti tra la folla? Yourlocalstudio (YLS) lo ha fatto utilizzando la sezione aurea nella progettazione del suo sito web. Il design presenta un aspetto progressivo con un sistema di griglia definito. Si potrebbe sostenere che in questi giorni etutto sembra un bootstrap... tieni d'occhio sempre più siti che cercano di attirare l'attenzione con un layout più strutturalmente dinamico.
mashable.comMashable è un sito Web di notizie; una fonte di informazioni, conoscenze e risorse per la "generazione connessa".
Ho usato il test Golden Ratio di UX Trigger per dimostrare come Mashable utilizza la sequenza di Fibonacci nel suo layout. Il layout del contenuto è flessibile, con il titolo a sinistra e collegamenti a più notizie a destra, separati dalle griglie.
Il Golden Ratio è efficace qui, in quanto consente a un sito molto contenuto di dare tipografia spazio per respirare. Siti simili possono apparire più densamente pieni di contenuti, usando i layout tradizionali della griglia, ma Mashable dimostra che il Golden Ratio può essere efficace anche quando è invisibile.
www.jandk.frJackson & Kent è un'agenzia di produzione web dalla Francia. Sono specializzati in servizi digitali come HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash ecc.
Lo screenshot qui sopra mostra come il layout in gran parte comprenda il precedente lavoro del cliente. Presenta inoltre un blocco di contenuti sull'agenzia stessa e una barra di navigazione al centro dello schermo. Il pulsante di contatto, come mostrato di seguito, utilizza anche la media aureo come sistema a griglia per organizzare il layout in un modo unico.
L'esempio qui ti incoraggia a esplorare il sito web ed esplorare il suo contenuto orizzontalmente. La vista a griglia e le forme a blocchi di dimensioni diverse rendono il contenuto più visivamente interessante. Poiché è probabile che gli utenti stiano visualizzando il contenuto su un desktop (oltre che su un tablet), vi sono numeri di impaginazione sulla navigazione dell'asse orizzontale. Questo è un modo innovativo di visualizzare ogni contenuto, ma anche l'interfaccia utente nel suo complesso.
La golden ratio porta naturalmente l'attenzione degli utenti verso punti specifici all'interno di un'interfaccia utente. Come concetto può aiutarti a pensare al posizionamento dei contenuti e ad usare efficacemente la gerarchia. La combinazione di layout, tipografia, colore e principi generali aiuterà a portare i tuoi progetti al livello successivo.
Accentsconagua