Transcript
Page 1: [cv - 2011.2] 16 - grids (cont)

Grids

Comunicação Visual - 10.11

quinta-feira, 3 de novembro de 11

Page 2: [cv - 2011.2] 16 - grids (cont)

Vamos re-começar?

quinta-feira, 3 de novembro de 11

Page 3: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 4: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 5: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 6: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 7: [cv - 2011.2] 16 - grids (cont)

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

Page 8: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 9: [cv - 2011.2] 16 - grids (cont)

1/1 1,0001/2 0,5002/3 0,6673/5 0,6005/8 0,6258/13 0,61513/21 0,61921/34 0,61834/55 0,61855/89 0,61889/144 0,618144/233 0,618

quinta-feira, 3 de novembro de 11

Page 10: [cv - 2011.2] 16 - grids (cont)

E como fica isso visualmente falando?

quinta-feira, 3 de novembro de 11

Page 11: [cv - 2011.2] 16 - grids (cont)

Proporção 2:3

quinta-feira, 3 de novembro de 11

Page 12: [cv - 2011.2] 16 - grids (cont)

Proporção 8:13

quinta-feira, 3 de novembro de 11

Page 13: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 14: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 15: [cv - 2011.2] 16 - grids (cont)

Se a margem máxima foi dada, bastava multiplicar esse valor por 0,618. Assim, teríamos:

950 x 0,618 = 587,1 ou960 x 0,618 = 593,28

quinta-feira, 3 de novembro de 11

Page 16: [cv - 2011.2] 16 - grids (cont)

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

Page 17: [cv - 2011.2] 16 - grids (cont)

950 ou 960 px

587 ou 593 px

quinta-feira, 3 de novembro de 11

Page 18: [cv - 2011.2] 16 - grids (cont)

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

Page 19: [cv - 2011.2] 16 - grids (cont)

Quem fez a divisão chegou a valores próximos aos valores abaixo:

950 - 587 = 363 363 / 2 = 181 px ou960 - 593 = 367 367 / 2 = 183 px

quinta-feira, 3 de novembro de 11

Page 20: [cv - 2011.2] 16 - grids (cont)

950 ou 960 px

587 ou 593 px 181 ou 183

quinta-feira, 3 de novembro de 11

Page 21: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 22: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 23: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 24: [cv - 2011.2] 16 - grids (cont)

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

Page 25: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 26: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 27: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 28: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 29: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 30: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 31: [cv - 2011.2] 16 - grids (cont)

Por fim, vale a pena revisar alguns conceitos importantes:

quinta-feira, 3 de novembro de 11

Page 32: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 33: [cv - 2011.2] 16 - grids (cont)

Isso é uma coluna

quinta-feira, 3 de novembro de 11

Page 34: [cv - 2011.2] 16 - grids (cont)

Isso é uma linha

quinta-feira, 3 de novembro de 11

Page 35: [cv - 2011.2] 16 - grids (cont)

Isso é uma célula

quinta-feira, 3 de novembro de 11

Page 36: [cv - 2011.2] 16 - grids (cont)

Grid para web

quinta-feira, 3 de novembro de 11

Page 37: [cv - 2011.2] 16 - grids (cont)

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

Page 38: [cv - 2011.2] 16 - grids (cont)

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

Page 39: [cv - 2011.2] 16 - grids (cont)

1 Coluna

quinta-feira, 3 de novembro de 11

Page 40: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 41: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 42: [cv - 2011.2] 16 - grids (cont)

Yahoo!(1994)

quinta-feira, 3 de novembro de 11

Page 43: [cv - 2011.2] 16 - grids (cont)

Storelicious vCard Theme(Storelicious Themes, 2010)

quinta-feira, 3 de novembro de 11

Page 44: [cv - 2011.2] 16 - grids (cont)

2 Colunas

quinta-feira, 3 de novembro de 11

Page 45: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 46: [cv - 2011.2] 16 - grids (cont)

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

Page 47: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 48: [cv - 2011.2] 16 - grids (cont)

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

Page 49: [cv - 2011.2] 16 - grids (cont)

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

Page 50: [cv - 2011.2] 16 - grids (cont)

Stuff & Nonsense(2011)

quinta-feira, 3 de novembro de 11

Page 51: [cv - 2011.2] 16 - grids (cont)

Proporção em 8:13quinta-feira, 3 de novembro de 11

