E cada vez mais frequente a utilização de wireframes para implementação de um projeto web. Seja esse projeto um portal, blog ou até mesmo para aplicativos moveis.

É ótimo que a adoção do wireframe para o desenvolvimento de web sites esteja ganhando a cada dia novo adeptos.

Confusão

Porém notei que muitas pessoas estão interpretando o conceito do wireframe de forma equivocada. Ao invés de pensar sobre organização das informações muitos estão se preocupando com a navegabilidade ou design.

Navegação e design são importantíssimos para qualquer projeto web, porém o wireframe não é a ferramenta adequada para esse tipo de trabalho.

Direto ao ponto

Wireframe = organização das informações.
Protótipo = navegação, interação.
Layout = design, cores fontes, tipografia, paixão e etc.

Devemos pensar em wireframe como se fosse a planta de um prédio. Temos descritos todos os componentes que farão parte do projeto, porém em uma fase primaria, sem se preocupar com estética ou navegabilidade. Já imaginou o problema que seria se o arquiteto ao pensar sobre a planta de um prédio tivesse de definir qual a cor ou azulejos seriam colocados na cozinha?

Com certeza não seria muito produtivo, pois o momento para se pensar a respeito de cores ou azulejos de uma cozinha deve vir em uma fase posterior, quando já houver uma definição de toda a arquitetura do prédio e onde cada componente será alocado.

Para a construção de um web site devemos seguir a mesma lógica, não faz sentido algum montar um wireframe se preocupando com tipografia, cores ou navegação.

A grande confusão

A maior confusão que tenho notado e com relação ao protótipo. E penso que essa mistura de conceitos é recorrente pois visualmente wireframes e protótipos tem suas semelhanças. Mas como esclarecido acima possuem funções diferentes.

Enquanto wireframes servem para auxiliar na arquitetura da informação, protótipos são utilizados para avaliar a interação entre homem e site.

Ok! Mas como fazer?

Sempre devemos ter o cuidado de ao apresentar o wireframe para um cliente, explicar o conceito do wireframe. Afinal, a não ser que seu cliente seja seu chefe, ele não vai entender de primeira e provavelmente pensará que contratou alguém que não entende muito do assunto. Já que ele sozinho pode fazer algo mais atrativo.

Então, além de orientar o cliente, o próprio wireframe deve conter informações detalhadas sobre medidas e a descrição de cada componente que irá fazer parte do layout final. Não basta apenas colocar uma caixa falando que ali estará um Slide show, você deve informar as medidas das imagens.

Acrescente todo tipo de nota que achar pertinente, nesta fase é importante o detalhamento. Voltando ao exemplo do Slide Show, se for válido acrescentar uma nota sobre a extensão das imagens e onde estas serão armazenadas fique a vontade, coloque esse tipo de nota.

Dica Final

Sempre que possível recomendo que seja desenvolvido um wireframe, um protótipo e um layout final para então se iniciar a programação. É fato que o trabalho de codificação será realizado em prazo mais ágil gerando um redução no custo do projeto uma vez que o re-trabalho na fase de codificação será minimizado.

Contribua, deixe seu comentário!