Wireframe-design

 

Wireframe  é um desenho básico, como um  “esqueleto” ou  esquema, que demonstra de forma direta a arquitetura de como o objeto (interface, página da internet, modelo, etc.) final será de acordo com as especificações relatadas. O wireframe é a etapa essencial para visualizar tais projetos, estruturar informações e desenvolver a interface gráfica.


Ele é elaborado para organizar os elementos que entrarão na composição do projeto final, no entanto, ele deve ser feito da maneira mais simples possível, mostrando apenas o essencial, como uma espécie de rascunho, sem cores ou imagens.

 

O objetivo do Wireframe é auxiliar o desenvolvedor no entendimento dos requisitos que foram recolhidos junto ao cliente com relação as funções e objetos que um sistema (mas não somente relacionado a informática ou internet, pode ser um objeto, modelo, etc.) deverá conter.
 


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.
 

 

Veja abaixo algumas ferramentas web que otimizam a produção de wireframes:
 

 

iPlotz

 

O iPlotz é uma ferramenta muito bacana, que pode ser usada na web e também instafada no 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.

 

 

 

 

Pidoco

 

O Pidoco possui uma interface muito amigável, semelhante ao iPlotz. Ele permite criar wireframes com fluxo e, assim como o Mockflow, oferece recursos para plataformas mobile e recursos para teste de usablidade. O legal é que estão oferecendo um mês de trial (período de teste) para novos usuários.

 

 

Cacoo

É uma ferramenta totalmente free, bem simples e fácil de usar. O Cacoo permite que você compartilhe o seu projeto e mantenha conversas online (chat) em tempo real com membros da equipe.

 

 

MockingBird

Esta é outra ferramenta free, um pouco mais simples, mas ainda assim bem parecida com o Cacoo. Funciona no Safari, Firefox e no Chrome. O curioso é que consegui o MockingBird sem estar cadastrado no site. Ela pode ser uma ferramenta bem rápida quando você estiver sem tempo.

 

 

Fireworks, Illustrator, Corel Draw e outros

Você não necessariamente precisa utilizar programas específicos para desenvolver wireframes; eles podem ser desenvolvidos utilizando ferramentas gráficas como o Illustrator e o Corel, por exemplo. Mas às vezes os prazos são curtos e algumas das ferramentas que listei acima oferecem recursos que permitem mais rapidez na produção e na avaliação do wireframe por membros da equipe.

 

BIBLIOGRAFIA:

DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008. [Webinsider]