Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

La sezione aurea in Web Design

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Maria Elena Scuteri (you can also view the original English article)

La matematica è bella. Suona un po' strani? Certo che pensavo quando ho iniziato a progettare. Matematica è così rigida e spesso noioso, o almeno così pensavo. Si sarebbe sorpreso di scoprire che la maggior parte esteticamente piacevoli disegni, opere d'arte, oggetti e anche le persone hanno matematica in comune. In particolare il rapporto aureo, noto anche come la divina proporzione, che è designata con la lettera greca Φ (phi). Questo tutorial copre l'anatomia e il layout di un sito Web e come si riferisce il rapporto aureo.


1. Anatomia di una pagina Web

Gli elementi di una pagina web sono come organi; Essi sono fondamentali per una pagina web correttamente funzionante ed esteticamente piacevole.

Questi sono i principali elementi di una pagina web. Ci sono molti modi diversi per organizzarli, ma questo è forse il più comune layout di base usato online.


2. contenitore

Tutte le pagine web utilizzano un contenitore e per lo stesso scopo; per contenere gli elementi della pagina, tuttavia il modo è compiuto varia. Ad esempio, il tag body o un div è più comunemente usato. In passato, è stato utilizzato anche un tavolo (non utilizzare una tabella come il contenitore della pagina, si tratta di un metodo ammortizzato). Pensare il contenitore come le pareti esterne della vostra casa in cui trovano quindi la vostra camere da letto, cucina, soggiorno, ecc.

Tipi di contenitore:

  1. Liquido: Si espande per riempire la larghezza della finestra del browser.
  2. Fisso: Una larghezza specifica è scegliere quale non cambia indipendentemente dalla dimensione della finestra di browser.


3. intestazione

L'intestazione non è davvero un elemento specifico, anche se alcuni possono considerare che sia. Esso è più generalmente utilizzato riferendosi alla sezione superiore della pagina web dove si trovano il vostro logo, navigazione, slogan, ecc. Molte persone preferiscono tenere questi elementi contenuti all'interno di un div per lo styling più facile di pagina, elemento di separazione e/o contenimento elemento. L'intestazione sarebbe considerato un contenitore così avrebbe due tipi da scegliere: liquido o fisso come accennato in precedenza.


4. logo

Il logo è la tua identità e branding. La posizione più comune per il logo è all'interno dell'intestazione, allineato a sinistra. Abbiamo letto da sinistra a destra, dall'alto in basso, così il vostro logo sarà probabilmente il primo elemento tuo visitatori guardare.


5. navigazione

Pagina di navigazione è uno degli elementi più importanti; i visitatori bisogno di utilizzare il tuo sito Web. Dovrebbe essere facile da trovare e uso, motivo per cui quasi sempre si trova all'interno dell'intestazione o almeno vicino alla parte superiore della pagina. A volte entrambi i tipi di navigazione sono utilizzati per siti Web ad alto contenuto.

Tipi di navigazione:

  1. Orizzontale: Una serie di collegamenti visualizzati inline, solitamente indicato come "navigazione".
  2. Verticale: Una serie di collegamenti visualizzati come una pila verticale, solitamente definito come "menu".


6. principali contenuti

Come tutti sanno (o dovrebbero), il contenuto è re! Quando gli utenti visitano il tuo sito, questo è l'elemento che staranno cercando principalmente. Dovrebbe essere il principale punto focale di una pagina web visitatori di trovare rapidamente ciò che stanno cercando.


7. sidebar

La barra laterale è l'elemento con il contenuto secondario come pubblicità, Cerca nel sito, link di abbonamento (RSS, Twitter, Email, ecc.), metodi di contatto, ecc. Questo elemento non è necessario, anche se uso molti siti Web. Più spesso è bene allineato ma può essere allineato a sinistra o entrambe (due barre laterali) a condizione che esso non interrompono la visualizzazione di contenuto principale. Per i siti Web che utilizzano la navigazione verticale e orizzontale, la barra laterale è spesso sostituita con l'elemento di navigazione verticale.


8. piè di pagina

