2011-06-21 6 views
5

Diciamo che ho un layout a 2 colonne di larghezza 1000 px con spazio di margine di 100 px (margine) e 50px a sinistra ea destra .. Come si applica la sezione aurea a questo layout?Sezione aurea, con o senza riempimento/margine?

Metodo Uno

c1+c2=800px; 
c1/c2=1.618; 
=>c1= 495px and c2= 305px 

50px, column 1 (495px), 100px, column 2 (305px), 50px 

Metodo due calcolare la larghezza delle colonne ignorando i margini.

c1+c2=1000px 
c1/c2=1.618 

=>c1= 618px c2=392px 

effettiva larghezza della colonna dopo l'aggiunta dei margini/imbottiture

c1=618px -100px = 518px 
c2=392px -100px = 292px 
50px, column 1 (51), 100px, column 2 (305px), 50px 

% difference in two methods 518-495/518= 4% 

La differenza 4% non farebbe alcuna differenza, ma la differenza% sarà più quando si tratta di layout strette.

Se vedete questo articolo, http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

Nel primo esempio presero imbottitura fuori del rapporto aureo, e nell'altra fecero parte imbottitura del GR.

Qualcuno può suggerire quale metodo è migliore.

Sto sviluppando questo layout per un tema wordpress personalizzabile, sto fornendo un'opzione per scegliere il layout fluido. Non riesco a usare il primo metodo con la sezione aurea (posso dire ??).

Posso utilizzare il metodo 2 senza perdere l'armonia che GR apporta al design.

Si prega di includere i collegamenti e ref sostenere la vostra risposta.

PS: Ho già postato questa domanda nella sezione di progettazione grafica, mi è stato suggerito di postarlo qui. Spero di non violare alcuna regola.

risposta

1

posso puntare a questo meraviglioso articolo sul rapporto aureo:

http://www.alistapart.com/articles/more-meaningful-typography/

contiene anche un link ad uno strumento utile per calcolare i numeri sulla base aurea e un altro paio di rapporti. Ecco il link per comodità:

http://modularscale.com/

+0

Se si legge un po 'più, scoprirete che è su tutto, il layout incluso, non solo tipografia. Per favore, leggetelo fino alla fine. –

Problemi correlati