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

Rabiscoframe

Rabiscoframe é um esboço de interface gráfica que focaliza nos componentes de interação, tais como botões, menus e ícones. O esboço serve para visualizar rapidamente o conceito da interface e gerar alternativas. Os elementos são desenhados sem qualquer detalhe, visando apenas marcar sua posição na tela.

Além de representar a estrutura básica da interface, o rabiscoframe costuma incluir diversas anotações fora da tela, esclarecendo os comportamentos esperados pelos elementos de interação.

Os rabiscoframes costumam ser feitos em cadernos de anotação, quadros branco de parede e quadros brancos portáteis.

rabiscoframe.jpg

Wireflow

Sequência de wireframes simples encadeadas em um fluxograma afim de visualizar um processo em etapas.

O uso do wireflow facilita a visualização dos pontos chave de interação, pois cada interação em uma tela leva a próxima tela do seu resultado.

Pode ser feito usando telas completas ou apenas as áreas interativas de cada tela que levam a outras áreas.

Referência: http://wireframes.linowski.ca

Wireframe com narrativa guiada

Wireframe com narrativa guiada (guided wireframe narrative), são wireframes simplificados, com comentários e informações sobre funcionalidades descritas em forma de narrativas. São histórias descritas durante o wireframe, diferente dos wireframes que demonstram de uma vez só todos os comentários sobre a interface

Útil para comunicar interações complexas  e para casos em que não é possível produzir um protótipo.

Mais informações no post de Andres Zapata, "The Guided Wireframe Narrative for Rich Internet Applications". Abaixo, um exemplo de aplicação deste autor:

Guided Wireframe Narrative