Alla fine di una pagina web dovrebbe sempre utilizzare un piè di pagina per informare i visitatori che hanno raggiunto il completamento della vostra pagina web. Come l'intestazione, il piè di pagina non è realmente un elemento specifico, ma più di una sezione di contenimento. All'interno il piè di pagina sarà principalmente informazioni sul copyright, giuridiche e contattare. È una buona idea includere alcuni link alle sezioni più importanti del tuo sito come la parte superiore della pagina, pagina iniziale, pagina dei contatti, ecc. Alcuni siti Web utilizzare quest'area come un'opportunità per parlare relativi materiali o altre informazioni importanti.


9. "spazio vuoto"

Si tratta di qualsiasi area della pagina web che non sono coperti dalla tipografia o altri contenuti. Si può sentire il forte bisogno di riempire come molto svuotare lo spazio possibile, ma non farlo! Spazio vuoto è altrettanto importante per un buona pagina web design come contenuto per essere utilizzato. Si può vedere come il sito di NetTuts utilizza spazio vuoto in modo molto efficace per aiutare a guidare i visitatori attraverso i contenuti, creare pagina equilibrio e dare un buon senso di separazione contenuto.

Così che copre l'anatomia di una pagina web. Ora diamo un'occhiata a come la sezione aurea si riferisce a questi elementi.


10. la sezione aurea e utilizzando griglie

Ricordarsi più presto di quando ho detto di matematica era bella? Noi percepiamo il richiamo visuale sulla base del rapporto (cioè The Golden Ratio). Per migliaia di anni artisti, designer, architetti, ecc. hanno usato un rapporto comune nel loro lavoro che è esteticamente intenzionalmente o involontariamente. Qual è il numero magico? 1.62 (in realtà 1,618...) Non voglio entrare nelle origini di questo numero, ma vi dirò come usarlo.

Utilizzando la sezione aurea è molto semplice. Consente di dire che si desidera trovare la larghezza delle colonne di contenuto principale e la barra laterale. Si dovrebbe prendere la larghezza totale dell'area di contenuto (useremo 900px per questo esempio) e che dividere per 1,62. Come mostrato nell'esempio precedente abbiamo dividere 900px per 1,62 e ottenere 555.55px. Non abbiamo bisogno di essere esatta, quindi si completano a 555px. Ora sai che il principale elemento di contenuto sarà 555px ampia e sidebar sarà 345px! Come è facile che?!

Ma aspetta! Il divertimento non si ferma qui. È inoltre possibile applicare la sezione aurea di larghezza di altro elemento in relazione alla sua altezza o viceversa. Questo produce elementi esteticamente piacevoli con le proporzioni della sezione aurea.


11. uso di griglie

Se siete come la maggior parte delle persone, però, non si vuole tirare fuori una calcolatrice in ogni volta che si desidera utilizzare questo rapporto. Per semplificare il processo, possiamo usare una semplice griglia. Tutto ciò che fai è dividere la larghezza / altezza per terzi.

Ogni divisione può essere ulteriormente ridotto di terzi, producendo una griglia più dettagliata. Se hai letto l'articolo precedente "A Close Look At the Blueprint CSS quadro" vedrete che il framework Blueprint CSS utilizza un sistema a griglia dettagliata. Non solo la griglia rende progettazione più semplice e veloce, ma crea anche un layout esteticamente piacevole! Se non si utilizza già una griglia durante la progettazione, ora può essere un buon momento per fare un tentativo. È possibile scaricare un modello di griglia per fireworks, photoshop e altro ancora da http://960.gs, che è un altro fantastico framework CSS che utilizza griglie.

Come si può vedere, Tuts + rispetta il rapporto aureo abbastanza bene. Il terzo superiore della pagina è diviso ancora in tre parti per mostrare come anche la sezione di intestazione si suddivide in incrementi più piccoli dei terzi, molto vicino al rapporto aureo. Nessuna meraviglia perché il design di NetTuts è così attraente!

Se sei nuovo di design che altamente vi incoraggio a trovare alcuni siti popolari, valutare la loro layout di elemento e come rispetta il rapporto aureo e griglie. Poi prendere qualche tempo di pratica utilizzando la sezione aurea con gli elementi e metterli nel vostro layout utilizzando una griglia.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.