A importância do grid para o design de interfaces web

8,689 views
8,540 views

Published on

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/a-importancia-do-grid-para-o-design-de-interfaces-web/

Published in: Education

A importância do grid para o design de interfaces web

  1. 1. a importância dogrid para o designde interfaces webEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf>“ O grid é a manifestação da necessidade de ordenação no design gráfico. ”
  4. 4. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> grid: a descoberta das proporções a partir da natureza Modulor Homem Vitruviano Le Corbusier - 1948 Leonardo da Vinci - 1492
  5. 5. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> grid: da ornamentação para o racionalismo Fleurs de Mousse Neues Bauen (propaganda de perfume) (cartaz de exposição) Leopoldo Metlicovitz - 1914 Theo Ballmer - 1928
  6. 6. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> grid: da ornamentação para o racionalismo O racionalismo se tornou imperativo para o design •  Decoração e formalismo são descartados. •  Lógica e padronização são os novos conceitos. Os modernistas buscavam a construção de uma nova estética •  Decorrente da beleza das qualidades inatas da •  máquina. •  Decorrente da padronização.Die neue Typographie(Instruções para o layout padronizado de um timbre no formato A4)Jan Tschichold - 1928
  7. 7. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> grid: da ornamentação para o racionalismo Tonhalle-Quartett Juni-Festwochen Zürich Juni-Festwochen Zürich 1955 1959 1962
  8. 8. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> gridO grid único é a solução para odesign em larga escala e aprodução de diferentes tipos depublicações.
  9. 9. gridExiste uma forte sobreposição entre oque motivou o uso do grid quase umséculo atrás e o que motiva o seu usohoje em dia.•  Decorrente das qualidades inatas da•  interface.•  Decorrente da padronização.
  10. 10. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Toda solução de design se inicia a partir da definição de um problema e dos constrangimentos causados por este problema. •  Um bom problema: o grid rudimentar e •  sem imaginação do site “Yahoo!”.
  11. 11. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Resolução da tela: 1024 x 768 pixels.
  12. 12. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Tamanho “natural” do browser: +/- 974 x 650 pixels.
  13. 13. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Área do “canvas” (desconsiderando as margens esquerda e direita): +/- 960 x 650 pixels.
  14. 14. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton como criar um grid? Deslocamento Largura: Área gráfica segura da página em 560 pixels. relação ao (telas projetadas para serem impressas browser: corretamente em folhas de tamanho A4) 8 pixels. Dependendo do propósito da interface, a área do “canvas” pode mudar…
  15. 15. * Fonte: artigo "Web safe area" - <http://www.designerstoolbox.com/designresources/safearea/> como criar um grid? Área gráfica segura do Firefox utilizado no Windows XP Dependendo do propósito da interface, a área do “canvas” pode mudar…
  16. 16. * Fonte: artigo "Web safe area" - <http://www.designerstoolbox.com/designresources/safearea/> como criar um grid? Área gráfica segura do Firefox utilizado no Windows Vista Dependendo do propósito da interface, a área do “canvas” pode mudar…
  17. 17. * Fonte: artigo "Web safe area" - <http://www.designerstoolbox.com/designresources/safearea/> como criar um grid? Comparativo da área gráfica segura entre Safari, Firefox e Internet Explorer Dependendo do propósito da interface, a área do “canvas” pode mudar…
  18. 18. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? O banner mais útil para projetar o grid é o “large rectangle”, com 336 x 280 pixels (formato estabelecido pelo IAB - Interactive Advertising Bureau).
  19. 19. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf>Largura do banner “large rectangle” 336 pixelsMedium rectangle: 300 x 250 pixels O projeto do grid baseado nas medidas do “large rectangle” também é capaz de acomodar a largura de outros formatos populares de banner. Half-page ad: 300 x 600 pixels
  20. 20. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Mas, 3 banners “large rectangle” (336 x 280 pixels) não cabem na largura de 960 pixels.
  21. 21. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? fórmula para calcular o gridKhoi Vinh Mark BoultonDiretor de design da versão on-line do “The New York Fundador da consultoria “Mark Boulton Design” e autor doTimes” e autor do blog “Subtraction.com”, onde escreve site “MarkBoulton.co.uk”, onde escreve sobre design esobre design, tecnologia e outros assuntos. qualquer outro assunto que ache interessante. canvas - ([total de unidades -1] x gutter) ÷ total de unidades = unidade exemplo: 950 - ([16 -1] x 10) ÷ 16 = 50
  22. 22. como criar um grid? fórmula para calcular o gridSubtraction.com (Khoi Vinh) MarkBoulton.co.uk (Mark Boulton)
  23. 23. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas The 1kb CSS grig: http://www.1kbgrid.com
  24. 24. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Variable grid system: http://www.spry-soft.com/grids/
  25. 25. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Grid Designer: http://grid.mindplay.dk/
  26. 26. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Design By Grid: http://www.designbygrid.com/tools
  27. 27. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Net Protozo Grid Generator: http://netprotozo.com/grid/
  28. 28. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Gridinator: http://gridinator.com/
  29. 29. * Fonte: artigo "50 useful tools and generators for easy CSS development", de Paul Andrew - <http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/> como criar um grid? ferramentas Grid System Generator: http://www.gridsystemgenerator.com/
  30. 30. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas Unidades São os blocos básicos e uniformes de construção do grid. Colunas São o agrupamento de unidades, resultando na estrutura visual da página. As colunas não são, necessariamente, uniformes. No exemplo ao lado, 4 unidades combinadas formam 1 coluna.
  31. 31. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas: a regra de 3 ou 4 A regra de 3 ou 4 Geralmente, as unidades são criadas como múltiplos de 3 ou múltiplos de 4. A utilização de 12 unidades, por exemplo, é ideal, porque o número 12 é tanto múltiplo do número 3 quanto múltiplo do número 4.
  32. 32. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas: a regra de 3 ou 4 12 unidades podem ser combinadas em 3 colunas (cada coluna com 4 unidades).
  33. 33. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas: a regra de 3 ou 4 12 unidades podem ser combinadas em 2 colunas (cada coluna com 6 unidades).
  34. 34. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas: a regra de 3 ou 4 12 unidades podem ser combinadas em 4 colunas (cada coluna com 3 unidades).
  35. 35. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? unidades e colunas: a regra de 3 ou 4 12 unidades podem ser combinadas em 6 colunas (cada coluna com 2 unidades).
  36. 36. matemática das unidadese colunas: 1ª tentativa
  37. 37. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 1ª tentativa •  Determine 340 pixels de largura para •  a coluna do anúncio.
  38. 38. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 1ª tentativa •  Determine 340 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 2 •  unidades de 165 pixels de largura, •  com um espaçamento de 10 pixels •  entre as colunas. (340 - 10) ÷ 2 = 165
  39. 39. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 1ª tentativa •  Determine 340 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 2 •  unidades de 165 pixels de largura, •  com um espaçamento de 10 pixels •  entre as colunas. (340 - 10) ÷ 2 = 165 •  Crie 5 unidades de 165 pixels de •  largura, formando uma largura total •  de 865 pixels. •  Este valor pode ser sub-dividido em •  10 unidades. Mas, um grid com 10 •  unidades é difícil de trabalhar.
  40. 40. matemática das unidadese colunas: 2ª tentativa
  41. 41. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio.
  42. 42. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110
  43. 43. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110 •  Crie 8 unidades de 110 pixels de •  largura, formando uma largura total •  de 950 pixels.
  44. 44. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110 •  Crie 8 unidades de 110 pixels de •  largura, formando uma largura total •  de 950 pixels. •  Para uma maior flexibilidade, ainda é •  possível dividir este grid em 16 •  unidades de 50 pixels de largura.
  45. 45. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110 •  Crie 8 unidades de 110 pixels de •  largura, formando uma largura total •  de 950 pixels. •  Para uma maior flexibilidade, ainda é •  possível dividir este grid em 16 •  unidades de 50 pixels de largura. •  Um grid de 16 unidades permite a •  criação de 2 colunas iguais no lado •  esquerdo da interface.
  46. 46. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110 •  Crie 8 unidades de 110 pixels de •  largura, formando uma largura total •  de 950 pixels. •  Para uma maior flexibilidade, ainda é •  possível dividir este grid em 16 •  unidades de 50 pixels de largura. •  Um grid de 16 unidades permite a •  criação de 2 colunas iguais no lado •  esquerdo da interface. •  E também permite sub-dividir a área •  da direita em 2 ou 3 colunas.
  47. 47. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 2ª tentativa •  Desta vez, determine 350 pixels de •  largura para a coluna do anúncio. •  Divida a coluna do anúncio em 3 •  unidades de 110 pixels de largura, •  com 2 espaços de 10 pixels entre as •  colunas. •  (350 – [2 x 10]) ÷ 3 = 110 •  Crie 8 unidades de 110 pixels de •  largura, formando uma largura total •  de 950 pixels. •  Para uma maior flexibilidade, ainda é •  possível dividir este grid em 16 •  unidades de 50 pixels de largura. •  Um grid de 16 unidades permite a •  criação de 2 colunas iguais no lado •  esquerdo da interface. •  E também permite sub-dividir a área •  da direita em 2 ou 3 colunas. •  É possível separar 2 unidades no •  lado esquerdo para criar um menu de •  navegação.
  48. 48. matemática das unidadese colunas: 3ª tentativa
  49. 49. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 3ª tentativa •  Determine 338 pixels de largura para •  a coluna do anúncio.
  50. 50. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 3ª tentativa •  Determine 338 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 5 •  unidades de 62 pixels de largura, com •  um espaçamento de 7 pixels entre as •  colunas. •  (338 – [4 x 7]) ÷ 5 = 62
  51. 51. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 3ª tentativa •  Determine 338 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 5 •  unidades de 62 pixels de largura, com •  um espaçamento de 7 pixels entre as •  colunas. •  (338 – [4 x 7]) ÷ 5 = 62 •  Crie 14 unidades de 62 pixels de •  largura, formando uma largura total •  de 959 pixels. •  14 é um número estranho, mas pode •  fornecer resultados interessantes.
  52. 52. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 3ª tentativa •  Determine 338 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 5 •  unidades de 62 pixels de largura, com •  um espaçamento de 7 pixels entre as •  colunas. •  (338 – [4 x 7]) ÷ 5 = 62 •  Crie 14 unidades de 62 pixels de •  largura, formando uma largura total •  de 959 pixels. •  14 é um número estranho, mas pode •  fornecer resultados interessantes. •  Faça com que a área esquerda fique •  consolidada em 3 colunas.
  53. 53. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> matemática das unidades e colunas: 3ª tentativa •  Determine 338 pixels de largura para •  a coluna do anúncio. •  Divida a coluna do anúncio em 5 •  unidades de 62 pixels de largura, com •  um espaçamento de 7 pixels entre as •  colunas. •  (338 – [4 x 7]) ÷ 5 = 62 •  Crie 14 unidades de 62 pixels de •  largura, formando uma largura total •  de 959 pixels. •  14 é um número estranho, mas pode •  fornecer resultados interessantes. •  Faça com que a área esquerda fique •  consolidada em 3 colunas. •  Ou faça com que a coluna esquerda, •  destinada ao menu de navegação, •  seja mais estreita.
  54. 54. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Trabalhar com o grid não é tão simples quanto apenas alinhar os elementos ao longo das suas colunas. Ao escrever 3 títulos em um grid de 9 unidades, por exemplo, posicionamos, instintivamente, cada título alinhado pela esquerda de cada coluna.
  55. 55. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Linhas divisórias podem ser adicionadas no espaço entre as colunas...
  56. 56. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Mas toda essa proximidade entre os títulos e linhas acaba causando uma tensão visual (elementos muito apertados).
  57. 57. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Outro problema: o que acontece se houver a necessidade de se colocar um título dentro de um box?
  58. 58. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Nas mídias digitais, esses boxes não são utilizados de forma persistente. Quando o box não existir, a falta de alinhamento visual será perceptível na interface.
  59. 59. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Para contornar esta questão, é preciso adicionar margens em todos os elementos.
  60. 60. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Desta forma, é possível conseguir uma consistência visual, independente da posição onde o texto é inserido, além de permitir um “respiro” próximo às linhas do grid.
  61. 61. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? Desta forma, é possível conseguir uma consistência visual, independente da posição onde o texto é inserido, além de permitir um “respiro” próximo às linhas do grid.
  62. 62. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? (padding é o espaço entre os elementos e o texto) É recomendável trabalhar com o CSS box model, um modelo utilizado para imaginar o espaço em volta de qualquer elemento.
  63. 63. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? No exemplo ao lado, é possível observar, na prática, o CSS box model.
  64. 64. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? O “padding” deve ser visualmente igual em torno do elemento. Mas, apenas no topo, na direita e na esquerda o “padding” deve possuir o mesmo valor. Na parte de baixo do elemento, o “padding” deve ser maior.
  65. 65. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? O resultado desta aplicação (“padding” maior na parte de baixo do elemento) é o equilíbrio visual.
  66. 66. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? O resultado desta aplicação (“padding” maior na parte de baixo do elemento) é o equilíbrio visual.
  67. 67. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como criar um grid? A ilusão de equilíbrio visual é realçada quando os elementos são empilhados, como em um menu de navegação, por exemplo.
  68. 68. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> Até os itens agrupados devem ser tratados da mesma maneira.
  69. 69. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Primeiro, é preciso posicionar o header.
  70. 70. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Em seguida, utiliza-se o equilíbrio da área do logotipo para incluir o campo de busca.
  71. 71. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Também é preciso incluir as opções de navegação, como “Web”, “Imagens”, “Vídeo”, “Shopping”, etc. Observação: o efeito de roll- over deve ser aplicado com a mesma largura da unidade do grid.
  72. 72. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Separa-se 2 unidades do grid para formar a coluna com o menu de navegação do site. As linhas adicionadas entre os itens de navegação servem para organizar o menu e também permitem combinar visualmente os itens que devem ser agrupados, como “Small Business”, por exemplo.
  73. 73. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Alguns serviços são adicionados no topo da página, utilizando-se o mesmo número de unidades para cada serviço. Nos casos onde o número de unidades não pode ser facilmente dividido, é possível trabalhar com uma coluna assimétrica (essa assimetria não é ruim).
  74. 74. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Para criar uma diferenciação entre o conteúdo da coluna da direita e a publicidade, optou-se por trabalhar com elementos menos visuais nesta área do grid.
  75. 75. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Separa-se 7 unidades para formar a área de destaques da página. Observação: não é necessário fazer com que as “tabs” (abas) sejam aplicadas com a mesma largura da unidade do grid.
  76. 76. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Cada uma das imagens dos destaques secundários ocupam 2 unidades, mantendo a proporção entre elas. A unidade restante é utilizada para o link complementar “mais histórias…”.
  77. 77. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? As demais manchetes da página são colocadas em uma lista que ocupa a largura de 5 unidades. As informações sobre o mercado financeiro são colocadas nas 2 unidades restantes.
  78. 78. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Para criar uma diferenciação visual entre a área de destaques principais e a área de manchetes, aplica-se um background atrás das “tabs” (abas) das manchetes. A mesma abordagem é realizada no elemento “Marketplace”, fazendo com que ele seja facilmente diferenciado em relação às manchetes.
  79. 79. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? As 4 colunas do elemento “Autos” são aplicadas de uma forma propositalmente desalinhada...
  80. 80. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? … assim como o elemento “The Wire”. Nestes 2 casos, não há necessidade de seguir o grid de forma rígida.
  81. 81. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid? Elementos que são comuns e familiares em outros sites podem ser tratados de uma forma diferente, com o objetivo de torná-los mais interessantes. O “top 5” que, geralmente, é mostrado em forma de lista, por exemplo, pode ter seu formato de orientação modificado para mudar a sua forma de exibição.
  82. 82. * Fonte: palestra "Grids are good", de Khoi Vinh e Mark Boulton - <http://www.subtraction.com/pics/0703/grids_are_good.pdf> como posicionar os elementos no grid?
  83. 83. sistema de grid 960O sistema de grid 960 (960 grid system)surgiu como um esforço para simplificar oprocesso de desenvolvimento de sites,fornecendo dimensões comumenteutilizadas.Existem 2 variantes: 12 e 16 unidades(baseadas na largura de 960 pixels).
  84. 84. 960 grid system960 grid system: http://960.gs
  85. 85. sistema de grid 960No grid de 12 unidades, cada uma possui60 pixels de largura.No grid de 16 unidades, cada uma possui40 pixels de largura.
  86. 86. sistema de grid 960O espaçamento entre as unidades, tantono grid de 12 quanto no grid de 16, é de20 pixels.Cada unidade possui 10 pixels demargem na esquerda e 10 pixels demargem na direita.
  87. 87. sistema de grid 960O número 960 é divisível por 2, 3, 4, 5, 6,8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48,60, 64, 80, 96, 120, 160, 192, 240, 320 e480.Esta característica o torna um númeroaltamente flexível para se trabalhar.
  88. 88. * Fonte: site "960 grid system" - <http://960.gs>
  89. 89. * Fonte: site "960 grid system" - <http://960.gs>
  90. 90. * Fonte: site "960 grid system" - <http://960.gs> 960 grid system Exemplo de grid com 960 de largura... Exemplo de grid com 960 de largura...
  91. 91. * Fonte: site "960 grid system" - <http://960.gs> 960 grid system ... e 16 colunas. ... e 12 colunas.
  92. 92. * Fonte: site "960 grid system" - <http://960.gs> 960 grid system Exemplo de grid com 960 de largura... Exemplo de grid com 960 de largura...
  93. 93. * Fonte: site "960 grid system" - <http://960.gs> 960 grid system ... e 16 colunas. ... e 12 colunas.
  94. 94. exemplo:grid do site bbc
  95. 95. * Fonte: artigo "A new global visual language for the BBCs digital services", de Bronwyn van der Merwe - <http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html> grid: bbc
  96. 96. * Fonte: artigo "A new global visual language for the BBCs digital services", de Bronwyn van der Merwe - <http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html> grid: bbc
  97. 97. * Fonte: artigo "A new global visual language for the BBCs digital services", de Bronwyn van der Merwe - <http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html> grid: bbc
  98. 98. * Fonte: artigo "A new global visual language for the BBCs digital services", de Bronwyn van der Merwe - <http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html> grid: bbc
  99. 99. * Fonte: artigo "A new global visual language for the BBCs digital services", de Bronwyn van der Merwe - <http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html> grid: bbc
  100. 100. a importância do grid para o design de interfaces web: referências bibliográficas
  101. 101. referências bibliográficas: livros
  102. 102. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  103. 103. referências bibliográficas: artigos
  104. 104. referências bibliográficas: artigos•  Web safe area•  http://www.designerstoolbox.com/designresources/safearea/•  50 useful tools and generators for easy CSS development•  Paul Andrew•  http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-•  easy-css-development/•  A new global visual language for the BBCs digital services•  Bronwyn van der Merwe•  http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_•  language_f.html
  105. 105. referências bibliográficas: palestras
  106. 106. referências bibliográficas: palestras•  Grids are good•  Khoi Vinh•  Mark Boulton•  http://www.subtraction.com/pics/0703/grids_are_good.pdf
  107. 107. referências bibliográficas: sites
  108. 108. referências bibliográficas: sites•  960 grid system•  http://960.gs
  109. 109. a importância do grid para o design de interfaces web: sobre o professor
  110. 110. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  111. 111. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×