Wireframes: o que são, como são feitos, para o que servem

Wireframes são a ponta do iceberg de um projeto digital que inclua um ambiente no qual os usuários terão experiências. 

Os wireframes são a ferramenta para comunicar a estratégia na interface. Portanto, antes de desenhar um wireframe, o ideal é que muita coisa já tenha acontecido. No mínimo, a definição dessa estratégia… Um projeto ideal pode incluir uma imersão com o cliente/donos do produto, uma boa etapa de especificação e conversas sobre demandas e expectativas, e pelo menos alguma metodologia de pesquisa com os usuários.

Wireframes comunicam como será a navegação do ambiente digital, as interações, e a estrutura de conteúdos e elementos. Portanto, ao chegar na etapa de desenho de wireframes, é necessário que a equipe já tenha pelo menos as primeiras ideias de como isso tudo vai ser.

Mas a coisa boa de desenhar wireframes é que eles são muito fáceis e rápidos de serem testados, aprimorados, alterados. Por causa dos wireframes, ninguém precisa chegar no produto final para descobrir que a navegação não funciona. Segundo Morville e Rosenlfeld, no famoso livro do urso polar (Information Architecture for the World Wide Web), o processo de desenho de wireframes tangibiliza a interface que até então não existia e faz o arquiteto enxergar eventuais problemas e corrigi-los. São ferramentas ideais para a decisão de quais componentes da arquitetura devem ser visíveis aos usuários, e como agrupar e hierarquizar informação na tela.

“Wireframes estão na intersecção entre a arquitetura de informação e design visual e de informação do site”, explicam os autores. Talvez isso explique a surpresa da arquiteta iniciante (eu) quando compreendeu que iria ter que desenhar: era jornalista e nunca havia pensado em desenhar telas. Eu não tinha a menor afinidade com design. E costumava aterrorizar os diretores de arte dizendo ia comunicar a próxima navegação sem nenhum documento visual, só no Word (é possível: veja um exemplo na página 266 do livroCommunicating Design, do Dan Brown).

Hoje em dia, dependendo do lugar em que você trabalha, já há na equipe um cargo mil vezes mais especializado no desenho de wireframes do que a arquiteta iniciante e surpresa que eu fui: os designers de interação. Mas isso também é um ponto que suscita debates acalorados há muito tempo (quem somos, o que fazemos, qual o nome disso, blablablá).

Segundo Dan Brown, no livro Communicating Design, “wireframes estão entre os documentos mais controversos na biblioteca de UX porque eles ultrapassam a linha entre estrutura (como um tipo de informação se relaciona com outro tipo de informação) e display (como representar informação na tela)”.

Morville e Rosenlfeld lembram que, justamente por isso, wireframes são uma oportunidade perfeita para colaboração com os designer visuais (e o resto da equipe). “Utilize-os como um gatilho para gerar uma saudável dose de colaboração interdisciplinar. Ainda que a colaboração possa pesar no cronograma do projeto, o produto final será melhor por causa dessa etapa (e pode, inclusive, economizar tempo durante a etapa de desenvolvimento)”.

Até onde vai um wireframe

Antes disso permita-me lembrar onde o wireframe não se propõe a ir: wireframes são apenas uma parte da comunicação de UX. E, como a UX é maior do que aquilo que o usuário experimenta em uma interface, nem sempre a ferramenta wireframe será utilizada. Lembre-se: experiência do usuário começa muito antes e acaba muito depois do momento em que o usuário acessa a interface.
E afinal, onde eles param?

Antes da camada de informação visual: cores, imagens, tipos de fontes. São, segundo Dan Brown, “ilustrações básicas que mostram o conteúdo de cada tela. São chamados de wireframes porque são tipicamente desenhados com linhas simples, e não designs elaborados”. “They are quite ugly”, segundo Morville e Rosenlfeld (justamente porque são desenhados por arquitetos de informação e não por designers).

http://www.saiba-mais.com/2016/02/01/wireframes-o-que-sao-como-sao-feitos-para-o-que-servem/