1. Layout e Proporção Áurea
Comunicação Visual - 10.11
sexta-feira, 7 de outubro de 11
2. Layout é o quê?
sexta-feira, 7 de outubro de 11
3. “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
4. E isso serve para quê?
sexta-feira, 7 de outubro de 11
5. “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
6. O Layout está relacionado com a disposição de
elementos de texto e imagem em um design.
sexta-feira, 7 de outubro de 11
7. 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
8. 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
10. 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
11. LOGO
Experimente o luxo
Palazzo Giglio
sobre
Texto introdutório sobre o
localização
ambiente do hotel. Link para o
reservas
contato
tour virtual e descrição de
comodidades.
Classificar o mesmo conteúdo de diferentes maneiras pode chamar atenção para
partes específicas e, portanto, afetar a ênfase das informações.
sexta-feira, 7 de outubro de 11
12. sobre
contato
LOGO localização
reservas
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.
sexta-feira, 7 de outubro de 11
13. Qual o espaço de uma página ou produto de mídia
digital?
sexta-feira, 7 de outubro de 11
14. 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
15. 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
17. 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
18. 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
19. 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
20. De posse dessa relação podemos construir um
retângulo chamado de retângulo de ouro.
sexta-feira, 7 de outubro de 11
24. a
a b
a+b
Observe o retângulo menor criado, ele é
proporcional ao retângulo maior.
sexta-feira, 7 de outubro de 11
25. Se criarmos uma espiral ligando a divisão do
segmento, chegamos à espiral de Fibonacci.
sexta-feira, 7 de outubro de 11
26. Objetos com essas proporções são agradáveis aos olhos e ecoam no
mundo.
sexta-feira, 7 de outubro de 11
27. 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
28. Se analisarmos o rosto humano veremos que a proporção áurea existe em diversos
momentos.
sexta-feira, 7 de outubro de 11
43. 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
44. 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
46. 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
47. 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
48. 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
49. 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
54. 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
55. Layout e Proporção Áurea
eduardonovais@virtual.ufc.br
sexta-feira, 7 de outubro de 11