WireFrames

Antes de passar à construção de um edifício, é sempre necessário um projecto, uma maquete, um trabalho de arquitectura. Para a web são utilizadas as mesmas premissas.
Para ajudar a equipa de desenvolvimento, deve-se construir um protótipo do layout de modo a ilustrar da maneira mais fiel o trabalho a ser realizado pelos programadores.
O wireframe é uma ferramenta que se torna cada vez mais indispensável para o trabalho da equipa de programação e design, não sendo uma regra de estilos para o layout nem a criação das páginas web, como é mal interpretado por muitos webdesigners.

É sim, a estruturação do conteúdo de cada página, observando fisicamente como será a futura pagina, ajudando na discussão com o cliente, originando muitas vezes um brainstorming providencial para reduzir o impacto negativo de possíveis rejeições.

Wireframe de 1ª Instância

Wireframe de 2ª Instância

O wireframe também é responsável por indicar a correcta marcação dos textos, links, aplicações, menus de navegação. Também é utilizado para a simulação de processos do site, tal como compra de produtos, pesquisa, entre outros. Tornando-se útil para testes precoces de usabilidade, visualizando o que será feito e tendo uma abrangência física do projecto.

Principais elementos de um Wireframe

Na estruturação do Wireframe, o designer procura esquematizar todos os elementos que compõem a página, tal como imagens, textos, formulários, apresentações multimédia, mecanismos de pesquisa. Com especial atenção em destingir graficamente cada elemento, padronizando para todos os Wireframes a serem compostos.

Wireframe de primeira instância

É um documento superficial que apenas indica as directrizes a serem implementadas no projecto, tal como blocos de texto, menus de navegação banners e logos.

Wireframe de segunda instância

Este modelo já apresenta um elevado grau de detalhe da página, e uma imagem gráfica de como deverá ser reproduzida.

Com este segundo protótipo já poderemos observar que é um gráfico com proximidade da realidade, logo o designer dos Wireframes deverá ter competências ligadas ao web design e mesmo à programação, para que não se coloquem objectivos impossíveis e que sejam contrários ás boas regras de usabilidade.

Deixo uma “WebApp free” - lumzy , para os interessados em elaborar um wireframe e testar os modelos propostos para implementação.