• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[cv - 2011.2] 14 - grids
 

[cv - 2011.2] 14 - grids

on

  • 1,280 views

 

Statistics

Views

Total Views
1,280
Views on SlideShare
1,280
Embed Views
0

Actions

Likes
2
Downloads
61
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [cv - 2011.2] 14 - grids [cv - 2011.2] 14 - grids Presentation Transcript

    • Grids Comunicação Visual - 10.11quinta-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 designquinta-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 Webquinta-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álisequinta-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. Fundamentosquinta-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 papelquinta-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áginaquinta-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. Medidasquinta-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áginaquinta-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 - Formasquinta-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. Hierarquiaquinta-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
    • Bibliografiaquinta-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-happyquinta-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.htmlquinta-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 eduardonovais@virtual.ufc.brquinta-feira, 13 de outubro de 11