Pular navegação

Wireframe

Ajuda
A Árvore do Conhecimento funciona como um Wiki. Se você quiser acrescentar ou corrigir uma informação, utilize as abas superiores. É preciso estar logado para participar.
Conhecimento
Cartão do Conhecimento
Wireframe
Wireframe
Wireframe é um esboço estrutural de uma interface, demonstrando os elementos que serão apresentados visualmente na tela e seu peso relativo.
Prestadores de Serviços
Nenhum ainda...
Nenhum ainda...
Site License
Creative Commons Attribution 3.0 Brazil
Creative Commons Attribution

Wireframe

Wireframe é um esboço estrutural de uma interface, demonstrando os elementos que serão apresentados visualmente na tela e seu peso relativo.

Seu nome vem da metáfora da  armação usada por escultores para dar forma e suporte a uma obra ("wire", de arame, fio; e "frame", de esqueleto ou estrutura). O wireframe também é conhecido como page schematics (esquema de página), blueprints ou protótipos. 

Tutorial em vídeo

O uso do wireframe

O wireframe é uma maneira de manifestar decisões realizadas em torno de um projeto, e pode ser utilizado com diferentes propósitos. Em uma etapa inicial, pode funcionar como uma ferramenta criativa para explorar e desenvolver conceitos. Neste momento, espera-se que ele tenha muitas transformações para testar possibilidades de organização visual de elementos e para materializar o que até então se mantinha apenas na imaginação de cada um dos envolvidos na arquitetura de informação.

A medida que as revisões aumentam e as alterações começam a diminuir, o wireframe serve como uma espécie de "acordo" entre os envolvidos com o projeto, sobre como o site deverá ser, a medida em que, por exemplo, funcionalidades vão sendo definidas. O wireframe começa a se afirmar um documento de referência. Como documento de etapa de especificação, o wireframe é uma das ferramentas para se registrar diversas decisões sobre o projeto.

Para Jesse James Garrett, um dos mais importantes autores na área de Experiência do Usuário (UX), o valor do wireframe está na sua maneira de integrar elementos de Design de Interface, Design de Navegação e Design de Informação. A partir do contato destas três campos em um mesmo documento, o wireframe define o esqueleto que dá o primeiro passo para a processo de formalização do design visual de um website.

Quando está quase concluído, o wireframe resulta em um documento que detalha o projeto e que pode ser utilizado tanto para validar o processo de implementação como para validar a própria arquitetura de informação, por permitir que seja realizado um protótipo funcional passível de testes (como uma avaliação de usabilidade) com usuários. O wireframe é mais útil como uma ferramenta para ajudar na criação de mockups de alta fidelidade e protótipos funcionais, do que como representação perfeita do que será  projetado.

Simplicidade 

Do ponto de vista do design gráfico, o documento que o arquiteto da informação gera para especificar os elementos que vão compor uma página (wireframe) deve ser o mais simples possível. Cores, imagens, tipografia e exatidão dos tamanhos e medidas não devem ser preocupações de quem cria um wireframe. Esse documento deve servir como mera referência para o designer gráfico da página, que pode até encontrar uma disposição melhor para os elementos dentro de sua criação. Se o wireframe é repassado com o grid de alinhamento definido, tamanhos de fontes e até tipografia, o designer pode se sentir engessado demais.

O wireframe também serve para os desenvolvedores saibam exatamente que elementos de interface terão que implementar. 

A vantagem de fazer o wireframe antes do design gráfico ou desenvolvimento das páginas é que o planejamento é mais bem pensado e as alterações podem ser feitas com o mínimo de esforço, evitando retrabalho. 

Por outro lado, o wireframe normalmente é entregue ao cliente para aprovação antes de ficar pronto o design gráfico, ou seja, um monte de rabiscos numa folha de papel causa uma impressão pouco profissional. É por esse motivo que muitos arquitetos da informação capricham demais na apresentação do wireframe. O exagero começa quando o arquiteto se preocupa se alguém vai achar feio seu wireframe. Wireframe não é pra ser bonito, é pra ser entendido.

Pode-se encontrar um meio termo, um wireframe de baixo custo mas com apresentação profissional, através da utilização de softwares específicos para isto. O software fornece os elementos gráficos já prontos (janelas, listas, caixas de texto, botões etc.) e o arquiteto monta os wireframes praticamente apenas clicando e arrastando.

Exemplos

Precisa de ajuda?

Conhecimento

A Árvore do Conhecimento é um espaço para compartilhar e aprender sobre Design. Funciona como um wiki, ou seja, um texto colaborativo. Qualquer pessoa pode:

  • Adicionar novos Conhecimentos
  • Anexe arquivos em páginas para compartilha-los com outros.
  • Adicionar comentários e revisões
  • Arquivar conhecimentos que estão desatualizados ou incorretos