[cv - 2011.2] 14 - grids

Grids

Comunicação Visual - 10.11

quinta-feira, 13 de outubro de 11

Vamos começar?


O que diacho é um grid?


Uma das melhores formas de se organizar os elementos em uma página ou tela é usar grades de alinhamento, também chamadas de grids.


Essas ferramentas dividem o espaço visível em áreas e dão maior consistência a um layout.

São o terror de quem está começando a fazer design e a salvação de quem já tem alguma prática.


Grid é a base sobre a qual um design é construído. Ele pode permite que um designer organize de modo eficiente diversos elementos de uma página.


Grid é o esqueleto de um trabalho de design.


Ele força o designer a pensar construtivamente, de forma estruturada, para que o visitante não tenha que descobrir, a cada instante, o que foi projetado.


Se ele é assim tão bom, porque apavora quem está começando? Exatamente por falta de prática.


1. Como lemos uma página?


Antes de começarmos a utilizar Grids, precisamos nos acostumar com alguns conceitos. A forma de leitura de uma página é um dos conceitos mais importantes que devemos observar.


Qualquer página tem elementos ativos e passivos devido à natureza do conteúdo e à maneira como enxergamos a página - o modo como o olho varre a página para localizar a informação.


1.1. Áreas ativas e passivas do design


Em uma página existem áreas centrais e periféricas e os designers podem usar esse conhecimento para direcionar a localização dos principais elementos de design - tornando-os mais ou menos visíveis.


Diante de uma nova página de informação, o olho humano habitualmente procura uma entrada no lado superior esquerdo, varrendo a página na diagonal para baixo até o canto inferior direito.








1.2. E como vemos uma tela de monitor?


As pessoas examinam páginas web da mesma forma que analisam uma página impressa em busca de palavras-chave ou pontos de interesse.


O designer pode interferir nesse processo destacando palavras ou adicionando marcadores a fim de garantir que sessões de informação mais importantes saltem aos olhos.


1.3. Padrão F de leitura de conteúdo Web


Usuários não têm tempo ou atenção para ler calmamente o conteúdo de uma página, por isso seus olhos “varrem” a tela em busca de informação relevante, em duas linhas horizontais e uma vertical à esquerda, movimento que lembra a letra F.


Os pesquisadores descobriram que, embora os padrões de leitura variem conforme o usuário e á página, a varredura à esquerda raramente muda. Às vezes o padrão de leitura parece um E, às vezes um L invertido.


Nos exemplos acima página de about de uma empresa; página de produto em e-commerce; e página de resultados do Google)


Isso significa que as principais informações e pontos de entrada devem localizar-se no âmbito do Padrão F para aumentar as chances de capturar a atenção do leitor.


Essa é uma regra geral que serve apenas como guia. Na prática, os padrões variam de acordo com o design. Um elemento colocando em uma área inativa provocará uma varredura diferente.


1.4. Análise




1.5. Por fim...


Embora o designer precise levar em consideração as limitações físicas e as exigências da mídia ou do formato usados, a forma de um design deve complementar a sua função. A forma de um projeto varia de acordo com o público-alvo a que se destina.


É essencial enxergar o grid como algo adaptável e flexível, e não como algo prescritivo e inviolável.


2. Fundamentos


Falamos sobre como o usuário “vê” uma página. A partir de agora, vamos discutir sobre características dessa tal página.


2.1. ISO e formatos de papel


O Curso de Sistemas e Mídias Digitais da UFC normalmente não possui trabalhos voltados a impressão em papel. Ainda assim, é importante saber algo sobre papéis.


O sistema de tamanho de papéis é padronizado pela Organização Internacional para Padronização - ISO - e baseia-se na relação altura x largura. (1:1,4142)


A linha de formato A é a mais conhecida. A série B é composta de formatos intermediários, e os da série C destinam-se a envelopes para artigos de papelaria.



2.2. Anatomia da página


A página é composta a de várias partes distintas, e cada seção tem uma finalidade e uma função importantes no design como um todo.




2.3. Medidas


Quase 90% dos usuários poderão ver todo o conteúdo em uma página com 500px de altura. (fonte: Fold Spy)


Mais de 80% serão bem servidos com largura 1000px, 28% dos usuários tendem a navegar com 1250px largura da tela.


E o que eu faço, então?


Segundo a revista digital Smashing Magazine, na maioria dos casos, você pode melhorar a experiência do usuário, mantendo a largura do seu layout em no máximo 1000px e a altura em 581px.


2.3. Formas em uma página


A composição de um design é construída com tipos e imagens, que resultam em formas de uma página.

Dito de outra forma, eles podem ser tratados como formas a fim de produzir um design eficiente e eficaz.


Agora que consideramos texto e imagens como formas, vejamos como essas formas podem ser organizadas em uma página.


Agrupamento. Funciona pela separação de blocos em zonas distintas da página. Alinhar as bordas dos diferentes elementos de design ajuda a estabelecer conexão entre eles.


Perímetro. Os elementos são agrupados com imagens “sangradas”, o que mostraum uso surpreendente do perímetro. É frequentemente evitado no design, mas pode ser usado para agregar dinamismo e movimento ao trabalho.


Horizontal. Os elementos da página têm uma ênfase horizontal que atrai o olhar do observador por toda a página.


Vertical. Os elementos da página têm uma ênfase vertical que conduz o olhar do observador para cima e para baixo.


Deitado. O texto é apresentado de modo que a leitura seja feita na vertical em vez de na horizontal. Esse método é usado para apresentar material tabular que é muito longo para uma página (impresso).


Angular. Força o usuário a mudar sua relação com a página. O ideal é usar uma configuração uniforme em função da consistência, como no ângulo de 45º visto acima.


Orientados pelo eixo. Os elementos da ágina são concientemente alinhados a um eixo, como o vertical. O alinhamento pode ser em qualquer direção.


Passe Layout. Tecnica comum para apresentar fotografias, em que a imagem domina o espaço na página e é marcada por uma borda.


As diferentes formas capturam o olhar e estabelecem uma série de relações, que complementam a mensagem do design ou da pintura.


2.4. Exemplos - Formas













2.5. Hierarquia


O conceito de hierarquia serve para identificar e apresentar as informações mais importantes em um design, o que pode ser alcançado por meio de escala e posicionamento.


Neutro. Esta figura mostra a página neutra, sem hierarquia alguma entre as duas colunas de texto. Observe que o usuário naturalmente começa a visualizar pelo canto superior esquerdo.


Posição. Um posicionamento óbvio de um elemento de design introduz uma hierarquia como esse título sozinho à esquerda.


Posição e tamanho. Posicionar um elemento no foco de entrada, alterar seu tamanho e introduzir espaçamento estabelece sua dominância na hierarquia.


Posição, tamanho e ênfase. Consiste em adicionar ênfase a um elemento para reforçar sua posição no topo da hierarquia - como visto acima com o uso de cor.


Bibliografia


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


http://960.gs

http://960.gs

http://www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm




http://www.gunsbycomputer.com/2006/11/09/grids-make-eyes-happy

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


http://css4design.com/nombre-d-or-suite-de-fibonacci-et-autres-grilles-de-mise-en-page-pour-le-design-web










http://desenhantes.wordpress.com/2011/02/25/o-livro-perfeito/




http://www.useit.com/alertbox/reading_pattern.html

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/


http://www.luli.com.br/2007/05/04/para-voce-que-ainda-acredita-em-banners/




http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/






http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/




Grids

[email protected]


mailto:[email protected]

mailto:[email protected]