Faça o curso: jQuery na Prática

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.

Fidelidade

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)

Ferramentas

Algumas ferramentas podem ser muito úteis no desenvolvimento de wireframes.

Axure RP Pro

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.

Visual Paradigm

É uma ferramenta para modelagem UML, porém algumas de suas versões também permitem a criação de modelos de interface.

Visio

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).

Omnigraffle

Semelhante ao Visio, só que para usuários de Mac.

Ferramenta de Desenho

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.

Papel e Caneta

Ó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.