Tableless

Busca Menu

Usando o plugin 960gs e o Photoshop

Seja o primeiro a comentar por

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

Publicado no dia