Wireframes
Click here to load reader
-
Upload
jaqueline-franco -
Category
Internet
-
view
112 -
download
0
description
Transcript of Wireframes
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