1) O documento discute a construção de um layout web usando grids, definindo unidades, gutters e colunas. 2) É apresentado um exemplo prático de como dividir a tela em unidades de grid para acomodar um banner anúncio. 3) O documento explica conceitos-chave de grids como unidades, gutters e colunas e como usá-los para criar um layout equilibrado e consistente.

1. Grids em
prática
Eduardo Novais - Sistemas e Mídias Digitais da UFC

2. Vamos construir um
Grid?

3. A marca

5. Um bom problema
Uso rudimentar mas pouco
criativo do Grid

7. Requisitos

8. Cada solução de design começa pela definição do
problema e as restrições que são estabelecidas.

9. Tela: 1024 X 768 px
Restrição: Big Ad

10. O desktop tela de 1024x768 px

11. O browser aproximadamente 974x650 px

12. A tela aproximadamente 960x650 px

13. O Banner

14. O Banner
O tamanho de um Big Ad
utilizado no exemplo foi
estabelecido em 336x280 px.
(Internet Advertising Bureau,
2007)

15. Retângulo Médio
300x250 px
Outros banners
Um design baseado em um Big
Ad pode também acomodar a
largura de outros padrões de
publicidade.
Meia página
300x600 px

16. Os anúncios complicam as coisas, mas eles são
realmente muito úteis, porque servem como
limitações.

17. Conceitos

18. Unidades são os blocos básicos de construção
de um Grid.
Por definição, eles devem ser todos uniformes.

19. Gutter são os espaços entre as unidades de um
Grid.
Por definição, eles também devem ser todos
uniformes.

20. Colunas são formadas pelo agrupamento das
unidades, criando uma estrutura visual.
As colunas não são necessariamente uniformes.

22. Unidades

23. Gutters

24. Colunas

25. A regra do 3... ou 4.

26. Em geral, devemos criar sistemas de Grid múltiplos
de 3 ou 4.
12 é o ideal pois é múltiplo de 3 e 4.

27. Podemos agrupar 2 colunas...

28. 3 colunas...

29. 4 colunas...

30. e 6 colunas

31. A matemática de
unidades de colunas

32. Não cabe! 336 x 3 = 1008 px.

33. Olha o Bizu!

34. Tela - ((QtdUn-1) x Gutter) / QtnUn = TamUn

35. 950 - ((16-1) x 10) / 16 = TamUn

36. Primeira tentativa...

37. Arredondaremos
o banner para
340px.

38. Dividiremos a
coluna em duas
unidades de
165px com
10px de gutter
(340 - 10) ÷ 2 = 165

39. Adicionamos 5
unidades de
165px,
chegando a
865px de tela.

40. Poderíamos dividir em 10 unidades, mas, ainda
assim, seria um sistema muito difícil de trabalhar.

41. Segunda tentativa...

42. Arredondaremos
o banner para
350px.

43. Dividiremos a
coluna em três
unidades de
110px com
10px de gutter
(350 - (2 x 10)) ÷ 3 = 110

44. Adicionamos 8
unidades de 110
px, chegando a
950 px de tela.

45. 8 é um bom
número, mas
podemos
subdividir em
16 colunas de
50 px.

46. O grid de 16
unidades nos
possibilita criar
duas colunas
iguais no lado
esquerdo...

47. ...e podemos
dividir em duas
colunas o lado
direito.

48. Podemos
também
adicionar 2
unidades para a
navegação à
esquerda.

49. Terceira tentativa...

50. é a última.

51. eu juro.

52. Apertaremos um
pouco o
arrendondamento
para 338px.

53. Dessa vez,
dividiremos a
coluna 5 vezes,
com 7 px de
gutter
(338 - (4 x 7)) ÷ 5 = 62

54. Adicionamos 14
unidades de 62
px, chegando a
959 px de tela.

55. 14 é um número estranho, mas pode deixar a
composição mais interessante

56. Ele nos permite
trabalhar com 3
colunas na área
esquerda.

57. Ou uma área de
conteúdo um
pouco maior
com uma
navegação a
esquerda

58. Quarta tentativa...

59. Brincadeira!

60. O Grid pronto,
passemos ao Layout.

61. Cabeçalho

63. Equilibre o peso da Logo com a área de busca.

64. Modelo de Caixa

65. Vamos definir
os elementos
em um sistema
de 9 unidades

66. Divida as
colunas com
linhas simples.

67. Essa aderência
entre os
elementos
causa tensão.

68. O que acontece
quando um
texto precisa
ser ressaltado
por uma caixa?

69. Quando o
realce
desaparece,
pode se criar
uma sensação
de falta de
alinhamento.

70. A saída é
adotar regras
para a inserção
em todos os
elementos.

71. Isso nos dá
consistência
visual e cria
uma área de
respiro ao lado
das linhas.

72. Bonito, né?

73. Texto
Texto

74. Texto
Texto

75. Margin
Texto
Texto

76. Border
Texto
Texto

77. Padding
Texto
Texto

78. Texto
Texto Texto
Texto

79. De volta à busca...

85. Possivelmente esta não é a melhor forma de se
mostrar, mas ficaremos com ela por agora.

86. Notem que o Roll-over se adequa ao grid.

87. Navegação

88. Trabalharemos com o menu esquerdo de duas unidades.

89. Colocaremos os itens observando a hierarquia

90. Adicionaremos linhas para enfatizar os grupos.

91. Vendo um
pouco mais de
perto.

92. Cada caixa deve ser
disposta usando os
mesmos princípios
que vimos. O
Padding de todos
os lados deve ser
visualmente iguais.

93. Coloque as linhas
justamente no
espaço das bordas.

94. A ilusão se torna
maior quando os
elementos são
agrupados.

95. Mesmo grupos
com vários itens
precisam ser
tratados da
mesma forma.

96. Sistema de navegação pronto.

97. Widgets

100. Sistema de navegação pronto.

101. Sistema de navegação pronto.

102. Sistema de navegação pronto.

103. Divida a de navegação pronto.
Sistema região em partes iguais.

104. Adicione também uma área para o usuário. Eles já devem ter percebido que a área
mais colorida na direita é um banner.
Sistema de navegação pronto.

105. Sistema de navegação pronto.

106. Sistema de navegação pronto.

107. Conteúdo

108. Sistema de navegação pronto.

109. Sistema de navegação pronto.

110. A Tabs saem do Grid. Não tem jeito.

111. Sistema de navegação pronto.

112. O tamanho da imagem é de 200px de largura por
120px de altura.

113. Quebrar os planos pode trazer resultados
interessantes.

114. Hora de posicionar as fotos relacionadas ou de
notícias de segunda importantes.

115. Aproveitando o espaço restante com criatividade.

116. Resultado com as imagens.

117. Quebrando planos também com as abas.

118. Sistema de navegação pronto.

119. Finalizando

120. Sistema de navegação pronto.

121. Sistema de navegação pronto.

122. Boring... quero fazer
sobre jogos.

123. Qualquer disposição de elementos na tela constitui
um layout. Melhor fazê-lo direito.

128. Referências

129. Esta aula foi baseada na apresentação “Grids are
good. (Right?)”de Mark Boulton.

130. Também buscamos informações no Internet
Advertising Bureau: “IAB Display Advertising
Guidelines: The New 2012 Portfolio”.