Grids tem como base no Design Gráfico como forma não só de organização, mas de proporção e distribuição dos elementos dentro do layout. Seja de um livro, uma revista ou um web site, usamos grids para estruturar as informações e alinhamentos.
Especialmente no Design para Web, usamos, na maioria das vezes o sistema de grid de 960 pixels que é um padrão para monitores antigos com resolução de 1024×768 mostrem o site corretamente sem que se crie a barra de rolagem horizontal.
No sistema de grid de 960px podemos dividir em 12, 16 ou 24 colunas e criar a estrutura do site nessas proporções facilitando para que se torne responsivo e adaptativo para telas de dispositivos móveis.
Neste tutorial eu vou mostrar como funciona um layout de um site responsivo usando o 960gs no Photoshop
Instalando o plugin
Um recurso muito interessante para criarmos grids rapidamente em softwares como o Photoshop e o Fireworks é o plugin 960gs. Este plugin pode ser encontrado no site https://960.gs/
No site, encontramos o botão de download – Big ol’ DOWNLOAD button . A pasta vem com um nome “nathansmith-960-Grid-System-231ee0c“ que contém códigos html e css e vários tipos de templates do grid para diversos tipos de aplicações.
Baixando o arquivo e descompactando temos a pasta app_plugin e temos a Actions para Photoshop e a extensão do Fireworks. Execute a Action ele abrirá o Photoshop automaticamente com os padrões de grid no painel de Actions. Window > Action ou Alt + F9
Definindo o layout
Vamos trabalhar no padrão de 12 colunas apenas. Executando a Action no botão “Play” ele cria um documento padrão com o tamanho de 1020x700px e com o nome 12 Column Grid. *As definições do grid podem ser alteradas caso seja necessário.
Vamos ajustar nosso documento para o tamanho inicial de 1440x900px. A altura do layout pode variar com o andamento do wireframe. Para isso vamos em Image > Canvas Size ou Alt+Ctrl+C
Nota: É importante ressaltar que o grid vêm com 10px de margem direita e esquerda. O nosso layout responsivo vai se basear nessas h2.
Salve o seu documento File > Save ou Ctrl + S com um nome que você quiser. Eu salvei o meu documento como uma empresa fictícia chamada Covey.
Criando a interface
Se você está criando uma interface do zero, pense no seu contexto e conteúdo. Quando se cria sites responsivos, é crucial pensarmos como exibiremos o seu conteúdo e como ele vai se comportar em dispositivos com telas menores. Tablets no geral tem resolução em posição de paisagem de 1024×768, logo, sites criados em padrões 960px funcionam perfeitamente nessa resolução.
Quando escolhemos o sistema de grid de 12, 16 ou 24 colunas, seguimos um padrão de uso de colunas. Abaixo eu apliquei em um wireframe usando o sistema de 12 colunas.
Ele tem um tamanho de 940px de área útil, ou seja, de conteúdo e elementos. Deixei 10px padrão de cada lado do layout como folga, assim ele não ficará colado na borda da tela.
Aqui, tenho um cabeçalho com menu e um banner principal com texto e um rodapé com links. Meu conteúdo é dividido em 3 blocos, então eu usei 4 colunas para cada bloco. Se eu tivesse 4 blocos de conteúdo, usaria 3 colunas e assim sucessivamente. No meu caso, eu usarei o grid da seguinte forma:
No formato retrato (768px) do tablet, eu usei 9 colunas e redimensionei o conteúdo para utilizar os mesmo blocos de conteúdo em 3 colunas.
E no celular (240px) o uso de 3 colunas para cada bloco de conteúdo é o mesmo, o que muda é a posição dos elementos que passam a ficar um em cima do outro.
Eu não vou entrar a fundo no assunto de CSS. Eu exemplifiquei para mostrar como eu resolvi a questão do redimensionamento.
No site fictício, eu criei em cima do wireframe pensando como as informações ficariam dispostas, então temos a interface web. Nesta parte não detalhei detalhes visuais ou de formatação, apenas no conceito de grids.
Se colocarmos como se fossem camadas, a ideia do uso do grid para 3 diferentes tipos de tela, temos esse resultado:
Resultado Final
Em sua versão desktop, temos o layout padrão em grid 960px. O resultado final ficaria assim:
Na versão tablet, o CSS diminui as imagens, o texto do banner e o tamanho do corpo de cada bloco de conteúdo.
Na versão de celular, o layout se adapta até o tamanho de 240px. Com ajuda do CSS, eu otimizei o menu para o estilo dropdown, otimizando a experiência de navegação.
Conclusão
Vários artigos sobre Design Responsivo ou RWD (Responsive Web Design) estão disponíveis na Web. Este artigo é apenas uma das formas que conseguimos otimizar o site para dispositivos móveis. Lembrando, como disse anteriormente, temos que pensar como o conteúdo será exibido e como podemos moldar ao nosso projeto e como trabalhar ele de diferentes formas.
Eu disponibilizei esse exemplo de layout neste https://bit.ly/12kNheE para melhor visualização e entendimento. Espero que tenha ajudado a gerar conhecimento. Gostou, quer comentar ou criticar? Vamos conversar
