Como fazer um layout

Nesse artigo iremos desenvolver um layout desde o wireframe (guia visual básico) até o a arte final. Com isso você poderá ter uma melhor orientação para desenvolvimento de um projeto de interface da concepção ao resultado final.

Vale ressaltar que esse não é uma regra são apenas dicas para servirem como auxílio no começo de um projeto, dicas que servem para criação de layouts para sites, para blogs ou sistemas.

Vamos lá!

Conteúdo - é a cereja do bolo.

Antes de tudo, é importante que você saiba o perfil do seu cliente, qual são fornecedores, concorrentes, qual a história, a identidade visual da empresa, referências de sites positivas, negativas, hardware onde será visto o site, e o mais importante de tudo, qual conteúdo que será apresentado no site.

Para isso existe um amigo muito importante para essa etapa do projeto, chamado Briefing, para quem não sabe o Briefing é nada mais nada menos do que um questionário, que e o seu cliente responde afim de recolher todas essas informações, para que você tenha um layout mais adequado e organize seu projeto em uma estrutura lógica.

Basicamente criaremos um layout da home, com o seguinte conteúdo:

1. Logo
2. Menu de navegação
3. Banner
4. Blocos pequenos com imagem
5. Rodapé

Como começar o layout?

Sabe o photoshop aquele editor profissional de imagens, pois bem, não iremos começar por ele não. Iremos começar nosso layout no papel, pode ser num caderno de desenho, folha sulfite, papel milimetrado, enfim, vamos começar rascunhando o wireframe nesse papel.

Por costume começo desenhando a estrutura do site, onde vai o logo, o menu principal, os banners, dados do site e por fim o rodapé. Vale lembrar que não precisa ficar bonito não, o desenho que você fizer do wireframe vai servir para você definir melhor onde vai cada elemento do site.

Basicamente uso quadrados e retângulos para definir as images, e linhas para representar os textos.

Wireframe

Como havia dito, faremos o layout passo a passo, vamos começar desenhando um layout simples para desktop da página home. Nela vamos inserir um logo no canto superior esquerdo, menu ao lado do logo, um banner grande abaixo 2 destaques com fotos e uma descrição, para finalizar o rodapé.

Acompanhe abaixo o rascunho do wireframe.

Agora passando para o photoshop:

Mockup

Agora vamos criar a interface gráfica, aplicação de elementos de cores, fontes, imagens e acabamento para apresentação do resultado final do layout.

Para melhor distribuição e melhor equilíbrio das medidas, aconselho o uso de grids, para quem nunca ouviu falar nesse termo, grids, são medidas pré definidas para distribuição dos elementos no layout, afim de deixá-lo mais organizado.

Vou deixar alguns exemplos de grids, é só acessar os links e fazer o downloads.

960 Grid System
http://960.gs/

Responsive Grid PSD
http://dribbble.com/shots/410635-Responsive-Grid-PSD/


Quanto ao uso de cores, use cores seguindo a identidade visual de seu cliente, lembrando que existem várias possibilidades para variação de cores, podendo usar cores monocromáticas, compostas, usar a triad de cores. Para melhor ajudá-los vou deixar uma ferramenta muito útil, chamada Kuller. 

Kuller é uma ferramenta gratuita da Adobe que você encontra várias paletas de cores pré-definidas, onde você pode usar na composição de seu layout, existe a possibilidade de criação de paletas a partir de cores que você define no site. Confira no link abaixo:

Kuller
https://kuler.adobe.com/

Apresentação do layout

Essa é a etapa final, onde todos processos desenvolvidos até aqui são apresentados ao cliente através de uma imagem estática, mas com acabamento final, não deixe de fazer tudo com capricho, evite erros de escrita, imagens e elementos desalinhados, confira tudo antes da apresentação.

Vale lembrar que embora o cliente ainda não tenha lhe enviado todas informações para apresentar no layout é bom prever informações mais próximas do real, evite apresentar aqueles textos em loren ipsum ou imagens não condizentes com o projeto, como pirâmides do Egito em um site sobre maquiagem. Garanto que seguindo essas dicas o cliente irá enxergar seu layout com outros olhos.

Vou apresentar esse layout usando uma empresa fictícia.

Como vocês viram, esse é um processo básico para construção de um layout que conforme for executado várias vezes se torna natural. Claro que alguns passos podem ser alterados ou nem se quer executados, nem todas telas ou projetos necessitam de criação de wireframe, ou um layout detalhado, basta apenas observar e estudar a necessidade de seu cliente e a complexidade de cada projeto.

No próximo post irei comentar sobre o uso de imagens e citar vários bancos de imagens gratuitas.

É isso aí pessoal, qualquer dúvida só falar, se gostarem, compartilhem.