Este post tem basicamente 2 objetivos:

1) Mostrar um passo-a-passo macro na construção de uma interface pra os designers que estão começando.

2) Considerando que que cada designer tem um estilo (e isso também se aplica a seus métodos de desenvolvimento), estou expondo a forma como eu trabalho para que possamos trocar idéias.

Não vou me aprofundar demais, a intenção é mesmo deixar uma visão macro do processo. Vamos lá.

1) Jogando os elementos e idéias na tela. Alguns gostam de rascunhar no papel esta etapa do projeto. Particularmente, prefiro recorrer a meu amigo Fireworks e a um wireframe de baixíssima fidelidade. Normalmente, já tenho a idéia montada em minha cabeça. Caso você não tenha, preocupe-se com isso – provavelmente você vai ficar jogando elementos de um lado pro outro na tela por falta de planejamento.

2) Segure as ondas com o baldinho de cor. Depois de definir onde cada bloco de informação vai ficar, é hora de detalhar um pouco mais o conteúdo de cada um (inserir texto e imagens). Contornos (sem preenchimento) são muito utilizados nesta etapa.

3) Trabalhando em tons de cinza. Seguindo ainda a linha do wireframe, os tons de cinza servem para demarcar o nível de importância de cada área do site (quanto mais escuro, maior destaque). Ponto. Em tons de cinza eu também já vou desmembrando o  site em cabeçalho, corpo e rodapé (que isso não seja uma regra). Ainda nesta etapa monocromática, costumo popular com imagens repetidas as áreas do site que vão conter imagens. Assim temos uma noção mais real do peso visual e no impacto que as imagens vão causar no layout. OBS: As vezes pode acontecer de você perceber que o layout ficou “poluído” em determinados pontos. Caso isso acontecer, recorra ao seu bom senso e ao espírito Magaiver.

4) Cores. Cuidado para seu layout não ficar travado demais nas cores que o cliente usa. Você tem alternativas trabalhando com uma ou duas cores auxiliares, sempre tomando cuidado para seu site não virar um carnaval fora de época. Vai meu filho, se joga na paleta de cores e no baldinho. Se você for um programador se aventurando meio sem noção nas combinações , talvez isso te ajude. http://www.colorotate.org/

5) “Desemblocando” o layout. Note que o conteúdo (colunas na parte cinza) começam a sair dos blocos quadrados. Neste caso, como o site é formal, não abusei muito das formas e disposição do conteúdo. Porém, se o site for algo mais artístico, conceitual, não fique preso ao wireframe do primeiro passo: teste formas, disposições, rotações, combinação, sacanagens e simpatizantes. Essa foi uma discussão lá na webcapixaba, e até vale um post só pra falar disso. Mas por enquanto não, vamos para o próximo passo.

Ah sim, outra alteração significativa foi a definição de um tamanho e formato para o cabeçalho e rodapé, mesmo que a grosso modo.

6) Lapidações finais. Calma que já tá acabando.

• Correções de espaçamento entre os elementos
• Detalhes e adornos do topo trabalhados (maoir nível de detalhes)
• Imagens previamente tratadas no photoshop, definitivas
• Fundo caracterizando ramo do cliente, discretamente.
• Sombreamentos

Acabou?

O PNG, a arte do site, sim. Você pode conferir algumas sacanagens a mais feitas em flash direto no site – www.diskmoveis.com.br

Agora, se você ver um estagiário com aquele pescoção em sites de templates pra dar aquela chupada, que tal compartilhar este link para que ele conheça os processos e tente  desenvolver seu estilo e criatividade.

Um abraço! E vamos trocar idéias…