Wireframes são guias visuais usados no design de interfaces para sugerir a estrutura e relacionamentos entre páginas de um site. Eles ilustram o layout básico antes do design artístico e ajudam a explorar conceitos, permitir que stakeholders entendam a estrutura funcional e facilitar o planejamento de próximas etapas. Wireframes também especificam detalhes para criação e desenvolvimento de interfaces digitais.

1. WIREFRAMES
WIREFRAMES

2. Definição da Wikipédia
 Um wireframe de site web (ou também "wire
frame web", "wireframe web", "web
wireframing") é um guia visual básico usado
em design de interface para sugerir a estrutura
de um sítio web e relacionamentos entre suas
páginas. Um wireframe web é uma ilustração
semelhante do layout de elementos
fundamentais na interface. Normalmente,
wireframes são concluídos antes que qualquer
trabalho artístico seja desenvolvido.

3. Definição do site Avellar e
Duarte
 Wireframes são conjuntos de documentos que
mostram a estrutura, as relações entre unidades
de conteúdo, indicações de controles e formatos
das informações que irão compor uma interface
de mídia digital. Muitas vezes identificados com
protótipos funcionais, são documentos importantes
para a documentação da conceituação técnica,
editorial e funcional de um produto interativo, bem
como para seu desenvolvimento, edição e avaliação
comercial.
 Fonte:
http://www.avellareduarte.com.br/projeto/desenvolvim
ento/desenvolvimento1/desenvolvimento11b.htm

4. Wireframes têm como função:
 ◊ Nas fases iniciais explorar e desenvolver os
principais conceitos relacionados aos diversos
contextos de uso, na web ou em dispositivos móveis,
 ◊ Permitir a compreensão da estrutura funcional
pelos stakeholders do projeto, para sua avaliação.
 ◊ Facilitar o planejamento das próximas estapas do
projeto, a partir da visão mais clara do produto.
 ◊ Permitir a percepção de como as informações se
relacionam e como a interface funciona.
 ◊ Detalhar as especificações para a criação e o
desenvolvimento, incluindo os aplicativos dinâmicos,
animações, ações e movimentos dos usuários e
respostas dos sistemas do início até o final.
 ◊ Prevenir problemas que podem aparecer depois
da inserção do conteúdo nas páginas.

5.  O conjunto de wireframes inclui a listagem e
posicionamento dos elementos e do conteúdo
de cada interface e ponto de contato, com o
estabelecimento de vínculos entre eles,
podendo constituir versões simplificadas das
páginas de uma interface web ou aplicativo
móvel, com poucos textos e links, sem
detalhamento gráfico, para o exame das
funcionalidades, da abordagem editorial, da
navegação, dos relacionamentos entre seções
(hierarquias), controles.

6.  É comum, a partir da elaboração de wireframes, a
realização de protótipos interativos que funcionam
para testes preliminares de usabilidade e da
funcionalidade da interface, que complementam
este desenvolvimento conceitual.
 O texto dos slides 3 a 6 foram retirados do site
Avellar e Duarte, leia-o na íntegra em
http://www.avellareduarte.com.br/projeto/desenvol
vimento/desenvolvimento1/desenvolvimento11b.h
tm

7. Exemplo