Para o nosso desenvolvimento do wireframe, devemos passar pelas quatro fases: pesquisa, estudo, estratégia e arquitetura do projeto.
No post anterior, fizemos a pesquisa junto ao cliente. Agora temos que fazer um estudo deste material, avaliar se temos todas as informações para que possamos
montar uma estratégia e com ela construir a arquitetura do projeto.
A arquitetura do projeto pode ser montado de várias formas, porém vou mostrar um dos métodos mais comuns que é em forma de fluxograma:
Fluxograma Modelo
Detalhe sobre esta etapa, temos que cuidar com a usablidade, fazer o caminho ideal para que o usuário possa atingir o objetivo montado na estratégia do site.
Este fluxograma ajuda em todos os processos do desenvolvimento. Agora estamos com todas as informações para montarmos o wireframe. Ele pode ser desevolvido usando lápis e papel, ou um software específico, fica aberto esta opção.
É interessante usar apenas duas variações de cores e linguagens simples, afinal, esta documentação terá que estar disponível em todos os processos do desenvolvimento e inclusive para o cliente.
Abaixo um exemplo seguindo o que foi apresentado no fluxograma:
Home
Modelo 1
Empresa
Modelo 2
Uma dica interessante é usar legendas no wireframe, numerando cada bloco de informações, quando a página for grande.
Nesse caso, como é pequena, podemos dizer que o topo terá uma imagem no formato PNG, e a imagem da notícia tera uma imagem no formato PNG com dimensões de 300px x 300px.
Não é obrigatório o desenvolvimento de wireframes para todas as telas, e sim as mais importantes, isto é definido na parte de estratégia do projeto.
Agora com todo o material desenvolvido, podemos apresentar para o cliente como irá funcionar o novo site. Este é apenas um dos processos. Após a aprovação do cliente, podemos então passar para a parte de produção.
Abraços