[cv - 2011.2] 13 - layout e proporção áurea

Layout e Proporção Áurea

Comunicação Visual - 10.11

sexta-feira, 7 de outubro de 11

Layout é o quê?


“Layout é o arranjo dos elementos de um design em relação ao espaço que eles ocupam e em conformidade com um esquema estético 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 mínimo de esforço”.


O Layout está relacionado com a disposição de elementos de texto e imagem em um design.


A maneira como os objetos são posicionados afetará o modo como o conteúdo é examinado

e recebido.


O layout pode ajudar ou impedir a recepção das informações apresentadas no projeto. Layouts criativos agregam valor ao conteúdo.


Estratégias organizacionais


Descobrir o posicionamento das coisas e em que ordem elas devem ser organizadas exige muito esforço por parte de um designer.


Classificar o mesmo conteúdo de diferentes maneiras pode chamar atenção para partes específicas e, portanto, afetar a ênfase das informações.

LOGO

sobre

localizaçãoreservas

contato

Experimente o luxo

Palazzo GiglioTexto introdutório sobre o ambiente do hotel. Link para o tour virtual e descrição de comodidades.


A conveção geralmente determina que o que vem primeiro deve ter maior significado. Ajustar a ordem para criar fluxo narrativo que acentua o foco sobre o conteúdo muda a experiência do usuário.

LOGO localização

sobrecontato

reservas

comodidades


Qual o espaço de uma página ou produto de mídia digital?


O espaço de tais produtos normalmente é a tela (do computador, da tevê, etc). Características como acabamento, interações possíveis no meio digital são considerações essenciais.

É preciso também considerar o objetivo e o segmento de público de uma obra.


Antes de sairmos colocando coisas na nossa página, digo, tela, devemos ter em mente que devemos seguir regras. Falemos um pouco sobre a proporção áurea.


Seção Áurea


Na antiquidade, a seção áurea era vista como uma maneira de representar proporções incrivelmente belas, por isso era também conhecida como proporção divina.


Dividir uma linha pelo coeficiente 8:13 significa que a relação entre o maior e o menor segmento é a mesma que entre o maior segmento e a linha toda.


A relação entre a parte "a" no desenho, e a parte "b" é tal, que a proporção entre a totalidade da linha "ab" e "a", é igual a proporção "a" e "b".


De posse dessa relação podemos construir um retângulo chamado de retângulo de ouro.


a

a


a

a

b


a

a

ba+b


Observe o retângulo menor criado, ele é proporcional ao retângulo maior.

a

a

ba+b


Se criarmos uma espiral ligando a divisão do segmento, chegamos à espiral de Fibonacci.


Objetos com essas proporções são agradáveis aos olhos e ecoam no mundo.


Muitas pessoas acreditam que a simetria é a fórmula da beleza. Até faz sentido, no entanto, se você pegar uma foto de uma pessoa, dividir exatamente no meio e espelhá-la não verá muita beleza.


Se analisarmos o rosto humano veremos que a proporção áurea existe em diversos momentos.


Exemplos na natureza


...tais pontos compõem linhas e manchas de texto. (CLM/BBDO, 2011)


Exemplos na arte


Pantheon, Grécia


Saint Jerome (Leonardo)


Une baignade à Asnières (Georges-Pierre Seurat, 1884)


http://en.wikipedia.org/wiki/Georges-Pierre_Seurat




Como isso funciona com páginas web?


Suponhamos que você quer criar um página web e que quer utilizar as proporções áureas para dividir a coluna principal da coluna secundária.

Você sabe que seu site deverá ter exatamente 1000 pixels de largura, então 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 retângulos de ouro nele. Eles tem dimensões de 299 x 185 pixels.


Observe como a grande quantidade de espaço em branco ao redor retângulos cria uma atmosfera calma e simples, em que as opções de navegação podem respirar e servir o seu propósito.


Nesse outro exemplo, cada coluna corresponde a um número de Fibonacci. Foi utilizada uma largura de base de 90 pixels. Esta largura da base é então multiplicada por um número 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 não. Para relembrar tudo o que dissemos, vejamos esse vídeo:


http://www.youtube.com/watch?v=58dmCj0wuKw




Bibliografia


Lupton, Ellen. Novos Fundamentos do Design. São Paulo: Cosac Naify, 2008.

Samara, Timothy. Elementos do Design: guia do estilo gráfico. Porto Alegre: Bookman, 2010.

Ambrose, G. Layout. Porto Alegre: Bookman, 2009.

Smashing Magazine. Applying Mathematics To Web Design. Disponível em: http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

LedStyle. A fórmula da beleza. Disponível em: http://www.tuxresources.org/blog/archives/468#more-468


http://www.tuxresources.org/blog/archives/468%23more-468

http://www.tuxresources.org/blog/archives/468%23more-468

Layout e Proporção Áurea

[email protected]


mailto:[email protected]

mailto:[email protected]

[cv - 2011.2] 13 - layout e proporção áurea

Documents

Transcript of [cv - 2011.2] 13 - layout e proporção áurea