Applicare la sezione aurea nei disegni moderni

La pagina web ideale è al tempo stesso funzionale e armoniosa, ma anche i web designer più esperti possono avere difficoltà a dirti cosa dia un flusso naturale al design. Nonostante le teorie del colore e della navigazione là fuori, a volte l'aspetto più cruciale dell'estetica di una pagina web perfetta sembra ineffabile. Non sappiamo perché funzioni, ma a volte lo fa. Potrebbe essere tutto a causa di un concetto semplice.

Sostenendo il design del tuo sito web con un ordine letteralmente naturale, gli spettatori potrebbero trovare il tuo design più interessante e piacevolmente innato. Questo concetto è chiamato il rapporto aureo, una natura di concetto matematico obbedisce e che noi umani riconosciamo inconsciamente come espressione di perfezione.

The Golden Cosa?

In termini semplici, il rapporto aureo (noto anche come il proporzione divina o il media d'oro), è una costante matematica che appare ripetutamente in natura e opere d'arte.

Espresso come equazione, quando un è più grande di B, (a + b) diviso per un è uguale a un diviso per B (guarda l'immagine qui sotto), che è uguale a circa 1,618,033987 millions. Quel numero, spesso rappresentato dal carattere greco "phi", è il rapporto aureo.

(Fonte immagine: mathsisfun.com)

La stessa teoria può essere usata per costruire un rettangolo, chiamato il rettangolo d'oro. Un'immagine che segue la sezione aurea può essere posizionata ordinatamente all'interno di un rettangolo che obbedisce al rapporto.

(Fonte immagine: creativeautomaton.com)

Per costruire un rettangolo dorato, scegli un numero che sarà la lunghezza del lato corto del rettangolo. Per amor di discussione, diciamo 500 pixel. Moltiplicalo per 1,618. Il risultato, 809 pixel, è la lunghezza del lato lungo del rettangolo. Pertanto, un rettangolo di 500 pixel per 809 pixel è un rettangolo dorato. Obbedisce alla sezione aurea.

Bellezza naturale

In verità, gli scienziati non sono sicuri di quale sia il rapporto che gli umani apprezzano così tanto. Quello di cui sono sicuri è quanto ci piace. Gli studi suggeriscono che anche minuscole modifiche a un'immagine che lo rendono più fedele alla golden ratio hanno un grande impatto sul cervello di chi guarda.

Anche il volto umano segue il rapporto, e troviamo persone i cui volti sono più fedeli al rapporto più attraente. Conchiglie, classici capolavori del Rinascimento, architettura dell'antichità e persino parti del corpo umano sono proporzionate in base al rapporto tra le dita stesse.

(Fonte immagine: in2visualdesign)

Qualcosa di profondo nel cuore della nostra mente registra il rapporto aureo come bello, un fatto che artisti e architetti hanno utilizzato per migliaia di anni, consapevolmente o meno. È un linguaggio primordiale nelle immagini. Il risultato è organico, intuitivo e sembra giusto.

Composizione Divina

Come usi allora questo numero magico nella composizione della tua pagina web? La matematica può sembrare una scatola soffocante in cui la tua creatività combatterà, ma la sezione aurea è semplicemente un'utile linea guida. Avere una linea guida di base da cui costruire può finire per darti spazio più creativo prendendo alcune congetture dalle proporzioni e dal posizionamento.

Pensalo come uno strumento invece di una gabbia. Nella sua forma più semplice, è possibile utilizzare la sezione aurea per designare la dimensione e la posizione delle aree di contenuto e delle barre laterali. Un layout a larghezza fissa è l'applicazione più semplice. Decidi la dimensione complessiva del tuo layout tramite il metodo per creare un rettangolo dorato.

Per griglie / blocchi

Il quadrato creato dalle linee sarebbe il blocco dei contenuti. Il rettangolo più piccolo sarebbe una barra laterale o di navigazione. Una volta che hai capito la dimensione del tuo rettangolo, scoprire quanto è ampia la barra di navigazione è facile matematica.

• Per questo esempio, diremo che il tuo rettangolo è 525 pixel di 850 pixel.
• 525 è un e 850 è (a + b), e B sarà la larghezza della tua barra laterale.
• Trovare B, semplicemente sottraiamo da (a + b), che è 325.
• Pertanto la larghezza della barra laterale è 325.

Ricorda che il tuo rettangolo può essere capovolto per soddisfare i tuoi scopi, mettendo la barra laterale in alto, in basso o sul lato opposto. Finché il rapporto tiene, il tuo design si sentirà in armonia.

Per il testo

C'è un modo più veloce per ottenere le misurazioni necessarie e può essere applicato con il contenuto del testo.

• Diciamo che il tuo testo di contesto è la dimensione 12.
• Moltiplicare 12 con 1.618, la sezione aurea e otterrai 19.416.
• Una dimensione del testo dell'intestazione di 19 o 20 seguirà da vicino la sezione aurea.

Il rapporto aureo è un linguaggio che la tua mente comprende e, comunicando con esso, le tue idee si incontreranno in modo più efficace. Non devi aderire ad esso esattamente; il principio di base è sufficiente. Applicando il rapporto alle dimensioni dell'immagine, la relazione tra il posizionamento del testo e dell'immagine e la creazione di suddivisioni all'interno delle barre laterali sono tutti concetti possibili.

Grid Work: The Rule of Thirds

Se la matematica non è la tua tazza di tè, il concetto della sezione aurea può essere semplificato. Il regole di terzi governa il posizionamento di punti di interesse in una scena. Dividi ogni dato immagine in terzi sia orizzontalmente che verticalmente. Otterrai 9 griglie.

(Fonte immagine: digital-photography-school.com)

Secondo la regola dei terzi, i vertici di quelle linee (dove le linee si incrociano) sono la collocazione ideale per i punti di interesse. Le persone che scansionano la pagina hanno più probabilità di notare le cose poste vicino ai punti e la divisione è comoda da visualizzare. Una progettazione più complessa è possibile suddividendo questi terzi in ulteriori terzi.

(Fonte immagine: net.tutsplus.com)

In breve, l'occhio può essere pigro e non dover cercare dettagli importanti. Il nostro cervello come questo. Le immagini principali, le caselle di notizie, le barre di ricerca e qualsiasi altro punto di interesse possono essere posizionati su o vicino ai vertici. Questa piccola scorciatoia ordinata ti darà un design che è allo stesso tempo facile per gli occhi e rende le persone attratte da dati chiave.

Colonne e dimensioni dei caratteri: sequenze di Fibonacci

Un altro semplice strumento per il web design legato alla sezione aurea è Numeri di Fibonacci. Una sequenza di Fibonacci inizia con 0 e 1. I due numeri precedenti vengono sommati per produrre il numero successivo nella sequenza: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... e così via.

Un po 'di matematica ci dice che la relazione tra i numeri sequenziali di sequenza di Fibonacci è sorprendentemente vicina al rapporto aureo: dividi il numero qualsiasi nella sequenza con il numero precedente e otterrai - lo indovinasti - 1.618.

Come con la sezione aurea, i numeri di Fibonacci possono essere utilizzati per dettare la relazione tra intestazione e dimensioni del testo del contenuto. Può anche essere usato per designare la larghezza delle colonne ed è particolarmente efficace nei blog e in altri layout densi di testo. La composizione potrebbe anche essere costruita sul concetto di piastrellatura di Fibonacci, in cui le dimensioni delle tessere si basano sull'uso della sequenza di Fibonacci.

(Fonte immagine: Wikipedia.org)

Spirali dorate e cluster di contenuti

Un altro possibile metodo per utilizzare sia il rapporto aureo che i numeri di Fibonacci sono i spirali dorate e spirali di Fibonacci. Le spirali dorate si allargano di un fattore pari al rapporto aureo per ogni quarto di giro che fanno e le spirali di Fibonacci si formano usando il rivestimento di Fibonacci.

Le spirali sono state utilizzate in opere d'arte fino a quando i numeri e gli indici stessi. La teoria è che le aree di spazio negativo e di interesse visivo dovrebbero adattarsi alla spirale. All'interno di questo layout aggraziato, come con la regola dei terzi, l'occhio è naturalmente attratto dal centro della spirale per cercare i dettagli.

(Fonte immagine: fabiovisentin.com)

Le spirali possono servire come linea guida per la densità e il raggruppamento dei contenuti. Possono servire da base per il rapporto tra le immagini di intestazione del sito Web, le barre di ricerca e le barre degli strumenti.

Quando si sceglie l'immagine ideale per una prima pagina costruita attorno a una grafica di grandi dimensioni, come ad esempio le home page dei negozi e i siti web di fotografia, si può anche beneficiare delle spirali d'oro e di Fibonacci.

I messaggi potenti sono spesso subliminali e la golden ratio è una delle pubblicità subliminali più prolifiche della natura. Utilizzando la proporzione divina, ti dai un vantaggio della logica naturale e della grazia organica a cui tutti gli umani hanno un'attrazione subconscia. La sezione aurea è ancora un altro strumento a disposizione dell'utente.

Altre letture:

• Applicazione del rapporto aureo a layout e oggetti Web

Nota dell'editore: Questo post è scritto da Chris Pentago per Hongkiat.com. Chris è un esperto sviluppatore web, designer e internet marketer interessato alle tecnologie chiave per far funzionare il tuo business online. Puoi trovarlo su Twitter.