Usando o plugin 960gs e o Photoshop

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

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *