Arquitetura da informação
Atividades relacionadas
Design estrutural (wireframes)
Atualizado em 24.1.2010Wireframes compõem versões simplificadas das páginas do site que constam apenas de textos e links, sem qualquer detalhamento gráfico, para o exame das suas funcionalidades, da abordagem editorial, da navegação. O conjunto de wireframes inclui a listagem e posicionamento dos elementos de todas as páginas e do conteúdo de cada uma, com o estabelecimento de vínculos entre elas.
Podem também incluir informações detalhadas, necessárias ao desenvolvimento de cada tela, como texto, gráficos, áudio, vídeo, animações, elementos de navegação, links
■ Estes modelos têm como função:
◊ Nas fases iniciais, explorar e desenvolver os principais conceitos, com o registro dos primeiros produtos do processo de criação da estrutura conceitual e informacional, de alguma maneira subjetivo, para a intervenção crítica e reformulação por outros profissionais, como analistas de sistemas, arquitetos da informação, programadores, designers de interface, redatores e editores, profissionais de marketing e outros profissionais.
◊ Permitir a compreensão da estrutura pelos stakeholders do projeto, para a 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 o desenvolvimento, incluindo os aplicativos dinâmicos ("rich media applications"), animações, as ações e os movimentos do usuário e respostas dos sistemas do início até o final, passando por etapas intermediárias.
A aplicação de legendas nos diagramas sobre as funcionalidades de aplicativos ou os movimentos de animações ajuda o cliente a compreender melhor os componentes, nesta etapa do projeto em que as ideias ainda não têm forma definida.
◊ Ajudar a prevenir problemas que podem aparecer depois da inserção do conteúdo nas páginas.
■ Ao longo do projeto, wireframes servem como registros que devem ser corrigidos, testados por futuros usuários e aperfeiçoados (as versões iniciais precisam ser mantidas em arquivo, para consulta).
Seus arquivos devem incluir a data de atualização, o nome e o número da tela e, se necessário, uma descrição das ações que serão realizadas na tela e instruções sobre a funcionalidade da interface para os desenvolvedores.
■ Alguns projetos permitem que, depois de ajustado e aperfeiçoado o modelo de informações, se acrescente o conteúdo gráfico à interface.
■ Em outros casos, para que wireframes sejam testados por representantes dos usuários finais, podem precisar de um acabamento visual um pouco mais elaborado que os fios e as listas de links, para ficar mais amigáveis.
Um usuário de teste pode não entender direito porque deve dar palpite sobre o conteúdo e não sobre o layout, sobre o tamanho das fontes mas não sobre as suas cores. Neste caso, wireframes com indicações de cores, tipologias e imagens podem ajudar muito a criar um ambiente mais compreensível e produtivo.
Textos neutros como "Lorem ipsum" devem ser substituídos por frases indicativas do conteúdo que será publicado, como "Área dedicada às associações de moradores da cidade X". Textos sobre produtos devem ser ainda mais detalhados, pois são especialmente importantes nas compras online.
■ É 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. ► Exemplo 1 (link externo)
Assuntos relacionados
► Desenvolvimento de protótipos
► Mapeamento de processos
Referências bibliográficas (Criação de modelos de web sites)
► Sketchy wireframes (BoxesandArrows, acesso em 7.1.2010)
► Livro: Design para a internet - projetando a experiência perfeita, de Felipe Memória. Rio de Janeiro: Editora Campus, 2006.
► Real wireframes get real results (Boxesandarrows, acesso em 8.10.2006, mediante cadastro gratuito)
► A-Z indexes to enhance site searching (Digital Web, acesso em 5.2.2005)
Mais informação sobre o assunto (links externos)
► 16 Design tools for prototyping and wireframing (SitePoint, acesso em 23.4.2009)
► Review: 16 user interface prototyping tools (DexoDesign, acesso em 12.1.2009)
► Wireframes (blog de Jakub Linowski, acesso em 12.1.2009)
Programa para criação de wireframes
Programas para auxílio da autoria