Come web designer, dobbiamo prendere molto in considerazione quando si avvia un progetto. Uno dei segmenti più grandi che lavora con layout e sistemi per ordinare la spaziatura. Generalmente i progettisti funzionano con una libreria CSS disposta a griglia, ma esistono molti modi per implementare layout creativi.
Oggi esamineremo la sezione aurea e come è possibile applicare semplici lezioni al lavoro di progettazione. La maggior parte delle tecniche discusse sono applicabili a una vasta gamma di arti e design, ma ci concentreremo sull'aspetto digitale. Insieme con la sezione aurea prendere in considerazione alcuni altri strumenti utili che possono aiutare nello sviluppo di layout del sito.
La Divina Proporzione
La Divina Proporzione è anche conosciuta come la sezione aurea. È una costante matematica strettamente uguale a 1.618 usata per descrivere il rapporto tra due elementi. Questo rapporto è stato utilizzato fin dal primo periodo del Rinascimento, quando i concetti artistici new age sono esplosi sulla scena.
Gli artisti durante questo periodo consideravano il rapporto magico e mantengono mistici poteri divini se integrati nel lavoro di progettazione. Centinaia di anni fa questo si applicava principalmente a cose come architettura, sculture e dipinti, ma oggi possiamo usare queste stesse tecniche nella nostra arte digitale.
Il rapporto è meglio descritto matematicamente. All'inizio è un po 'difficile capire, ma possiamo sostituire ogni variabile usata nell'equazione con i numeri reali, solo così le cose inizieranno a dare un senso un po' di più. Stiamo lavorando solo con 2 variabili: chiamiamole un e B. Gli elementi stanno lavorando all'interno di una sezione aurea quando a + b / a è equivalente a a / b.
Puoi verificarlo con qualsiasi valore di entrambe le variabili per vedere cosa ottieni. Alla fine vorrai finire con 1.61803398 (o solo 1.618) come risposta. Poiché le proporzioni con cui stiamo lavorando non sono impostate su un valore specifico, possiamo assumere che un numero qualsiasi di valori sia uguale a una proporzione uguale. Questo lascia il nostro lavoro di progettazione flessibile e relativo alle dimensioni piuttosto che stare all'interno di un dominio di numeri assoluti.
Funzioni matematiche all'interno della Ratio
Un trucco interessante è formato lavorando con il solo rapporto e le variabili fuori dal nostro sistema totale. Prendiamo ad esempio il sistema di griglia 960 diviso in 2 colonne. Non sappiamo quanto sia grande fare ogni colonna per mantenere il nostro layout all'interno delle proporzioni divine, ma abbiamo abbastanza numeri per capirlo.
960 (rappresentato in unità di pixel) mantiene il nostro valore di a + b. Quindi possiamo dividere 960 in 1.618 per ottenere il valore del nostro lato più lungo, che è rappresentato dalla nostra variabile a. In questo caso 960 / 1.618 esce a 593px.
Usando queste nuove informazioni possiamo sottrarre 593 dal 960 per ottenere la larghezza della nostra colonna laterale - 367. Se vogliamo verificare la nostra risposta, possiamo prendere 593 + 367 (960) e dividerlo per il nostro valore di lato più grande 593. Basato sul mio calcoli dovresti ottenere un valore di ritorno di ~ 1.618, esattamente uguale alla nostra sezione aurea. Ta-da!
Questa tecnica è essenziale quando si tratta di sviluppare layout fluidi per siti Web dinamici. La proporzione divina aiuta a mantenere le cose organizzate nel modo più organico e naturale. Se lo desideri, puoi organizzare ulteriormente il tuo design in 3 o 4 layout di colonne. Con questa opzione avresti bisogno di testare quale sia esattamente l'aspetto che stai cercando e quale sarà la dimensione totale del tuo layout.
Se sei bloccato a trovare una proporzione fissa per il tuo sito, non preoccuparti delle piccole cose. Il rapporto divino ha lo scopo di guidarti come progettista, non di forzare le idee in gola a usare valori numerici esatti ovunque. Finché il tuo design è in grado di reggere il proprio peso e mantenere una sensazione uniforme in tutta la pagina, dovresti stare bene.
Come regola generale è possibile utilizzare il rapporto 5: 3 sul posto - sebbene non esattamente uguale al rapporto aureo, dovrebbe fornire risultati abbastanza vicini da tener conto degli errori.
Delineare la regola dei terzi
Quando ottimizzi il layout del tuo sito, le cose potrebbero non essere sempre perfette. Questo è il modo del web design e non c'è sicuramente alcun motivo per seguire le linee guida precise qui. The Rule of Thirds è quasi un semplice? Uomo pigro? modo di applicare una proporzione d'oro.
Non ti fornirà scarsi risultati o siti web deformi, tutt'altro. Ma è un approccio rilassato ai rapporti di progettazione che molti troveranno superiori ai calcoli esatti.
La regola afferma che puoi dividere qualsiasi mockup o pezzo d'arte in nove caselle uguali. Ciò è ottenuto posizionando 2 linee verticali e 2 linee orizzontali equidistanti nell'intera immagine. I quattro punti nell'immagine in cui le linee si incontrano sono i punti caldi? per il tuo sito web. In altre parole, queste aree dovrebbero contenere i contenuti più importanti guidati dall'utente.
Un approccio interessante a questo problema risolve di nuovo la suddivisione di ogni colonna in metà. Questo ti dà una griglia equamente distribuita tra il tuo sito con proporzioni stabilite su tutta la linea. In questo modo il riquadro in alto a sinistra conterrà la maggior parte del marchio del tuo sito (logo, navigazione, area di intestazione?). In alternativa, il riquadro in alto a destra potrebbe contenere informazioni di minore importanza suddivise verticalmente nel tuo sito.
Concentrarsi su ciascun punto interno nella progettazione del sito può aiutarti a capire dove tenere intestazioni, pulsanti, collegamenti, ecc. Per ribadire questa non è una regola rigorosa che tutti i progettisti devono seguire per mantenere sotto controllo i loro layout. Questa è solo un'ideologia che è stata applicata a innumerevoli principi di progettazione e ha dimostrato di funzionare con layout di siti Web complessi. Questo è ancora più facile da utilizzare poiché il software di progettazione Adobe è dotato di strumenti per abilitare le griglie nei file. Quanto potrebbe essere più facile ottenere le cose?
Il rettangolo dorato
Come suggerisce il nome, è possibile creare un rettangolo dorato applicando lo stesso rapporto di cui abbiamo discusso geometricamente. Il lato più lungo del rettangolo dovrebbe contenere il valore più lungo o variabile un, mentre il lato più corto rappresenterebbe la tua variabile B valore. Questa forma può anche essere applicata pesantemente nei layout di progettazione e in altri elementi grafici, inclusi loghi e icone più piccole.
Questi pezzi speciali di geometria possono guidarti a capire praticamente qualsiasi problema di layout o elemento con cui ti dovresti confrontare. Nello specifico è possibile delineare immagini di serie o fantasiose visualizzazioni Flash inserite nel contenuto della home page del proprio sito. Questi rettangoli possono anche essere utilizzati in tutte le aree del footer o della barra laterale per contrassegnare singoli elementi o widget.
Ovviamente l'uso più importante di questo è nel contenuto dinamico. Quando posizioni gallerie fotografiche o lavori in un portfolio, dovresti considerare i rettangoli dorati come delimitatori. I siti web di e-commerce possono fare molto meglio con questo rapporto intatto visualizzando prodotti non solo in righe ma colonne ricche di contenuti distanziati uniformemente all'interno di rettangoli dorati.
Non sono qui per suggerire che ogni elemento della pagina debba essere lastricato da rettangoli dorati. In effetti ci sono molte considerazioni in merito all'allineamento e alle griglie per tenerti al corrente di eventuali difetti di progettazione che potresti creare. Questo è solo un altro strumento oltre agli innumerevoli altri utilizzati per creare un bellissimo layout.
Conclusione
Abbiamo graffiato un po 'più in profondità oltre la superficie del Golden Ratio per capire come può essere implementato in opere di design moderne. I sistemi a griglia possono essere pignoli e il lavoro all'interno delle proporzioni divine consente al locale di layout sia fisso che elastico di respirare e cadere al suo posto. Non dovresti basare l'intero layout su queste costanti matematiche. Ma puoi ottenere un enorme vantaggio partendo da questo settore e considerando il layout della griglia del tuo sito web.
Ci sono alcuni fantastici modelli di griglia gratuiti disponibili per il download in aiuto durante questo processo. Questi sono grandi se non sei sicuro di saltare in prima persona in proporzioni progettuali e vuoi lavorare su un terreno solido prima.
Prova ad applicare queste idee nel tuo prossimo progetto e guarda come vanno le cose. Layout e strutture organiche accoppiati a una matematica naturalmente potente possono creare uno straordinario design di siti web.