Wireframes

Disponível somente no TrabalhosFeitos
  • Páginas : 14 (3261 palavras )
  • Download(s) : 0
  • Publicado : 4 de março de 2013
Ler documento completo
Amostra do texto
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 deprojeto 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 paraespecificar 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 buscaRepresentaçã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 parapáginas com conteúdo relacionado ao apresentado. Deve ser usado apenas se houver conteúdo relacionado. Elemento Opcional: Sim Observações: Verifique o cross content de cada página na planilha de descrição do sitegrama e fluxo de navegação. 7. Menu Lateral

Quem é Guilhermo | Entre em Contato

Relação dos Elementos
1. Cabeçalho Definição: Cabeçalho de identificação do website. Deve estar presente emtodas as páginas. Elemento Opcional: Não

Bread Crumb Título da Página

Meus Artigos e Apresentações Útimas Atualizações
Envie para um amigo Cross Content

Título
Versão para impressão | Envie para um amigo Título Cross Content Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum dolor dolor dolor dolor

Definição: Contém links para as principais seções do website. Deve estar presente emtodas as páginas internas. Elemento Opcional: Não 8. Rodapé Definição: Rodapé da página identificando o website e o copyright de diretos autorais. Deve estar presente em todas as páginas. Elemento Opcional: Não

1.1. Barra de navegação institucional Definição: Contém os links para as seções institucionais do website. Elemento Opcional: Não 1.2. Caixa de busca Definição: Interface do sistema debusca do website. Funcionalidade: Usuário digita uma ou mais palavras chaves e aperta o botão OK. São apresentadas todas as referências que contém a(s) palavra(s) digitada(s). Elemento Opcional: Não 1.3. Logotipo Definição: Logotipo para identificação do website. Funcionalidade: Contém link para a Home-Page. Elemento Opcional: Não 2. Bread Crumb Definição: Indica a página atual e todas as páginashierarquicamente superiores. Deve estar presente em todas as páginas. Funcionalidade: Possui link para as páginas hierarquicamente superiores. Elemento Opcional: Não Observações: Verifique o bread crumb de cada página na planilha de descrição do sitegrama e fluxo de navegação. 3. Título da Página Definição: Título explicando o conteúdo da página. Elemento Opcional: Não 4. Versão para impressão...
tracking img