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
- 32681 acessos
- Imprimir
- Imprimir toda a seção