Usando o plugin 960gs e o Photoshop

Entenda como funciona o Grid 960. Ideal para iniciantes.

por Flavio Santana 25/06/2013

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 http://960.gs/

960gs-btn

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.

plugin

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

actions

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.

grid-1

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

canvas

Nota: É importante ressaltar que o grid vêm com 10px de margem direita e esquerda. O nosso layout responsivo vai se basear nessas h2.

grid-2

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:

desktop_01_01

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.

tablet_01

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.

58df1f37-5a47-4696-8197-216d3ff6836c

Eu não vou entrar a fundo no assunto de CSS. Eu exemplifiquei para mostrar como eu resolvi a questão do redimensionamento.

body{
    margin:0 10px;
    background:#f1f1f1;
}

#geral{
    width:100%;
    max-width:940px;
    min-width:220px;
    margin:0 auto;
}

header{
    height:80px;
    background:#323232;
}

#banner{
    height:260px;
    background:#FFF;
    margin:15px 0 15px;
}

footer{
    height:190px;
    background:#CCC;
    margin:15px 0;
    clear:both;
}

article{
    height:260px;
    background:#5f65b3;
    width:31.25%;
    float:left;
}

article.middle{
    margin:0 3.125% 15px;
}

@media only screen and (max-width:600px){
    article{
        width:100%;
        margin-bottom:15px;
    }

    article.middle{
        margin:0px;
        margin-bottom:15px;
    }
}

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.

covey-960gs-example

Se colocarmos como se fossem camadas, a ideia do uso do grid para 3 diferentes tipos de tela, temos esse resultado:

camads_01

Resultado Final

Em sua versão desktop, temos o layout padrão em grid 960px. O resultado final ficaria assim:

pc_01_01

Na versão tablet, o CSS diminui as imagens, o texto do banner e o tamanho do corpo de cada bloco de conteúdo.

0000_01_01

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.

celular_01

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 http://bit.ly/12kNheE para melhor visualização e entendimento. Espero que tenha ajudado a gerar conhecimento. Gostou, quer comentar ou criticar? Vamos conversar