Wireframes fazem parte da Arquitetura da Informação de um site e têm como finalidade mostrar a disposição dos elementos na tela assim como os tamanhos de fontes a serem utilizados.
Existem três tipos de wireframe, baseados no grau de fidelidade dos mesmo: baixa, média e alta fidelidade. O wireframe do meu blog, por exemplo, foi elaborado em baixa fidelidade, o que significa que nela não constam os elementos gráficos, tonalidades das cores a serem utilizadas ou estrutura de navegação.
Os wireframes de média fidelidade já contêm elementos que o aproximam mais do produto final, enquanto que os de alta fidelidade são os mais próximos a estrutura de layout.
Wireframe de Baixa Fidelidade
A imagem acima é um exemplo de wireframe de baixa fidelidade feito para o desenvolvimento do meu blog (www.pauloeduardo.com)
Algumas ferramentas podem ser muito úteis no desenvolvimento de wireframes.
O Axure é uma ferramenta especializada na área de Arquitetura da Informação que permite desenvolver wireframes navegáveis e ainda gera documentação em DOC.
É uma ferramenta para modelagem UML, porém algumas de suas versões também permitem a criação de modelos de interface.
Ferramenta da Microsoft que faz parte do pacote Office que permite criação de diagramas de todos os tipos, incluindo o wireframe. (Você pode baixar os stencils de Wireframe para o visio).
Semelhante ao Visio, só que para usuários de Mac.
Além das ferramentas especializadas você pode usar sua ferramenta de desenho favorita (Photoshop, Corel, Fireworks, etc) para desenhar seus wireframes. A imagem de exemplo do meu blog foi desenvolvida com Fireworks.
Ótima opção também, pois permite edição rápida no meio de uma reunião por exemplo, assim como permite inserção rápida de comentários.

Muito bom artigo, bastante importante. Depois que comecei a trabalhar com wireframes o tempo desenvolvendo layout tornou-se bem mais rápido.
Responder comentário
O wireframe é o primeiro passo para um grande projeto de design. Ficar tentando encaixar o layout direto com as cores e posições pode levar muito tempo e não conduzir o projeto a um resultado positivo.
Responder comentário
ótima matéria e ótima explicação
Responder comentárioOs textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.
Paulo Rezende é profissional da área de web, atuando nela profissionalmente desde 2005 com tecnologias como XHTML, CSS, Webstandards, PHP, JavaScript, Jquery, CodeIgniter, cursando atualmente faculdade de Sistemas de Informação na Unniversidade Anhembi Morumbi de São Paulo, Atuando. Mantém o blog pessoal (www.pauloeduardo.com) e a Psyco Media Development, empresa de desenvolvimento de Sistemas.
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.