Wireframes

289 visualizações

Publicada em

Etapas de planejamento de site - desenvolvimento

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
289
No SlideShare
0
A partir de incorporações
0
Número de incorporações
78
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Wireframes

  1. 1. WIREFRAMES WIREFRAMES
  2. 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. 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. 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. 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. 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. 7. Exemplo

×