Usando uma Grid Gráfica efetivamente

As Grids economizam tempo e stress na hora de conceber um projeto. Projetos como, lojas virtuais, blogs e sites complexos, tendem a tomar muitos meses para confecção, mas com uso de grids o tempo é reduzido em 50%.

Grids nos dão uma visão geral de espaçamentos, margens e divs que devemos criar. Muitos pensam que o desenvolvimento de um projeto começa com o código XHTML ou CSS.
O processo todo começa com um Winframe, que seria o desenho do site em um editor de imagens.
O editor de imagem nos da a capacidade de trabalhar por camadas, então a Grid pode ficar na camada mais baixa e assim podemos colocar os elementos em cima dela.
Vamos analizar este projeto que fiz para um cliente.

 Os elementos principais de uma Loja Virtual são as promoções e produtos. A grid foi elaborada em cima desses itens.

• Na parte de baixo, perto do Footer existem caixas para 4 produtos e uma caixa que pega 2 unidades para a newslleter.
• A partir daí a grid que tem unidades de 152px e espaçamento de 6px, conseguimos estilizar o menu no topo com harmonia.
• Além disso a regra dos terços, usada muito em fotografia, foi utilizada para dar equilíbrio no Layout.
• Fazendo as somas de unidades nossa grid ficou com largura de 954px com unidades de 152px e espaçamentos de 6px.
• Abaixo do banner temos um div que contém 3 blocos de 310px que farão referências e promoções, novidade e cadastramento de revendedores. Veja que com a grid fica mais fácil de saber quais divs devem ser criadas e em que tamanho.
• O full_banner está incompleto de propósito para este artigo para que vocês possam ver, que com a grid, a visão de onde colocar, textos e imagens, fica mais clara.

Está é a forma que se usa Grids para grandes projetos ou para projetos pequenos.
Vocês devem ter entendido o uso das Grids já nos primeiros artigos, pois não houve muitas perguntas e nem dúvidas.
Usem grids e bom trabalho!

Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email