Layout Áureo Proporções

Layout e Proporo urea
Comunicao Visual - 10.11
sexta-feira, 7 de outubro de 11
Layout o qu?
Layout o arranjo dos elementos de um design em relao ao espao que eles ocupam e em conformidade com um esquema esttico geral. (Ambrose, 2009)
E isso serve para qu?
O principal objetivo do layout apresentar os elementos visuais e textuais que precisam ser transmitidos de uma forma que o leitor os receba com o mnimo de esforo.
O Layout est relacionado com a disposio de elementos de texto e imagem em um design.
A maneira como os objetos so posicionados afetar o modo como o contedo examinado e recebido.
O layout pode ajudar ou impedir a recepo das informaes apresentadas no projeto. Layouts criativos agregam valor ao contedo.
Estratgias organizacionais
Descobrir o posicionamento das coisas e em que ordem elas devem ser organizadas exige muito esforo por parte de um designer.
LOGO
Experimente o luxo
Palazzo!Giglio
sobre localizao reservas contato
Texto introdutrio sobre o ambiente do hotel. Link para o tour virtual e descrio de comodidades.
Classicar o mesmo contedo de diferentes maneiras pode chamar ateno para partes especcas e, portanto, afetar a nfase das informaes.
sobre contato
LOGO
localizao
reservas
comodidades
A conveo geralmente determina que o que vem primeiro deve ter maior signicado. Ajustar a ordem para criar uxo narrativo que acentua o foco sobre o contedo muda a experincia do usurio.
Qual o espao de uma pgina ou produto de mdia digital?
O espao de tais produtos normalmente a tela (do computador, da tev, etc). Caractersticas como acabamento, interaes possveis no meio digital so consideraes essenciais. preciso tambm considerar o objetivo e o segmento de pblico de uma obra.
Antes de sairmos colocando coisas na nossa pgina, digo, tela, devemos ter em mente que devemos seguir regras. Falemos um pouco sobre a proporo urea.
Seo urea
Na antiquidade, a seo urea era vista como uma maneira de representar propores incrivelmente belas, por isso era tambm conhecida como proporo divina.
Dividir uma linha pelo coeciente 8:13 signica que a relao entre o maior e o menor segmento a mesma que entre o maior segmento e a linha toda.
A relao entre a parte "a" no desenho, e a parte "b" tal, que a proporo entre a totalidade da linha "ab" e "a", igual a proporo "a" e "b".
De posse dessa relao podemos construir um retngulo chamado de retngulo de ouro.

a a+b
a a+b
Observe o retngulo menor criado, ele proporcional ao retngulo maior.

Se criarmos uma espiral ligando a diviso do segmento, chegamos espiral de Fibonacci.

Objetos com essas propores so agradveis aos olhos e ecoam no mundo.
Muitas pessoas acreditam que a simetria a frmula da beleza. At faz sentido, no entanto, se voc pegar uma foto de uma pessoa, dividir exatamente no meio e espelh-la no ver muita beleza.
Se analisarmos o rosto humano veremos que a proporo urea existe em diversos momentos.
Exemplos na natureza
...tais pontos compem linhas e manchas de texto. (CLM/BBDO, 2011)
Exemplos na arte
Pantheon, Grcia
Saint Jerome (Leonardo)



Une baignade Asnires (GeorgesPierre Seurat, 1884)



Como isso funciona com pginas web?
Suponhamos que voc quer criar um pgina web e que quer utilizar as propores ureas para dividir a coluna principal da coluna secundria. Voc sabe que seu site dever ter exatamente 1000 pixels de largura, ento o nico valor que temos o todo (segmento ureo + complemento).
Se voc tiver o todo e quiser achar o tamanho do segmento ureo: todo!x 0,618. Assim:
1000 pixels x 0,618 = 618 pixels
O layout acima tem seis retngulos de ouro nele. Eles tem dimenses de 299 x 185 pixels.
Observe como a grande quantidade de espao em branco ao redor retngulos cria uma atmosfera calma e simples, em que as opes de navegao podem respirar e servir o seu propsito.
Nesse outro exemplo, cada coluna corresponde a um nmero de Fibonacci. Foi utilizada uma largura de base de 90 pixels. Esta largura da base ento multiplicada por um nmero de Fibonacci para obter a largura total para uma determinada coluna.
A primeira coluna tem uma largura de 180 pixels (90 x 2), a segunda coluna tem uma largura de 270 pixels (90 x 3); ea terceira coluna tem uma largura de 720 pixels (90 x 8).
E acabou?
Sim e no. Para relembrar tudo o que dissemos, vejamos esse vdeo:
http://www.youtube.com/watch?v=58dmCj0wuKw
Bibliograa
Lupton, Ellen. Novos Fundamentos do Design. So Paulo: Cosac Naify, 2008. Samara, Timothy. Elementos do Design: guia do estilo grco. Porto Alegre: Bookman, 2010. Ambrose, G. Layout. Porto Alegre: Bookman, 2009. Smashing Magazine. Applying Mathematics To Web Design. Disponvel em: http://www.smashingmagazine.com/2010/02/09/applyingmathematics-to-web-design/ LedStyle. A frmula da beleza. Disponvel em: http://www.tuxresources.org/blog/archives/468#more-468
Layout e Proporo urea

eduardonovais@virtual.ufc.br

Layout Áureo Proporções

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Layout Áureo Proporções

Cargado por

Copyright:

Formatos disponibles

Layout e Proporo urea

Comunicao Visual - 10.11

E isso serve para qu?

O Layout est relacionado com a disposio de elementos de texto e imagem em um design.

Qual o espao de uma pgina ou produto de mdia digital?

De posse dessa relao podemos construir um retngulo chamado de retngulo de ouro.

Observe o retngulo menor criado, ele proporcional ao retngulo maior.

Se criarmos uma espiral ligando a diviso do segmento, chegamos espiral de Fibonacci.

Objetos com essas propores so agradveis aos olhos e ecoam no mundo.

...tais pontos compem linhas e manchas de texto. (CLM/BBDO, 2011)

Saint Jerome (Leonardo)

Saint Jerome (Leonardo)

Saint Jerome (Leonardo)

Une baignade Asnires (GeorgesPierre Seurat, 1884)

Une baignade Asnires (GeorgesPierre Seurat, 1884)

Une baignade Asnires (GeorgesPierre Seurat, 1884)

Como isso funciona com pginas web?

1000 pixels x 0,618 = 618 pixels

Layout e Proporo urea

También podría gustarte