Como criar wireframes de alta fidelidade: um guia completo

A criação de produtos através de "wireframes" para recolher feedback antes de investir numa construção completa é uma prática muito mais antiga do que a maioria de nós imagina. Mesmo na época medieval, os engenheiros (se é que eram chamados assim naquela altura) criavam versões protótipo de ferramentas e objetos e apresentavam-nas aos seus senhores antes de iniciarem a produção em massa.

O mundo moderno do software adotou naturalmente este processo. No entanto, ao contrário da construção de uma versão protótipo de um produto, as modernas ferramentas de criação de wireframes e protótipos permitem-nos testar o protótipo numa fase ainda mais inicial — enquanto este ainda está a ser concebido.

O foco de hoje é a parte mais importante da criação de protótipos de software — o wireframe de alta fidelidade que permite a interatividade e dá vida a um conceito.

Compreender os wireframes de alta fidelidade

Antes de explicar o que são wireframes de alta fidelidade, gostaria de abordar primeiro o próprio conceito de fidelidade de um wireframe.

A fidelidade refere-se ao nível de detalhe que inclui quando está a criar o wireframe do seu produto. Pode tratar-se de detalhes visuais, como as cores dos componentes da interface do utilizador que representam a sua marca, ou imagens que deveriam estar presentes nesse ecrã (por exemplo, fotografias de produtos nos resultados de pesquisa de um site de comércio eletrónico).

Para além dos aspetos visuais, existe também a fidelidade do conteúdo. Isto acontece quando utiliza texto/conteúdo de substituição (por exemplo, lorem ipsum) ou conteúdo real (nomes e descrições de produtos).

Dependendo da fidelidade do seu wireframe, utilizará elementos visuais em tons de cinzento, com um aspeto genérico e conteúdo de substituição (baixa fidelidade), ou um esquema de cores associado à marca, com elementos do seu sistema de design e conteúdo real (alta fidelidade).

Eis o aspeto de ambos, lado a lado.

Embora possa pensar que os wireframes de alta fidelidade são a escolha óbvia ao comparar os dois, isso nem sempre acontece. A vantagem dos modelos de baixa fidelidade reside na rapidez com que pode concebê-los, testá-los com utilizadores e iterar sobre eles.

Assim, nas fases muito iniciais do seu design, normalmente faria algumas iterações com um wireframe de baixa fidelidade antes de avançar para a criação de um de alta fidelidade.

Vantagens dos wireframes de alta fidelidade

Embora exijam mais tempo para serem criados, os wireframes de alta fidelidade são uma parte muito valiosa do seu projeto de design, uma vez que oferecem uma vasta gama de vantagens. Eis algumas:

• Melhor comunicação: Os seres humanos são criaturas visuais e compreendem melhor o design quando utiliza as cores, os elementos e o conteúdo adequados. Assim, é muito provável que a mesma pessoa aprove o seu wireframe de baixa fidelidade, mas encontre problemas e lhe forneça feedback quando vir o de alta fidelidade pela primeira vez.
• Testes de usabilidade mais eficazes: Melhorará a qualidade do feedback que recebe dos seus utilizadores quando lhes mostrar o conteúdo real tal como aparecerá no design final. Uma página de resultados de pesquisa parece uma lista de caixas cinzentas no wireframe de baixa fidelidade. Não é possível dizer se os elementos dessa página são fáceis de analisar até ver imagens reais e texto escrito na mesma.
• Criação de protótipos: Os protótipos clicáveis são péssimos quando construídos sobre wireframes de baixa fidelidade. Já os protótipos de alta fidelidade são muito semelhantes ao design final e suficientemente bons para serem partilhados com os seus utilizadores numa fase inicial.
• Comunicação entre as equipas de engenharia e design: Também pode partilhar os seus wireframes de alta fidelidade com a sua equipa de desenvolvimento para obter feedback antecipado, incluindo sobre desafios e preocupações relacionados com a implementação. Estes contêm o nível de detalhe necessário para permitir que os programadores compreendam como irão construí-lo e que tipo de problemas poderão enfrentar.

Por fim, os wireframes de alta fidelidade podem mostrar-lhe, a si e aos seus colegas de design, o aspeto e a experiência finais do seu produto, permitindo-lhe identificar inconsistências de design ou outros problemas visuais que precisa de corrigir antes de voltar a testar a sua interface de utilizador.

