Wireframes : Documentação de Projetos Web

Considerado como o primo pobre do layout, os Wireframes são os esqueletos dos websites feitos pelos profissionais de Arquitetura da Informação.

Aliado ao sitemap (futuramente falarei sobre isso), o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretende) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos webdesigners. Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.

Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.

Um exemplo de um wireframe básico do blog seria assim:

Vantagens dos Wireframes:

– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.

– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.

– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.

Principais softwares para construção de wireframes

Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função (eu utilizei o FireWorks):

- Visio

- InDesing

- Freehand