Upload
eduardo-novais
View
1.070
Download
4
Embed Size (px)
Citation preview
Grids
Comunicação Visual - 10.11
quinta-feira, 13 de outubro de 11
Vamos começar?
quinta-feira, 13 de outubro de 11
O que diacho é um grid?
quinta-feira, 13 de outubro de 11
Uma das melhores formas de se organizar os elementos em uma página ou tela é usar grades de alinhamento, também chamadas de grids.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Grid é o esqueleto de um trabalho de design.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Se ele é assim tão bom, porque apavora quem está começando? Exatamente por falta de prática.
quinta-feira, 13 de outubro de 11
1. Como lemos uma página?
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
1.1. Áreas ativas e passivas do design
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
1.2. E como vemos uma tela de monitor?
quinta-feira, 13 de outubro de 11
As pessoas examinam páginas web da mesma forma que analisam uma página impressa em busca de palavras-chave ou pontos de interesse.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
1.3. Padrão F de leitura de conteúdo Web
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Nos exemplos acima página de about de uma empresa; página de produto em e-commerce; e página de resultados do Google)
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
1.4. Análise
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
1.5. Por fim...
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
É essencial enxergar o grid como algo adaptável e flexível, e não como algo prescritivo e inviolável.
quinta-feira, 13 de outubro de 11
2. Fundamentos
quinta-feira, 13 de outubro de 11
Falamos sobre como o usuário “vê” uma página. A partir de agora, vamos discutir sobre características dessa tal página.
quinta-feira, 13 de outubro de 11
2.1. ISO e formatos de papel
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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)
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
2.2. Anatomia da página
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
2.3. Medidas
quinta-feira, 13 de outubro de 11
Quase 90% dos usuários poderão ver todo o conteúdo em uma página com 500px de altura. (fonte: Fold Spy)
quinta-feira, 13 de outubro de 11
Mais de 80% serão bem servidos com largura 1000px, 28% dos usuários tendem a navegar com 1250px largura da tela.
quinta-feira, 13 de outubro de 11
E o que eu faço, então?
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
2.3. Formas em uma página
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Agora que consideramos texto e imagens como formas, vejamos como essas formas podem ser organizadas em uma página.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Horizontal. Os elementos da página têm uma ênfase horizontal que atrai o olhar do observador por toda a página.
quinta-feira, 13 de outubro de 11
Vertical. Os elementos da página têm uma ênfase vertical que conduz o olhar do observador para cima e para baixo.
quinta-feira, 13 de outubro de 11
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).
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Passe Layout. Tecnica comum para apresentar fotografias, em que a imagem domina o espaço na página e é marcada por uma borda.
quinta-feira, 13 de outubro de 11
As diferentes formas capturam o olhar e estabelecem uma série de relações, que complementam a mensagem do design ou da pintura.
quinta-feira, 13 de outubro de 11
2.4. Exemplos - Formas
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
2.5. Hierarquia
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Posição. Um posicionamento óbvio de um elemento de design introduz uma hierarquia como esse título sozinho à esquerda.
quinta-feira, 13 de outubro de 11
Posição e tamanho. Posicionar um elemento no foco de entrada, alterar seu tamanho e introduzir espaçamento estabelece sua dominância na hierarquia.
quinta-feira, 13 de outubro de 11
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.
quinta-feira, 13 de outubro de 11
Bibliografia
quinta-feira, 13 de outubro 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, 13 de outubro 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, 13 de outubro 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, 13 de outubro de 11
Grids
quinta-feira, 13 de outubro de 11