[cv - 2011.2] 13 - layout e proporção áurea
TRANSCRIPT
![Page 1: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/1.jpg)
Layout e Proporção Áurea
Comunicação Visual - 10.11
sexta-feira, 7 de outubro de 11
![Page 2: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/2.jpg)
Layout é o quê?
sexta-feira, 7 de outubro de 11
![Page 3: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/3.jpg)
“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)
sexta-feira, 7 de outubro de 11
![Page 4: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/4.jpg)
E isso serve para quê?
sexta-feira, 7 de outubro de 11
![Page 5: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/5.jpg)
“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”.
sexta-feira, 7 de outubro de 11
![Page 6: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/6.jpg)
O Layout está relacionado com a disposição de elementos de texto e imagem em um design.
sexta-feira, 7 de outubro de 11
![Page 7: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/7.jpg)
A maneira como os objetos são posicionados afetará o modo como o conteúdo é examinado
e recebido.
sexta-feira, 7 de outubro de 11
![Page 8: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/8.jpg)
O layout pode ajudar ou impedir a recepção das informações apresentadas no projeto. Layouts criativos agregam valor ao conteúdo.
sexta-feira, 7 de outubro de 11
![Page 9: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/9.jpg)
Estratégias organizacionais
sexta-feira, 7 de outubro de 11
![Page 10: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/10.jpg)
Descobrir o posicionamento das coisas e em que ordem elas devem ser organizadas exige muito esforço por parte de um designer.
sexta-feira, 7 de outubro de 11
![Page 11: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/11.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 12: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/12.jpg)
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
sexta-feira, 7 de outubro de 11
![Page 13: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/13.jpg)
Qual o espaço de uma página ou produto de mídia digital?
sexta-feira, 7 de outubro de 11
![Page 14: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/14.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 15: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/15.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 16: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/16.jpg)
Seção Áurea
sexta-feira, 7 de outubro de 11
![Page 17: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/17.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 18: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/18.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 19: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/19.jpg)
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".
sexta-feira, 7 de outubro de 11
![Page 20: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/20.jpg)
De posse dessa relação podemos construir um retângulo chamado de retângulo de ouro.
sexta-feira, 7 de outubro de 11
![Page 21: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/21.jpg)
a
a
sexta-feira, 7 de outubro de 11
![Page 22: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/22.jpg)
a
a
b
sexta-feira, 7 de outubro de 11
![Page 23: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/23.jpg)
a
a
ba+b
sexta-feira, 7 de outubro de 11
![Page 24: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/24.jpg)
Observe o retângulo menor criado, ele é proporcional ao retângulo maior.
a
a
ba+b
sexta-feira, 7 de outubro de 11
![Page 25: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/25.jpg)
Se criarmos uma espiral ligando a divisão do segmento, chegamos à espiral de Fibonacci.
sexta-feira, 7 de outubro de 11
![Page 26: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/26.jpg)
Objetos com essas proporções são agradáveis aos olhos e ecoam no mundo.
sexta-feira, 7 de outubro de 11
![Page 27: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/27.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 28: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/28.jpg)
Se analisarmos o rosto humano veremos que a proporção áurea existe em diversos momentos.
sexta-feira, 7 de outubro de 11
![Page 29: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/29.jpg)
Exemplos na natureza
sexta-feira, 7 de outubro de 11
![Page 30: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/30.jpg)
...tais pontos compõem linhas e manchas de texto. (CLM/BBDO, 2011)
sexta-feira, 7 de outubro de 11
![Page 31: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/31.jpg)
sexta-feira, 7 de outubro de 11
![Page 32: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/32.jpg)
sexta-feira, 7 de outubro de 11
![Page 33: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/33.jpg)
Exemplos na arte
sexta-feira, 7 de outubro de 11
![Page 34: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/34.jpg)
Pantheon, Grécia
sexta-feira, 7 de outubro de 11
![Page 35: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/35.jpg)
sexta-feira, 7 de outubro de 11
![Page 36: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/36.jpg)
Saint Jerome (Leonardo)
sexta-feira, 7 de outubro de 11
![Page 37: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/37.jpg)
Saint Jerome (Leonardo)
sexta-feira, 7 de outubro de 11
![Page 38: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/38.jpg)
Saint Jerome (Leonardo)
sexta-feira, 7 de outubro de 11
![Page 39: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/39.jpg)
Une baignade à Asnières (Georges-Pierre Seurat, 1884)
sexta-feira, 7 de outubro de 11
![Page 40: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/40.jpg)
Une baignade à Asnières (Georges-Pierre Seurat, 1884)
sexta-feira, 7 de outubro de 11
![Page 41: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/41.jpg)
Une baignade à Asnières (Georges-Pierre Seurat, 1884)
sexta-feira, 7 de outubro de 11
![Page 42: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/42.jpg)
Como isso funciona com páginas web?
sexta-feira, 7 de outubro de 11
![Page 43: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/43.jpg)
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).
sexta-feira, 7 de outubro de 11
![Page 44: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/44.jpg)
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
sexta-feira, 7 de outubro de 11
![Page 45: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/45.jpg)
sexta-feira, 7 de outubro de 11
![Page 46: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/46.jpg)
O layout acima tem seis retângulos de ouro nele. Eles tem dimensões de 299 x 185 pixels.
sexta-feira, 7 de outubro de 11
![Page 47: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/47.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 48: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/48.jpg)
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.
sexta-feira, 7 de outubro de 11
![Page 49: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/49.jpg)
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).
sexta-feira, 7 de outubro de 11
![Page 50: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/50.jpg)
E acabou?
sexta-feira, 7 de outubro de 11
![Page 51: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/51.jpg)
Sim e não. Para relembrar tudo o que dissemos, vejamos esse vídeo:
sexta-feira, 7 de outubro de 11
![Page 52: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/52.jpg)
http://www.youtube.com/watch?v=58dmCj0wuKw
sexta-feira, 7 de outubro de 11
![Page 53: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/53.jpg)
Bibliografia
sexta-feira, 7 de outubro de 11
![Page 54: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/54.jpg)
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
sexta-feira, 7 de outubro de 11
![Page 55: [cv - 2011.2] 13 - layout e proporção áurea](https://reader031.vdocuments.mx/reader031/viewer/2022020110/555ad80ed8b42a62528b4ac4/html5/thumbnails/55.jpg)
Layout e Proporção Áurea
sexta-feira, 7 de outubro de 11