Share
La matematica è bella. Suona un po 'strano? Sono sicuro che l'ho pensato quando ho iniziato a disegnare. La matematica è così rigida e spesso noiosa, o almeno così pensavo. Sareste sorpresi di scoprire che i disegni esteticamente più piacevoli, le opere d'arte, gli oggetti e persino le persone hanno la matematica in comune. Specificamente la sezione aurea, anche conosciuta come la proporzione divina, che è designata dalla lettera greca Φ (phi). Questo tutorial riguarderà l'anatomia e il layout di un sito Web e il rapporto tra il Golden Ratio.
Gli elementi di una pagina web sono come organi; sono vitali per una pagina web correttamente funzionante ed esteticamente gradevole.
Questi sono gli elementi principali di una pagina web. Esistono molti modi diversi per organizzarli, ma questo è forse il layout di base più comune utilizzato online.
Tutte le pagine Web utilizzano un contenitore e per lo stesso scopo; per contenere gli elementi della pagina, tuttavia il modo in cui viene realizzato varia. Ad esempio, il tag body o un div è più comunemente usato. In passato, è stata utilizzata anche una tabella (non utilizzare una tabella come contenitore della pagina, è un metodo ammortizzato). Pensa al contenitore come alle pareti esterne della tua casa in cui sono collocate le tue camere da letto, la cucina, il soggiorno, ecc.
Tipi di contenitore:
L'intestazione non è un elemento specifico, anche se alcuni potrebbero considerarlo. Viene generalmente utilizzato in riferimento alla sezione superiore della pagina Web in cui si trovano il logo, la navigazione, la tagline e così via. Molte persone preferiscono mantenere questi elementi contenuti in un div per semplificare lo stile della pagina, la separazione degli elementi e / o il contenimento degli elementi. L'intestazione sarebbe considerata un contenitore quindi avrebbe due tipi tra cui scegliere: liquido o fisso come menzionato sopra.
Il tuo logo è la tua identità e il tuo marchio. Il posizionamento più comune per il logo è all'interno dell'intestazione, allineato a sinistra. Leggiamo da sinistra a destra, dall'alto in basso, quindi il tuo logo sarà probabilmente il primo elemento che i tuoi visitatori guarderanno.
La navigazione della pagina è uno degli elementi più importanti; i tuoi visitatori ne hanno bisogno per usare il tuo sito web. Dovrebbe essere facile da trovare e utilizzare, motivo per cui si trova quasi sempre nell'intestazione o almeno nella parte superiore della pagina. A volte entrambi i tipi di navigazione vengono utilizzati per siti Web con contenuti elevati.
Tipi di navigazione:
Come tutti sanno (o dovrebbero), il contenuto è re! Quando le persone visitano il tuo sito, questo è l'elemento che cercheranno principalmente. Dovrebbe essere il punto focale principale di una pagina Web in modo che i visitatori trovino rapidamente ciò che stanno cercando.
La barra laterale è l'elemento con i tuoi contenuti secondari come pubblicità, ricerca sul sito, link di iscrizione (RSS, Twitter, Email, ecc.), Metodi di contatto, ecc. Questo elemento non è necessario sebbene molti siti Web lo utilizzino. Spesso è allineato a destra ma può essere lasciato allineato o entrambi (due barre laterali) a condizione che non interrompa la visualizzazione del contenuto principale. Per i siti Web che utilizzano la navigazione orizzontale AND verticale, la barra laterale viene spesso sostituita con l'elemento di navigazione verticale.
La fine di una pagina web dovrebbe sempre usare un piè di pagina per far sapere ai tuoi visitatori che hanno raggiunto il completamento della tua pagina web. Come l'intestazione, il piè di pagina non è un elemento specifico ma una sezione di contenimento. All'interno del piè di pagina saranno principalmente le informazioni sul copyright, legali e di contatto. È una buona idea includere alcuni link alle sezioni più importanti del tuo sito come la parte superiore della pagina, la pagina iniziale, la pagina dei contatti, ecc. Alcuni siti web usano quest'area come un'opportunità per menzionare materiale correlato o altre informazioni importanti.
Questa è un'area della pagina web che non è coperta da tipografia o altri contenuti. Potresti sentire il forte bisogno di riempire quanto più spazio possibile ma non farlo! Lo spazio vuoto è altrettanto importante per un buon design della pagina web come il contenuto da utilizzare. Puoi vedere come il sito NetTuts utilizza molto efficacemente lo spazio vuoto per guidare i visitatori attraverso i contenuti, creare l'equilibrio delle pagine e dare un buon senso di separazione dei contenuti.
In modo che copre l'anatomia di una pagina web. Ora diamo un'occhiata a come il Golden Ratio si riferisce a questi elementi.
Ricordi quando ho detto che la matematica era bella? Noi percepiamo l'attrazione visiva in base al rapporto (ad esempio, la sezione aurea). Per migliaia di anni artisti, designer, architetti, ecc. Hanno intenzionalmente o involontariamente utilizzato un rapporto comune nel loro lavoro esteticamente piacevole. Qual è il numero magico? 1,62 (in realtà 1,618 ...) Non entrerò nelle origini di questo numero ma ti dirò come usarlo.
Usare la sezione aurea è molto semplice. Diciamo che vuoi trovare la larghezza delle colonne Contenuto principale e Barra laterale. Prenderesti la larghezza totale dell'area del tuo contenuto (useremo 900px per questo esempio) e dividerlo per 1,62. Come mostrato nell'esempio sopra, dividiamo 900px per 1,62 e otteniamo 555,55 px. Non è necessario essere esatti, quindi arrotonderemo a 555 px. Ora sai che il tuo elemento di contenuto principale sarà largo 555 px e la tua barra laterale sarà 345 px! Quanto è facile?!
Ma aspetta! Il divertimento non si ferma qui. Puoi anche applicare la sezione aurea alla larghezza dell'altro in relazione all'altezza o viceversa. Ciò produce elementi esteticamente gradevoli con le proporzioni del rapporto aureo.
Se sei come la maggior parte delle persone, non vorrai estrarre una calcolatrice ogni volta che desideri utilizzare questo rapporto. Per semplificare il processo, possiamo usare una semplice griglia. Tutto quello che fai è dividere la tua larghezza e / o altezza di terzi.
Ogni divisione può essere ulteriormente ridotta di terzi, producendo una griglia più dettagliata. Se leggi l'articolo precedente "Uno sguardo ravvicinato al framework CSS di Blueprint", vedrai che il framework CSS di Blueprint utilizza un sistema di griglia dettagliato. Non solo la griglia rende la progettazione più facile e veloce, ma crea anche un layout esteticamente gradevole! Se non stai già utilizzando una griglia durante la progettazione, ora potrebbe essere un buon momento per fare un tentativo. È possibile scaricare un modello di griglia per fuochi d'artificio, Photoshop e altro da http://960.gs, che è un altro fantastico framework CSS che utilizza le griglie.
Come puoi vedere, Tuts + si attiene al Golden Ratio abbastanza bene. Il primo terzo della pagina viene diviso nuovamente in terze parti per mostrare come anche la sezione di intestazione si scinde in incrementi più piccoli di terzi, molto vicino al Rapporto aureo. Non c'è da stupirsi del perché il design di NetTuts sia così accattivante!
Se sei nuovo nel design, ti incoraggio molto a trovare alcuni siti popolari, a valutare il layout degli elementi e il modo in cui rispetta il Golden Ratio e le griglie. Quindi prenditi un po 'di tempo per esercitarti a utilizzare il rapporto aureo con i tuoi elementi e posizionali nel tuo layout usando una griglia.
Accentsconagua