[cv - 2011.2] 16 - grids (cont)

Grids
Comunicação Visual - 10.11

quinta-feira, 3 de novembro de 11

Vamos re-começar?


A proporção áurea é dada pela razão: 8:13


Colocando isso em valores, chegamos ao número: 0,618


Essa é a razão para chegarmos à proporção áurea.


Fiz em proporção de 2:3 e está em Fibonacci.
Estou certo?


Apesar de SIM, você utilizar Fibonacci a proporção está errada. Entre
0,667 e 0,618 existe uma margem grande de erro.


O número φ é conseguido à medida que se avança mais e mais ao longo
da seqüência.


1/1 1,000
1/2 0,500
2/3 0,667
3/5 0,600
5/8 0,625
8/13 0,615
13/21 0,619
21/34 0,618
34/55 0,618
55/89 0,618
89/144 0,618
144/233 0,618


E como ﬁca isso visualmente falando?


Proporção 2:3


Proporção 8:13


Como era, então a solução do exercício?


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


Com esse valor geraríamos a primeira - e principal - coluna. No valor de
587 ou 591 píxels.


587 ou 593 px

950 ou 960 px

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.


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


587 ou 593 px
181 ou 183

950 ou 960 px

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


Por ﬁm, vale a pena revisar alguns conceitos
importantes:


Isso é uma coluna


Isso é uma linha


Isso é uma célula


Grid para web


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.


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
signiﬁca colunas.


1 Coluna


Esse layout começou a ser utilizado logo no início da internet,
aproximadamente em 1994.


Yahoo!
(1994)


Storelicious vCard Theme
(Storelicious Themes, 2010)


2 Colunas


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 ﬁxo ou área de setup.


Layouts com duas colunas leva a uma decisão que não existia no
exemplo anterior: Colunas iguais ou não?


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.


Stuff & Nonsense
(2011)


Proporção em 8:13

WeightShift
(2011)


Proporção em 3:2

3 Colunas


Aumenta o número de colunas, aumenta a quantidade de opções.


StopDesign
(2011)


4 Colunas


Em layouts com 4 colunas as restrições de tamanho de tela começa a
ﬁcar mais evidentes. Com apenas alguns pixels por coluna, raramente faz
sentido conﬁar em 4 colunas iguais, lado a lado em um site.


Mais e mais colunas...


Atualmente os sistemas de grids mais utilizados para a criação de
páginas web é o de 12 ou 16 colunas.


Calma! Com isso não signiﬁca 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.


Tapbots
(12 colunas)


Sony Music
(16 colunas)


Para facilitar a vida, existem serviços como o 360.gs que fornece
modelos prontos para você montar seu grid com mais facilidade.


360 Grid System
(2011)


Dicas para criar seu Grid


O Canvas


O tamanho da tela web para o projeto de um grid ﬁxo é normalmente
determinado pelo tamanho da janela do navegador, que por sua vez é
determinado por resolução da tela do usuário.


Como já havíamos falado, o tamanho recomendado do Canvas - da tela -
é de 1000 x 581 px.


Ok, começar a moldar


Utilizaremos o exemplo dado por Mark Boulton, ele utiliza o canvas em
800x600 px, mas tudo pode ser facilmente adaptado para nosso padrão.


Ele começa aplicando índices a razão para o Canvas. No exemplo,
utiliza-se a largura de 760px.


A grade foi projetada inicialmente para uma área de conteúdo e
navegação baseada na Regra dos Terços.


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 ﬁxos na web.


Gutters


Gutters, como já vimos, são as lacunas entre as colunas. Eles são usados
para que os textos, imagens, etc. não ﬁquem colados ou sobrepostos.


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.


Criando o layout


O mais importante sobre grids é que você deve alinhar os itens
constantemente sobre as linhas de grade.


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.


Tarefa


A tarefa de você é (re)criar o portfólio realizado para a disciplina da
Autoração Web agora utilizando os conceitos de Grid.


Para isso no documento criado deverá constar inicialmente o layout
entregue na disciplina de Autoração Web.


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.


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.


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.


Bibliograﬁa


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/ﬁve-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


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-ﬁbonacci-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


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/


Grids
eduardonovais@virtual.ufc.br


[cv - 2011.2] 16 - grids (cont)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

More from Eduardo Novais

More from Eduardo Novais (20)

[cv - 2011.2] 16 - grids (cont)