Wireframes

Wireframes
© 2006 Guilhermo Reis – www.guilhermo.com

2

Definição
Wireframes
Diagrama que representa todos os elementos de uma página, definindo esses elementos, a hierarquia entre eles, agrupamentos e suas importâncias relativas. Para representar os elementos utiliza esboços das páginas. Seu objetivo é comunicar o conteúdo e as funções de cada página para discussão com a equipe de projeto e para orientar a implementação. O wireframe não representa o projeto gráfico do website, ele apenas apresenta uma versão simplificada da página sem elementos distrativos.

3

Público-Alvo dos Wireframes
Vários públicos utilizam o wireframe para ter visão dos elementos e funcionalidades das páginas do website, porém com propósitos diferentes:
Arquitetos de Informação: usam para especificar as páginas do website. Diretores de Arte: usam para definir a linha gráfica do website, o layout de cada página. Redatores e produtores de conteúdo: usam para especificar os conteúdos das páginas. Programadores e Analistas: usam para implementar as funcionalidades das aplicações. Clientes contratantes: usam para validar se o conteúdo das páginas está de acordo com os requisitos do projeto. Usuários: usam para simular o funcionamento do website em testes de usabilidade.

4

Especificação do Wireframe
A especificação completa de um wireframe é composta por três partes (camadas) diferentes:
Identificação
Camada que apresenta a identificação dos elementos, seus agrupamentos e a sua priorização.
Logotipo Cabeçalho Barra de navegação institucional Menu Lateral Caixa de busca

Representação
Camada que apresenta exemplos de conteúdos ou exemplos das funcionalidades
Logo

Descrição
Especificação detalhada dos elementos e suas funcionalidades.

GUILHERMO.com
Página Inicial > Página

Busca:

OK

Descrição do wireframe Página Interna (Modelo de Moldura)
Definição: Modelo para as páginas internas do website.

6.1. Cross Content Definição: Lista com links para