WIREFRAMES

WIREFRAMES

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.

Definição do site Avellar e

Duarte Wireframes são conjuntos de documentos que

mostram a estrutura, as relações entre unidadesde conteúdo, indicações de controles e formatosdas informações que irão compor uma interfacede mídia digital. Muitas vezes identificados comprotótipos funcionais, são documentos importantespara a documentação da conceituação técnica,editorial e funcional de um produto interativo, bemcomo para seu desenvolvimento, edição e avaliaçãocomercial.

Fonte:http://www.avellareduarte.com.br/projeto/desenvolvimento/desenvolvimento1/desenvolvimento11b.htm

Wireframes têm como função:

◊ Nas fases iniciais explorar e desenvolver osprincipais conceitos relacionados aos diversoscontextos de uso, na web ou em dispositivos móveis,

◊ Permitir a compreensão da estrutura funcionalpelos stakeholders do projeto, para sua avaliação.

◊ Facilitar o planejamento das próximas estapas doprojeto, a partir da visão mais clara do produto.

◊ Permitir a percepção de como as informações serelacionam e como a interface funciona.

◊ Detalhar as especificações para a criação e odesenvolvimento, incluindo os aplicativos dinâmicos,animações, ações e movimentos dos usuários erespostas dos sistemas do início até o final.

◊ Prevenir problemas que podem aparecer depoisda inserção do conteúdo nas páginas.

O conjunto de wireframes inclui a listagem eposicionamento dos elementos e do conteúdode cada interface e ponto de contato, com oestabelecimento de vínculos entre eles,podendo constituir versões simplificadas daspáginas de uma interface web ou aplicativomóvel, com poucos textos e links, semdetalhamento gráfico, para o exame dasfuncionalidades, da abordagem editorial, danavegação, dos relacionamentos entre seções(hierarquias), controles.

É 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

Exemplo