Após concluir todas as etapas do planejamento, vamos começar agora o nosso layout. Mas você que estava pensando em já abrir o seu velho e bom photoshop, vamos com calma, antes disso é preciso passar por outras etapas, para evitar problemas no futuro.

Wireframes

- O que são ?

Um wireframe de site web (ou também “wire frame web”, “wireframe web”, “web wireframing”) é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.
wikipedia

Exemplo de wireframe

- Para que serve ?

Tem como objetivo ajudar você a entender o que o cliente quer exatamente, o posicionamento do conteúdo, algumas funções do site e de uma forma básica é como ficaria a página do site depois de montada.

- Como fazer um wireframe

Hoje em dia já existem programas específicos para se fazer isso, facilitando e agilizando o trabalho. Mas na verdade um wireframe pode ser feito por qualquer programa de edição de imagem, ate mesmo no paint ou uma simples folha branca.

- Qual a vantagem de se fazer um wireframe ?

Imagina você se encontrar com um cliente, e simplesmente fala que quer um site para sua empresa, então você vai lá abre o seu programa e cria todo o layout com imagens, ícones, cores e fontes personalizados, tudo muito bonito, mas na hora de apresentar, ele diz que não era bem aquilo que queria, e que precisa fazer umas alterações, e acaba mudando tudo de lugar, assim você terá todo o trabalho de refazer praticamente todo o layout. Trabalhando com wireframes você evita grande parte desse retrabalho, diminuindo a sua margem de erros.

Arquitetura da Informação

Trabalhando juntamente com os wireframes é feito também toda a arquitetura da informação. Mas o que é arquitetura da informação ?

Arquitetura da informação (AI) é a arte de expressar um modelo ou conceito de informação utilizados em atividades que exigem detalhes explícitos de sistemas complexos. Entre essas atividades estão sistemas de biblioteca, Sistemas de Gerenciamento de Conteúdo. desenvolvimento web, interações de usuários, desenvolvimento de banco de dados, programação, artigos técnicos, arquitetura corporativa e de design de software de sistema crítico.
wikipedia

Em palavras mais simples, é todo o estudo de posicionamento da informação, que trabalha juntamente com a diagramação, dividindo o conteúdo e toda informação de texto tanto visual da página do site.

Criando o wireframe

Agora vamos criar um wireframe para nossa página. O nosso site será um site corporativo de uma empresa qualquer, que vamos fazer apenas como exemplo.

01. Topo

O topo será bem simples, apenas com a logo alinhada a direita, e a baixo dela um menu horizontal com os itens de home, sobre, serviços, produtos e contato, que é quase um padrão nesse tipo de site.

Wireframe - Topo

Alguns podem achar isso uma perda de tempo, mas como eu disse pode fazer uma grande diferença no final.

02. Conteúdo e rodapé

Seguindo agora para o conteúdo do site, se inicia com um titulo e um texto falando sobre a empresa.

Wireframe - Conteúdo (sobre)

A baixo temos a estrutura dividida em duas colunas, uma para serviços e outra para produtos, seguida de um título, uma imagem ilustrativa e o texto. E concluindo com o rodapé.

Wireframe - Conteúdo (serviços, produtos e rodapé)

Wireframe Final

Ao finalizar o seu wireframe deve ficar assim:

Wireframe Final - Criando Site

Como podem ver é um site bem simples, mas trabalhado de uma forma mais elaborada com todas essas etapas.

No próximo artigo chegaremos na parte que todos mais gostam, que é abrir o photoshop e transformar esse wireframe na imagem final do site.

Anteriores
Criando Site #1 – Planejamento

“Esses artigos tem como objetivo apenas passar conhecimento e ajudar pessoas que tem vontade de aprender sobre criação de sites. Todo o conteúdo dos artigos é apenas uma forma que eu uso para trabalhar e não é um padrão de desenvolvimento.