Upload
eduardo-novais
View
1.055
Download
2
Embed Size (px)
Citation preview
Grids
Comunicação Visual - 10.11
quinta-feira, 3 de novembro de 11
Vamos re-começar?
quinta-feira, 3 de novembro de 11
A proporção áurea é dada pela razão: 8:13
quinta-feira, 3 de novembro de 11
Colocando isso em valores, chegamos ao número: 0,618
quinta-feira, 3 de novembro de 11
Essa é a razão para chegarmos à proporção áurea.
quinta-feira, 3 de novembro de 11
Fiz em proporção de 2:3 e está em Fibonacci. Estou certo?
quinta-feira, 3 de novembro de 11
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
O número φ é conseguido à medida que se avança mais e mais ao longo da seqüência.
quinta-feira, 3 de novembro de 11
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
E como fica isso visualmente falando?
quinta-feira, 3 de novembro de 11
Proporção 2:3
quinta-feira, 3 de novembro de 11
Proporção 8:13
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Como era, então a solução do exercício?
quinta-feira, 3 de novembro de 11
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
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
950 ou 960 px
587 ou 593 px
quinta-feira, 3 de novembro de 11
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
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
950 ou 960 px
587 ou 593 px 181 ou 183
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
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
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Por fim, vale a pena revisar alguns conceitos importantes:
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Isso é uma coluna
quinta-feira, 3 de novembro de 11
Isso é uma linha
quinta-feira, 3 de novembro de 11
Isso é uma célula
quinta-feira, 3 de novembro de 11
Grid para web
quinta-feira, 3 de novembro de 11
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
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
1 Coluna
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Esse layout começou a ser utilizado logo no início da internet, aproximadamente em 1994.
quinta-feira, 3 de novembro de 11
Yahoo!(1994)
quinta-feira, 3 de novembro de 11
Storelicious vCard Theme(Storelicious Themes, 2010)
quinta-feira, 3 de novembro de 11
2 Colunas
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
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
quinta-feira, 3 de novembro de 11
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
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
Stuff & Nonsense(2011)
quinta-feira, 3 de novembro de 11
Proporção em 8:13quinta-feira, 3 de novembro de 11
WeightShift(2011)
quinta-feira, 3 de novembro de 11
Proporção em 3:2quinta-feira, 3 de novembro de 11
3 Colunas
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Aumenta o número de colunas, aumenta a quantidade de opções.
quinta-feira, 3 de novembro de 11
StopDesign(2011)
quinta-feira, 3 de novembro de 11
4 Colunas
quinta-feira, 3 de novembro de 11
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
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
Mais e mais colunas...
quinta-feira, 3 de novembro de 11
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
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
Tapbots(12 colunas)
quinta-feira, 3 de novembro de 11
Tapbots(12 colunas)
quinta-feira, 3 de novembro de 11
Sony Music(16 colunas)
quinta-feira, 3 de novembro de 11
Sony Music(16 colunas)
quinta-feira, 3 de novembro de 11
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
360 Grid System(2011)
quinta-feira, 3 de novembro de 11
360 Grid System(2011)
quinta-feira, 3 de novembro de 11
Dicas para criar seu Grid
quinta-feira, 3 de novembro de 11
O Canvas
quinta-feira, 3 de novembro de 11
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
Como já havíamos falado, o tamanho recomendado do Canvas - da tela -é de 1000 x 581 px.
quinta-feira, 3 de novembro de 11
Ok, começar a moldar
quinta-feira, 3 de novembro de 11
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
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
quinta-feira, 3 de novembro de 11
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
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
Gutters
quinta-feira, 3 de novembro de 11
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
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
quinta-feira, 3 de novembro de 11
Criando o layout
quinta-feira, 3 de novembro de 11
O mais importante sobre grids é que você deve alinhar os itens constantemente sobre as linhas de grade.
quinta-feira, 3 de novembro de 11
quinta-feira, 3 de novembro de 11
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
Tarefa
quinta-feira, 3 de novembro de 11
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
Para isso no documento criado deverá constar inicialmente o layout entregue na disciplina de Autoração Web.
quinta-feira, 3 de novembro de 11
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
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
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
Bibliografia
quinta-feira, 3 de novembro de 11
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
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
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
Grids
quinta-feira, 3 de novembro de 11