Ferramentas e software para criar wireframes de alta fidelidade

Embora tecnicamente possa criar wireframes de baixa fidelidade numa folha de papel ou num quadro branco, não tem outra opção senão escolher uma ferramenta especializada de design de produto para criar um de alta fidelidade.

Por isso, vamos analisar alguns candidatos populares para que possa escolher entre eles e compreender as suas capacidades.

Figma

O Figma é líder de mercado no design de produtos digitais, com mais de 40% de todos os designers de experiência do utilizador a escolhê-lo para criar protótipos, fluxos de utilizador e wireframes.

Plataforma: Web, computador (MacOS, Windows)

Onde se destaca: colaboração em tempo real entre designers, gestores e programadores, bem como suporte para múltiplas plataformas.

Em termos de funcionalidades, eis o que gostaria de destacar no Figma:

Colaboração: O Figma permite que vários membros da equipa trabalhem simultaneamente no mesmo ficheiro. Pode ver os cursores de todas as pessoas que estão a consultar ou a editar o ficheiro de design, deixar comentários e conversar em tempo real através de uma pequena caixa de mensagens que se abre junto ao cursor.

Suporte para sistemas de design e componentes: Pode criar componentes reutilizáveis no Figma (incluindo vários estados para os mesmos), bem como definir um sistema de design completo utilizando as suas diretrizes e componentes.

Prototipagem: Pode converter os seus designs em protótipos clicáveis que os utilizadores podem explorar para compreender como seria utilizar o seu produto. Embora não seja o sistema de prototipagem mais avançado disponível, continua a ser bastante competente.

Sketch

O Sketch era a ferramenta de design preferida antes do aparecimento do Figma e é uma alternativa ao Framer popular, bem como a outras ferramentas de design conhecidas. Alguns especulam que a sua exclusividade para Mac esteve entre as razões pelas quais esta ferramenta, de resto excelente, perdeu a liderança.

Plataformas: macOS

Onde se destaca: O Sketch é altamente personalizável graças ao seu amplo suporte para plug-ins, o que faz dele uma excelente escolha para necessidades de design específicas.

Vejamos agora as funcionalidades mais relevantes do Sketch.

Edição de vetores: Em comparação com as restantes, o Sketch tem, discutivelmente, a ferramenta de edição de vetores mais robusta do mercado, incluindo suporte para operadores booleanos e de correspondência para definir as suas formas.

Pré-visualização na Web: Embora não seja um editor completo, o Sketch dispõe de uma aplicação Web para rever designs, entregar recursos aos programadores e testar protótipos.

Prototipagem: As capacidades de prototipagem do Sketch estão ao nível das do Figma. Aqui, também pode ligar as suas pranchetas através de um fluxo, tornar os elementos clicáveis e muito mais.

Adobe XD

Este é o contributo da gigante do software criativo Adobe para a forte concorrência no mercado de wireframes e design UI/UX.

Plataformas: macOS, Windows

Onde se destaca: O Adobe XD está totalmente integrado na sua Creative Cloud, permitindo importar facilmente designs e recursos de outras ferramentas da Adobe, entre outros.

Depois de experimentar as capacidades desta ferramenta, eis o que também vale a pena mencionar:

Prototipagem: O Adobe XD destaca-se pela capacidade de criar protótipos de microinterações, para além do conjunto de ferramentas de prototipagem padrão.

Animações: Sendo uma empresa que criou o After Effects, não é surpreendente que o Adobe XD tenha capacidades mais avançadas para animar elementos da interface de utilizador.

Colaboração: Embora não seja tão avançado como o Figma, o Adobe XD permite que várias pessoas editem o design em simultâneo.

Axure RP

Enquanto as restantes eram ferramentas gerais de design UI/UX que também permitiam criar wireframes e protótipos, esta é especificamente orientada para estes últimos.

Plataformas: macOS, Windows

Onde se destaca: Por ser uma ferramenta especializada, o Axure RP pode levar a prototipagem mais longe, com interações complexas e percursos do utilizador.

Vejamos agora as funcionalidades incluídas nesta ferramenta:

