Dicas para desenvolvimento de Wireframes

No planejamento de uma interface, o profissional de arquitetura de informao precisa fazer alguns testes at chegar a um modelo estrutural para ser usado como base. Este modelo conhecido como Wireframe.

Wireframe um rascunho com marcaes de peso e posicionamento do contedo de uma interface. Ele ser usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo. Ainda vejo muitos profissionais com receio de usar wireframes e alegam que o cliente no entende ou que o trabalho demora mais, mas eu acredito que uma etapa primordial na criao de uma interface e portanto, levantei alguns pontos que podem ajudar novos profissionais a entender ou incorporar com naturalidade o desenvolvimento desses esboos.

Nunca pule a etapa do wireframe.

Passar pela etapa de wireframe no trabalhoso e essencial para o progresso do projeto. Criar um esboo e pensar na navegao antes de ter um layout desenhado pode fazer com que perceba algum erro de usabilidade ou algum bloco de contedo que no est sendo exibido com o devido destaque. muito melhor perceber essas coisas antes, n?

No tenha medo.
Arquitetos de informao no so necessariamente designers, mas no saber desenhar no significa que tenha que ter medo de criar wireframes. Supere esse medo e expresse suas ideias no esboo de alguma forma. Desenvolver wireframe como projetar seu website em voz alta.

Papel e caneta.
No porque a interface digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Coloque todas as ideias no papel. Voc pode recortar pedaos de papel ou usar post-its para reposicionar os blocos de contedo com maior facilidade, uma baita mo na roda.

Teste seu wireframe.

Questione cada interao do seu wireframe. Imagine um usurio especfico tentando acessar aquela interface e pea opinies de outras pessoas da equipe que no participaram diretamente da elaborao dos esboos (por que no incluir o cliente nessa tambm?). Essa discusso pode levantar pontos importantes que voc deixou passar em um primeiro momento.

Inspire-se.

Procure por novos wireframes, compartilhe ideias com amigos que no trabalham com voc. Visite sites de referncia como o I <3 Wireframes ou at o Flickr. Existe ainda um projeto chamado Paper Browser, que um modelo de navegador web com um canvas milimetrado para voc imprimir e poder desenhar em cima facilmente. Eu recomendo!

Ferramentas.
Embora eu ainda use o Photoshop para meus wireframes, h quem use programas no muito convencionais, como o Flash. Mas existe tambm uma grande variedade de ferramentas para auxiliar no desenvolvimento de wireframes que voc pode escolher. E a lista no pequena: Ferramentas para Desktop (freeware em negrito)
MockupScreens Axure Balsamiq Mockups Pencil FlairBuilder ForeUI OmniGraffle GUI Design Studio OverSite

Microsoft Visio FluidIA WireframeSketcher Justinmind Prototyper DENIM EasyPrototype SketchFlow DesignerVista MockApp

Ferramentas Online
iPlotz ProtoShare MockFlow HotGloo Mockingbird Cacoo Jumpchart Gliffy Lovely Charts Lumzy JustProto Pidoco iPhone Mockup