O documento discute conceitos e aplicações de grids para web, incluindo: 1) Explica proporções como a Regra de Ouro e Sequência de Fibonacci; 2) Apresenta exemplos de layouts com 1, 2, 3 e 4 colunas; 3) Discutem sistemas de grids mais utilizados, como de 12 e 16 colunas; 4) Fornece dicas para criação de grids, mencionando canvas, gutters e alinhamento.
O objetivo é aplicar esses conceitos para recriar um portfólio anterior utilizando grids.
3. A proporção áurea é dada pela razão: 8:13
quinta-feira, 3 de novembro de 11
4. Colocando isso em valores, chegamos ao número: 0,618
quinta-feira, 3 de novembro de 11
5. Essa é a razão para chegarmos à proporção áurea.
quinta-feira, 3 de novembro de 11
6. Fiz em proporção de 2:3 e está em Fibonacci.
Estou certo?
quinta-feira, 3 de novembro de 11
7. Apesar de SIM, você utilizar Fibonacci a proporção está errada. Entre
0,667 e 0,618 existe uma margem grande de erro.
quinta-feira, 3 de novembro de 11
8. O número φ é conseguido à medida que se avança mais e mais ao longo
da seqüência.
quinta-feira, 3 de novembro de 11
14. Como era, então a solução do exercício?
quinta-feira, 3 de novembro de 11
15. Se a margem máxima foi dada, bastava multiplicar esse valor por 0,618.
Assim, teríamos:
950 x 0,618 = 587,1 ou
960 x 0,618 = 593,28
quinta-feira, 3 de novembro de 11
16. Com esse valor geraríamos a primeira - e principal - coluna. No valor de
587 ou 591 píxels.
quinta-feira, 3 de novembro de 11
17. 587 ou 593 px
950 ou 960 px
quinta-feira, 3 de novembro de 11
18. Com o valor resultante, construiríamos as colunas secundárias. Para essa
fase, era facultativo usar a proporção áurea. Assim, poderia ser
simplesmente utilizado a divisão do espaço por 2 ou o número áureo.
quinta-feira, 3 de novembro de 11
19. Quem fez a divisão chegou a valores próximos aos valores abaixo:
950 - 587 = 363 363 / 2 = 181 px ou
960 - 593 = 367 367 / 2 = 183 px
quinta-feira, 3 de novembro de 11
20. 587 ou 593 px
181 ou 183
950 ou 960 px
quinta-feira, 3 de novembro de 11
24. Quem utilizou a proporção áurea novamente chegou a valores próximos
aos de abaixo:
363 x 0,618 = 224 363 - 224 = 139
367 x 0,618 = 226 367 - 226 = 141
quinta-feira, 3 de novembro de 11
37. O formato ou o grid de uma página pode ser criado a partir de relações
proporcionais. Os diferentes elementos são produtos das dimensões da
página.
quinta-feira, 3 de novembro de 11
38. Um dos maiores problemas em trabalhar com grades em páginas web é
que você muitas vezes não pode fazer muito sobre proporções vertical.
Assim, o foco é geralmente na disposição horizontal, o que geralmente
significa colunas.
quinta-feira, 3 de novembro de 11
46. Duas colunas são utilizadas e perfeitas para a apresentação de conteúdo
com navegação more / archives / whatever ao lado.
Variações populares incluem o sidebar fixo ou área de setup.
quinta-feira, 3 de novembro de 11
48. Layouts com duas colunas leva a uma decisão que não existia no
exemplo anterior: Colunas iguais ou não?
quinta-feira, 3 de novembro de 11
49. Normalmente é difícil dar errado com larguras em 1:1.
É um pouco difícil escolher dimensionamento diferenciados pelas várias
regras possíveis. Poderíamos escolher o já falado 8:13, 3:4 e assim em
diante.
quinta-feira, 3 de novembro de 11
59. Em layouts com 4 colunas as restrições de tamanho de tela começa a
ficar mais evidentes. Com apenas alguns pixels por coluna, raramente faz
sentido confiar em 4 colunas iguais, lado a lado em um site.
quinta-feira, 3 de novembro de 11
62. Mais e mais colunas...
quinta-feira, 3 de novembro de 11
63. Atualmente os sistemas de grids mais utilizados para a criação de
páginas web é o de 12 ou 16 colunas.
quinta-feira, 3 de novembro de 11
64. Calma! Com isso não significa dizer que você tem que colocar tudo no
seu projeto dividido em 12, ou 16. Esse sistema é usado como base para
gerar o tamanho das colunas reais.
quinta-feira, 3 de novembro de 11
65. Tapbots
(12 colunas)
quinta-feira, 3 de novembro de 11
66. Tapbots
(12 colunas)
quinta-feira, 3 de novembro de 11
67. Sony Music
(16 colunas)
quinta-feira, 3 de novembro de 11
68. Sony Music
(16 colunas)
quinta-feira, 3 de novembro de 11
69. Para facilitar a vida, existem serviços como o 360.gs que fornece
modelos prontos para você montar seu grid com mais facilidade.
quinta-feira, 3 de novembro de 11
74. O tamanho da tela web para o projeto de um grid fixo é normalmente
determinado pelo tamanho da janela do navegador, que por sua vez é
determinado por resolução da tela do usuário.
quinta-feira, 3 de novembro de 11
75. Como já havíamos falado, o tamanho recomendado do Canvas - da tela -
é de 1000 x 581 px.
quinta-feira, 3 de novembro de 11
76. Ok, começar a moldar
quinta-feira, 3 de novembro de 11
77. Utilizaremos o exemplo dado por Mark Boulton, ele utiliza o canvas em
800x600 px, mas tudo pode ser facilmente adaptado para nosso padrão.
quinta-feira, 3 de novembro de 11
78. Ele começa aplicando índices a razão para o Canvas. No exemplo,
utiliza-se a largura de 760px.
quinta-feira, 3 de novembro de 11
80. A grade foi projetada inicialmente para uma área de conteúdo e
navegação baseada na Regra dos Terços.
quinta-feira, 3 de novembro de 11
81. Estamos até o momento falando em medidas horizontais.
A medida vertical também é importante, mas este é o lugar onde nós
podemos ter problemas com a concepção de grids fixos na web.
quinta-feira, 3 de novembro de 11
83. Gutters, como já vimos, são as lacunas entre as colunas. Eles são usados
para que os textos, imagens, etc. não fiquem colados ou sobrepostos.
quinta-feira, 3 de novembro de 11
84. Geralmente as colunas que criamos, utilizando Web Standards, são
"divs", que são dadas larguras e posicionado usando CSS.
Lidamos com o gutter como parte de colunas e os implementamos
usando padding, ou então utilizando margins.
quinta-feira, 3 de novembro de 11
89. A maior parte do trabalho de design, se você excluir esboçar com um
lápis, é feito em Photoshop ou Illustrator.
tenha muito cuidado na elaboração de um grid preciso e com a
sobreposição de elementos de conteúdo, garantindo o alinhamento.
quinta-feira, 3 de novembro de 11
91. A tarefa de você é (re)criar o portfólio realizado para a disciplina da
Autoração Web agora utilizando os conceitos de Grid.
quinta-feira, 3 de novembro de 11
92. Para isso no documento criado deverá constar inicialmente o layout
entregue na disciplina de Autoração Web.
quinta-feira, 3 de novembro de 11
93. Após isso, deverá ser criada uma grade para as proporções indicas como
padrão para a web (1000x581px).
O sistema de colunas e seus gutters deverá ser criado para a proporção
escolhida (regra de ouro, regra dos terços ou sistema utilizando 12 ou 16
colunas).
A imagem do sistema de grid deverá ser incluída no documento.
quinta-feira, 3 de novembro de 11
94. Após isso, os elementos do seu layout deverão ser reposicionados e
alinhados de forma a criar um trabalho harmônico.
Leve em consideração que já falamos também sobre hierarquias e
orientação de leitura. Explicações sobre a disposição dos elementos
deverão também ser feitas.
quinta-feira, 3 de novembro de 11
95. Entrega:
Data de entrega: 12/11
Enviar para: comvisual20112@gmail.com
Título do E-mail: Trabalho 09 - Turma <XX> - <Nome>
Formato: Word (nome_do_aluno.doc)
PS: E-mails enviados fora do formato perderão automaticamente 1,0
ponto.
quinta-feira, 3 de novembro de 11
97. 960 Grid System. Disponível em: http://960.gs/
Ambrose, Garvin. Grids. Porto Alegre: Bookman, 2009.
Ambrose, Garvin. Layout. Porto Alegre: Bookman, 2009.
Avellar e Duarte. Tamanho e resolução da página. Disponível em: http://
www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm
Boulton, Mark. Five simple steps to designing grid systems. Disponível
em: http://www.markboulton.co.uk/journal/comments/five-simple-steps-
to-designing-grid-systems-part-1
CROWDCTRL. Grids make eyes happy: How to use grid. Disponível:
http://www.gunsbycomputer.com/2006/11/09/grids-make-eyes-happy
quinta-feira, 3 de novembro de 11
98. CSS4Design. Nombre d’or, suite de Fibonacci et autres grilles de mise en
page pour le design web. Disponível em: http://css4design.com/nombre-
d-or-suite-de-fibonacci-et-autres-grilles-de-mise-en-page-pour-le-
design-web
Desenhantes. O livro perfeito. Disponível em: http://
desenhantes.wordpress.com/2011/02/25/o-livro-perfeito/
Lupton, Ellen. Novos Fundamentos do Design. São Paulo: Caosac Naify,
2008.
Nilsen, Jakob. F-Shaped Pattern For Reading Web Content. Disponível
em: http://www.useit.com/alertbox/reading_pattern.html
quinta-feira, 3 de novembro de 11
99. Radfahrer, Luli. Para você que (ainda) acredita em banners. Disponível
em: http://www.luli.com.br/2007/05/04/para-voce-que-ainda-acredita-
em-banners/
Smashing Magazine. Applying Mathematics To Web Design. Disponível
em: http://www.smashingmagazine.com/2010/02/09/applying-
mathematics-to-web-design/
Smashing Magazine. Designing with grid based approach. Disponível em:
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-
based-approach/
quinta-feira, 3 de novembro de 11
100. Grids
eduardonovais@virtual.ufc.br
quinta-feira, 3 de novembro de 11