Organize Elementos Página 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 eﬁciente 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 ﬁm 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 signiﬁca 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 ﬁm...


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 ﬂexí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
ﬁnalidade 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
conﬁguraçã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 fotograﬁas, 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 identiﬁcar e apresentar as
informações mais importantes em um design, o que pode ser alcançado
por meio de escala e posicionamento.


Neutro. Esta ﬁgura 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.


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


Organize Elementos Página Grids

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Organize Elementos Página Grids

Semelhante a Organize Elementos Página Grids (8)

Mais de Eduardo Novais

Mais de Eduardo Novais (20)

Organize Elementos Página Grids