Lógica avançada: Em vez de simplesmente «clicar para abrir a prancheta seguinte», o Axure RP pode adicionar lógica complexa aos protótipos. Isto significa que pode abrir menus e selecionar itens, e o design e o conteúdo serão transformados dinamicamente com base na sua seleção ou noutras ações semelhantes.

Documentação de transição: Embora praticamente todos os produtos aqui mencionados disponham de funcionalidades de transição para os programadores, o Axure RP é a única opção que permite criar documentação altamente detalhada, que descreve o seu design e a respetiva lógica.

Diagramas de fluxo: Para além de criar o wireframe de alta fidelidade, também pode utilizar o Axure RP para criar diagramas de fluxo que descrevem o percurso do utilizador e a lógica empresarial subjacente ao seu design.

Em suma, não existe um vencedor claro na categoria de «melhor ferramenta para criar wireframes de alta fidelidade». As ferramentas aqui apresentadas, bem como as incluídas na nossa seleção de ferramentas de design UX, têm pontos fortes e fracos. Por isso, trata-se realmente de uma questão de preferência, dependendo dos aspetos mais importantes para si e para a sua equipa.

Boas práticas para criar wireframes de alta fidelidade

Quando finalmente chegar ao ponto do seu processo de design em que é altura de desenvolver este tipo de wireframe, certifique-se de que segue estas sugestões para tirar o máximo partido do seu modelo de alta fidelidade.

Boas práticas do processo de criação de wireframes

• Certifique-se de que a sua persona de utilizador está atualizada. Já terá uma versão de uma persona que utilizou para criar o seu primeiro design de baixa fidelidade. No entanto, é muito provável que esta persona esteja desatualizada, uma vez que já realizou algumas iterações de testes com ela e descobriu muitos aspetos novos da sua personalidade e das suas necessidades.
• Analise todos os comentários anteriores dos utilizadores antes de começar o wireframe de alta fidelidade. É provável que tenha recebido comentários de utilizadores que analisaram a versão de baixa fidelidade e que considerou irrelevantes na altura, mas que agora se tornarão altamente relevantes.
• Não existe uma «versão final» de um wireframe. Não pense demasiado nos pequenos detalhes. Em vez de trabalhar durante semanas no wireframe detalhado, faça algumas alterações e experimente-o. Quanto mais curto for o ciclo entre a sua equipa adicionar ideias de design e os utilizadores testá-las, mais rapidamente chegará ao ponto em que o seu wireframe estará pronto para se tornar num design final.
• Aproveite os componentes e modelos do seu sistema de design. Não há nenhum prémio por começar do zero! A utilização destes modelos poupa muito tempo e o resultado será o mais próximo possível do design final.

Sugestões para o design de wireframes

Além dos conselhos acima sobre como executar eficazmente o processo de design, seguem-se algumas sugestões relacionadas com o próprio design.

• Mantenha a consistência do seu design. Embora continue a ser um wireframe e não o design final, recomendo que mantenha tudo consistente, incluindo as cores, a tipografia e os espaços em branco. Desta forma, garantirá que as pessoas que testam o seu design não enfrentam problemas de usabilidade desnecessários nem lhe fornecem aprendizagens enviesadas.
• Mantenha a hierarquia visual. Em termos técnicos, esta já deveria estar presente na versão de baixa fidelidade. Mas, se não estiver, adicione-a aqui. Poderá então utilizar os seus wireframes de alta fidelidade para testar a eficácia da sua hierarquia visual.
• Adicione elementos de acessibilidade ao seu design. Os wireframes de alta fidelidade também são uma excelente ferramenta para testar a acessibilidade do seu design. Por isso, certifique-se de que define as taxas de contraste adequadas para os diferentes elementos que se sobrepõem e tenha também em consideração outros aspetos da acessibilidade.

Por fim, não se esqueça de fornecer ajudas visuais aos utilizadores que estão a testar o design. Isto é especialmente relevante quando está a testar apenas uma parte do design do seu produto e existem ecrãs ou passos em falta. Para evitar confundir os utilizadores, certifique-se de que apresenta notas que explicam em que ponto do percurso se encontram naquele momento e o que devem fazer.

Técnicas avançadas para criar wireframes de alta fidelidade

