Wireframe

ireframes: Conceito & Ferramentas março 10, 2011
Os wireframes têm como função simular visualmente a estrutura organizacional das informações de uma interface, sem a preocupação de apresentar uma interface gráfica final. Eles auxiliam na avaliação de como o conteúdo e as funcionalidades devem ser inseridas e representadas, ou seja, a produção de wireframes visa prever erros estruturais e de rotulação, evitando um possível re-trabalho após o desenvolvimento da interface gráfica final.

De Acordo com Van Dijck (2003), os wireframes são esboços da interface que o usuário terá contato. Mostram o design de interface sem mostrar ainda o design gráfico, indicando como funcionarão links, botões funcionais e outros elementos que possam influenciar o uso da interface e a relação entre eles. Chak (2004) afirma que os wireframes devem apenas mostrar o contorno daquilo que será a interface, sem aprofundamentos no design gráfico.

Acredito que a produção de wireframes seja uma etapa essencial para uma visualização mais concreta do que será o projeto, auxiliando não apenas na estruturação hierárquica das informações, mas também no próprio desenvolvimento da interface gráfica. Para este post listei abaixo 5 ferramentas web que otimizam a produção de wireframes:

1-iplotz:
O iplotz é uma ferramenta muito bacana, você pode usá-lo tanto web como instala-lo em seu computador. Ele permite que você exporte e visualize seu wireframe em HTML, utilize recursos de grid e ainda possibilita que uma outra pessoa o acesse. A interface desta ferramenta é bem intuitiva seguindo um padrão de clique e arraste. Sua versão “free”, permite gerenciar um projeto por vez.