Wireframes
Transferir como PPTX, PDF0 gostou409 visualizações
Wireframes são guias visuais usados no design de interfaces para sugerir a estrutura e relacionamentos entre páginas de um site. Eles ilustram o layout básico antes do design artístico e ajudam a explorar conceitos, permitir que stakeholders entendam a estrutura funcional e facilitar o planejamento de próximas etapas. Wireframes também especificam detalhes para criação e desenvolvimento de interfaces digitais.
Wireframes
- 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. 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. 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. 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. É 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. Exemplo