As boas práticas descritas acima permitir-lhe-ão obter uma versão «suficientemente boa» do seu wireframe de alta fidelidade. Mas, se quiser criar algo extraordinário, considere utilizar estas técnicas avançadas.

Wireframes interativos

Algumas ferramentas populares de wireframing incluem funcionalidades de prototipagem. Por isso, porque não tirar partido disso e dar vida ao seu wireframe? Pode tornar os elementos da sua interface de utilizador clicáveis e permitir que os utilizadores passem de um ecrã para outro — simulando o percurso que terão na aplicação real. Sugiro que adicione transições animadas que tornem a mudança na página ou no ecrã mais evidente para os seus utilizadores.

Também pode adicionar animações e transições a diferentes elementos da sua aplicação móvel ou do seu design web e verificar se isso ajuda os utilizadores a reparar num determinado elemento do ecrã ou a interagir com ele da forma que pretendia.

Elementos do design visual

Para ajudar o seu wireframe de alta fidelidade a representar corretamente o seu produto e a sua marca, pode também considerar incorporar os seguintes elementos:

• Tipografia: Os tipos de letra, o espaçamento e as cores do texto presentes nas suas diretrizes de design.
• Identidade da marca: O seu logótipo, as cores da marca e os elementos visuais que representam a sua marca.
• Conteúdo real: Em vez de escrever lorem ipsum onde deveria estar a descrição de um produto no design da sua aplicação de comércio eletrónico, escreva uma descrição real do produto.
• Elementos visuais reais: Se existirem ilustrações ou imagens que planeava incluir nos seus ecrãs, adicione-as também.
• Gradientes e sombras: Estes elementos tornarão o seu wireframe mais realista e ajudarão a adicionar uma camada de hierarquia visual ou de interações.

Nota: No que diz respeito a destacar interações com sombras, o Material Design da Google é o melhor exemplo. Utiliza sombras para mostrar a elevação e indicar ao utilizador se um elemento está sob o cursor, foi clicado ou está inativo.

Sugestões para a colaboração em equipa

Tanto a prototipagem como o wireframing nunca são tarefas para uma só pessoa. Ou está a desenvolvê-los com a sua equipa de design, a fazer uma sessão de brainstorming com o seu gestor de produto ou a discuti-los com as partes interessadas.

Por isso, sugiro que faça o seguinte para facilitar o processo de colaboração e desenvolvimento dos seus designs:

• Organize sessões regulares de brainstorming. Convide o seu gestor de produto e os restantes designers. Talvez também um engenheiro, pois poderá ajudá-lo a escolher o design tecnicamente mais sólido. A palavra-chave aqui é regular: pode ser uma vez por semana, de duas em duas semanas ou com menos frequência. Mas é importante realizar sempre estas reuniões, pois ajudam-no a encontrar soluções interessantes para os seus problemas de design.
• Realize revisões regulares do design. Se trabalha numa equipa, envie o seu design para uma revisão cruzada e permita que vários pares de olhos o analisem para detetar problemas que possa ter deixado passar. Este processo aumenta significativamente a qualidade do seu design e ajuda a torná-lo consistente.
• Documente as suas ideias e comentários. Adicione anotações e comentários ao design que expliquem determinadas decisões de design suas ou forneçam contexto aos seus colegas.

Por fim, certifique-se de que tudo o que cria está alinhado com a estratégia e a visão do produto da empresa. Por isso, consulte a sua equipa de produto e a liderança sobre este assunto.

Teste o seu design como se fosse o produto final.

Provavelmente, o benefício mais importante da utilização de wireframes de alta fidelidade é a sua capacidade de apresentar o produto o mais próximo possível da versão final. Desta forma, os seus utilizadores podem testar a representação visual do seu produto sem que tenha de desenvolver o produto real.

Por isso, recomendo vivamente que adote o processo de wireframing e o utilize para testar o seu design e as suas hipóteses no seu fluxo de trabalho de design. Espero ter fornecido contexto suficiente e sugestões úteis para que possa tirar o máximo partido dele.

Se quiser aprofundar este tema, sugiro que leia o guia completo de wireframing. Além disso, também pode subscrever a nossa newsletter para receber mais recursos e guias sobre gestão de produtos.