Page 52: [cv - 2011.2] 16 - grids (cont)

WeightShift(2011)

quinta-feira, 3 de novembro de 11

Page 53: [cv - 2011.2] 16 - grids (cont)

Proporção em 3:2quinta-feira, 3 de novembro de 11

Page 54: [cv - 2011.2] 16 - grids (cont)

3 Colunas

quinta-feira, 3 de novembro de 11

Page 55: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 56: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 57: [cv - 2011.2] 16 - grids (cont)

StopDesign(2011)

quinta-feira, 3 de novembro de 11

Page 58: [cv - 2011.2] 16 - grids (cont)

4 Colunas

quinta-feira, 3 de novembro de 11

Page 59: [cv - 2011.2] 16 - grids (cont)

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

Page 60: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 61: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 62: [cv - 2011.2] 16 - grids (cont)

Mais e mais colunas...

quinta-feira, 3 de novembro de 11

Page 63: [cv - 2011.2] 16 - grids (cont)

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

Page 64: [cv - 2011.2] 16 - grids (cont)

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

Page 65: [cv - 2011.2] 16 - grids (cont)

Tapbots(12 colunas)

quinta-feira, 3 de novembro de 11

Page 66: [cv - 2011.2] 16 - grids (cont)

Tapbots(12 colunas)

quinta-feira, 3 de novembro de 11

Page 67: [cv - 2011.2] 16 - grids (cont)

Sony Music(16 colunas)

quinta-feira, 3 de novembro de 11

Page 68: [cv - 2011.2] 16 - grids (cont)

Sony Music(16 colunas)

quinta-feira, 3 de novembro de 11

Page 69: [cv - 2011.2] 16 - grids (cont)

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

Page 70: [cv - 2011.2] 16 - grids (cont)

360 Grid System(2011)

quinta-feira, 3 de novembro de 11

Page 71: [cv - 2011.2] 16 - grids (cont)

360 Grid System(2011)

quinta-feira, 3 de novembro de 11

Page 72: [cv - 2011.2] 16 - grids (cont)

Dicas para criar seu Grid

quinta-feira, 3 de novembro de 11

Page 73: [cv - 2011.2] 16 - grids (cont)

O Canvas

quinta-feira, 3 de novembro de 11

Page 74: [cv - 2011.2] 16 - grids (cont)

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

Page 75: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 76: [cv - 2011.2] 16 - grids (cont)

Ok, começar a moldar

quinta-feira, 3 de novembro de 11

Page 77: [cv - 2011.2] 16 - grids (cont)

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

Page 78: [cv - 2011.2] 16 - grids (cont)

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

Page 79: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 80: [cv - 2011.2] 16 - grids (cont)

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

Page 81: [cv - 2011.2] 16 - grids (cont)

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

Page 82: [cv - 2011.2] 16 - grids (cont)

Gutters

quinta-feira, 3 de novembro de 11

Page 83: [cv - 2011.2] 16 - grids (cont)

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

Page 84: [cv - 2011.2] 16 - grids (cont)

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

Page 85: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 86: [cv - 2011.2] 16 - grids (cont)

Criando o layout

quinta-feira, 3 de novembro de 11

Page 87: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 88: [cv - 2011.2] 16 - grids (cont)

quinta-feira, 3 de novembro de 11

Page 89: [cv - 2011.2] 16 - grids (cont)

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

Page 90: [cv - 2011.2] 16 - grids (cont)

Tarefa

quinta-feira, 3 de novembro de 11

Page 91: [cv - 2011.2] 16 - grids (cont)

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

Page 92: [cv - 2011.2] 16 - grids (cont)

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

quinta-feira, 3 de novembro de 11

Page 93: [cv - 2011.2] 16 - grids (cont)

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

Page 94: [cv - 2011.2] 16 - grids (cont)

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

Page 95: [cv - 2011.2] 16 - grids (cont)

Entrega:

Data de entrega: 12/11 Enviar para: [email protected]í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

Page 96: [cv - 2011.2] 16 - grids (cont)

Bibliografia

quinta-feira, 3 de novembro de 11

Page 97: [cv - 2011.2] 16 - grids (cont)

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

Page 98: [cv - 2011.2] 16 - grids (cont)

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

Page 99: [cv - 2011.2] 16 - grids (cont)

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

Page 100: [cv - 2011.2] 16 - grids (cont)

Grids

[email protected]

quinta-feira, 3 de novembro de 11