[DIG2012] Criando um grid

5,211 views

Published on

Published in: Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,211
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
374
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • [DIG2012] Criando um grid

    1. 1. Grids empráticaEduardo Novais - Sistemas e Mídias Digitais da UFC
    2. 2. Vamos construir umGrid?
    3. 3. A marca
    4. 4. Um bom problemaUso rudimentar mas poucocriativo do Grid
    5. 5. Requisitos
    6. 6. Cada solução de design começa pela definição doproblema e as restrições que são estabelecidas.
    7. 7. Tela: 1024 X 768 pxRestrição: Big Ad
    8. 8. O desktop tela de 1024x768 px
    9. 9. O browser aproximadamente 974x650 px
    10. 10. A tela aproximadamente 960x650 px
    11. 11. O Banner
    12. 12. O BannerO tamanho de um Big Adutilizado no exemplo foiestabelecido em 336x280 px.(Internet Advertising Bureau,2007)
    13. 13. Retângulo Médio 300x250 pxOutros bannersUm design baseado em um BigAd pode também acomodar alargura de outros padrões depublicidade. Meia página 300x600 px
    14. 14. Os anúncios complicam as coisas, mas eles sãorealmente muito úteis, porque servem comolimitações.
    15. 15. Conceitos
    16. 16. Unidades são os blocos básicos de construçãode um Grid.Por definição, eles devem ser todos uniformes.
    17. 17. Gutter são os espaços entre as unidades de umGrid.Por definição, eles também devem ser todosuniformes.
    18. 18. Colunas são formadas pelo agrupamento dasunidades, criando uma estrutura visual.As colunas não são necessariamente uniformes.
    19. 19. Unidades
    20. 20. Gutters
    21. 21. Colunas
    22. 22. A regra do 3... ou 4.
    23. 23. Em geral, devemos criar sistemas de Grid múltiplosde 3 ou 4.12 é o ideal pois é múltiplo de 3 e 4.
    24. 24. Podemos agrupar 2 colunas...
    25. 25. 3 colunas...
    26. 26. 4 colunas...
    27. 27. e 6 colunas
    28. 28. A matemática deunidades de colunas
    29. 29. Não cabe! 336 x 3 = 1008 px.
    30. 30. Olha o Bizu!
    31. 31. Tela - ((QtdUn-1) x Gutter) / QtnUn = TamUn
    32. 32. 950 - ((16-1) x 10) / 16 = TamUn
    33. 33. Primeira tentativa...
    34. 34. Arredondaremoso banner para340px.
    35. 35. Dividiremos acoluna em duasunidades de165px com10px de gutter(340 - 10) ÷ 2 = 165
    36. 36. Adicionamos 5unidades de165px,chegando a865px de tela.
    37. 37. Poderíamos dividir em 10 unidades, mas, aindaassim, seria um sistema muito difícil de trabalhar.
    38. 38. Segunda tentativa...
    39. 39. Arredondaremoso banner para350px.
    40. 40. Dividiremos acoluna em trêsunidades de110px com10px de gutter(350 - (2 x 10)) ÷ 3 = 110
    41. 41. Adicionamos 8unidades de 110px, chegando a950 px de tela.
    42. 42. 8 é um bomnúmero, maspodemossubdividir em16 colunas de50 px.
    43. 43. O grid de 16unidades nospossibilita criarduas colunasiguais no ladoesquerdo...
    44. 44. ...e podemosdividir em duascolunas o ladodireito.
    45. 45. Podemostambémadicionar 2unidades para anavegação àesquerda.
    46. 46. Terceira tentativa...
    47. 47. é a última.
    48. 48. eu juro.
    49. 49. Apertaremos umpouco oarrendondamentopara 338px.
    50. 50. Dessa vez,dividiremos acoluna 5 vezes,com 7 px degutter(338 - (4 x 7)) ÷ 5 = 62
    51. 51. Adicionamos 14unidades de 62px, chegando a959 px de tela.
    52. 52. 14 é um número estranho, mas pode deixar acomposição mais interessante
    53. 53. Ele nos permitetrabalhar com 3colunas na áreaesquerda.
    54. 54. Ou uma área deconteúdo umpouco maiorcom umanavegação aesquerda
    55. 55. Quarta tentativa...
    56. 56. Brincadeira!
    57. 57. O Grid pronto,passemos ao Layout.
    58. 58. Cabeçalho
    59. 59. Equilibre o peso da Logo com a área de busca.
    60. 60. Modelo de Caixa
    61. 61. Vamos definiros elementosem um sistemade 9 unidades
    62. 62. Divida ascolunas comlinhas simples.
    63. 63. Essa aderênciaentre oselementoscausa tensão.
    64. 64. O que acontecequando umtexto precisaser ressaltadopor uma caixa?
    65. 65. Quando orealcedesaparece,pode se criaruma sensaçãode falta dealinhamento.
    66. 66. A saída éadotar regraspara a inserçãoem todos oselementos.
    67. 67. Isso nos dáconsistênciavisual e criauma área derespiro ao ladodas linhas.
    68. 68. Bonito, né?
    69. 69. Texto Texto
    70. 70. Texto Texto
    71. 71. Margin Texto Texto
    72. 72. Border Texto Texto
    73. 73. Padding Texto Texto
    74. 74. Texto Texto Texto Texto
    75. 75. De volta à busca...
    76. 76. Possivelmente esta não é a melhor forma de semostrar, mas ficaremos com ela por agora.
    77. 77. Notem que o Roll-over se adequa ao grid.
    78. 78. Navegação
    79. 79. Trabalharemos com o menu esquerdo de duas unidades.
    80. 80. Colocaremos os itens observando a hierarquia
    81. 81. Adicionaremos linhas para enfatizar os grupos.
    82. 82. Vendo umpouco mais deperto.
    83. 83. Cada caixa deve serdisposta usando osmesmos princípiosque vimos. OPadding de todosos lados deve servisualmente iguais.
    84. 84. Coloque as linhasjustamente noespaço das bordas.
    85. 85. A ilusão se tornamaior quando oselementos sãoagrupados.
    86. 86. Mesmo gruposcom vários itensprecisam sertratados damesma forma.
    87. 87. Sistema de navegação pronto.
    88. 88. Widgets
    89. 89. Sistema de navegação pronto.
    90. 90. Sistema de navegação pronto.
    91. 91. Sistema de navegação pronto.
    92. 92. Divida a de navegação pronto.Sistema região em partes iguais.
    93. 93. Adicione também uma área para o usuário. Eles já devem ter percebido que a áreamais colorida na direita é um banner.Sistema de navegação pronto.
    94. 94. Sistema de navegação pronto.
    95. 95. Sistema de navegação pronto.
    96. 96. Conteúdo
    97. 97. Sistema de navegação pronto.
    98. 98. Sistema de navegação pronto.
    99. 99. A Tabs saem do Grid. Não tem jeito.
    100. 100. Sistema de navegação pronto.
    101. 101. O tamanho da imagem é de 200px de largura por120px de altura.
    102. 102. Quebrar os planos pode trazer resultadosinteressantes.
    103. 103. Hora de posicionar as fotos relacionadas ou denotícias de segunda importantes.
    104. 104. Aproveitando o espaço restante com criatividade.
    105. 105. Resultado com as imagens.
    106. 106. Quebrando planos também com as abas.
    107. 107. Sistema de navegação pronto.
    108. 108. Finalizando
    109. 109. Sistema de navegação pronto.
    110. 110. Sistema de navegação pronto.
    111. 111. Boring... quero fazersobre jogos.
    112. 112. Qualquer disposição de elementos na tela constituium layout. Melhor fazê-lo direito.
    113. 113. Referências
    114. 114. Esta aula foi baseada na apresentação “Grids aregood. (Right?)”de Mark Boulton.
    115. 115. Também buscamos informações no InternetAdvertising Bureau: “IAB Display AdvertisingGuidelines: The New 2012 Portfolio”.

    ×