Forma e Função - Um Guia para as Principais Ferramentas de Wireframe

Em 1487, Leonardo da Vinci desenhou um esquema chamado “veículo de combate”, projetado enquanto estava sob o patrocínio de Ludovico Sforza, o duque de Milão. Embora a máquina tenha sido projetada propositadamente para não funcionar corretamente, um grupo de engenheiros a recriou em 2010. O esquema de Da Vinci é um dos primeiros exemplos de um wireframe básico.

O termo wireframe é usado há décadas, muito antes de ser adotado pelo mundo do web design. Os wireframes foram originalmente usados ​​no software Computer Aided Design (CAD) para ilustrar o design de um objeto sem a necessidade de detalhes. O resultado foi um projeto que parecia feito de fios, logo, acabamos com wireframes.

Mas o que é um wireframe em design e qual é o propósito de ter um?

Um wireframe em design digital é um guia visual ou esquema de página que é despojado de estilo tipográfico, cores, gráficos e elementos interativos e representa um ponto específico no processo de design. Seu objetivo é mostrar ideias de layout no nível da página que descrevem a funcionalidade, o comportamento e a prioridade do conteúdo.

Os designers usam wireframes para conectar estruturas conceituais subjacentes com o design visual de um site ou tela de aplicativo. Existem três tipos diferentes de wireframes:

• Baixa fidelidade - um desenho em estágio inicial sem muitos detalhes. Os wireframes de baixa fidelidade geralmente são esboços desenhados à mão ou linhas e formas que representam uma ideia.
• Fidelidade média - wireframes que começam a mostrar mais detalhes dos componentes e são focados no layout do conteúdo e na estrutura geral da página.
• Alta fidelidade - desenhos de estágio posterior (pós iterativo) que retratam mais detalhes e renderizações de alto nível dos componentes, com características comportamentais e foco no layout do conteúdo.

Uma evolução dos wireframes no design digital é outro artefato de UX e entregável: o wireflow. Os wireflows são uma combinação de wireframes e fluxogramas, dois artefatos que os designers de UX lentamente fundiram em um para outra finalidade: ilustrar e seguir interações que representam fluxos de tarefas em um produto como um aplicativo da web.

Um problema que os designers encontram com os wireframes é comunicar a jornada do usuário. Embora existam formas mais complexas de mostrar as jornadas do usuário, há uma tendência de incluí-las na simplicidade de um wireframe. Uma ferramenta útil para isso é um mapa de wireframe.

Um mapa de wireframe combina wireframes com jornadas do usuário (ou fluxos de usuário) para demonstrar a jornada do usuário por meio de um produto usando wireframes.

As principais ferramentas de wireframe

Os designers têm muitas opções ao decidir qual(is) ferramenta(s) de wireframing usar. Novas ferramentas estão continuamente entrando no mercado, por isso pode ser difícil acompanhá-las. Aqui estão algumas características de ótimas ferramentas de wireframing para procurar:

• A capacidade de produzir uma variedade de fidelidades (baixa a alta)
• Software estável, fácil de usar e atualizado com frequência
• Modelos integrados, símbolos e componentes de interface do usuário padrão com recursos complementares

Algumas das ferramentas neste guia são mais focadas em wireframing, enquanto outras tentam encontrar um equilíbrio entre wireframing e prototipagem e funcionalidade de mockup. Escolher usar uma ferramenta sobre a outra (ou várias juntas) depende da preferência do designer.

Balsâmico

Balsamiq é uma ferramenta de wireframing de baixa fidelidade e simples de usar, favorecida por sua facilidade de uso e aparência icônica “desenhada à mão”. Ele vem com um conjunto de modelos pré-criados que podem ser usados ​​de forma rápida e fácil com um editor de arrastar e soltar. Os designers podem adicionar seus próprios ativos e personalizar o layout.

A prototipagem básica pode ser obtida vinculando maquetes para criar experiências de clique simples para testes de usabilidade ao exibir o projeto no modo de apresentação em tela cheia ou como um PDF exportado.

O Balsamiq é oferecido como uma versão para desktop (Windows e Mac), serviço de nuvem ou como um plug-in para Google Drive, Confluence e JIRA.

Moqups

Moqups é outra ferramenta de colaboração criativa que se concentra em wireframing, mas também pode ser usada para prototipagem. Ao contrário do Balsamiq, é puramente baseado na web e destina-se a criar wireframes para aplicativos da web e móveis.

A principal diferença entre Moqups e Balsamiq é a fidelidade dos wireframes. Enquanto o Balsamiq produz uma aparência “desenhada à mão”, o Moqups fornece estênceis e kits coloridos para aplicativos móveis e web design, incluindo iOS, Android e Bootstrap.

O Moqups se distingue do Balsamiq de algumas outras maneiras. O software permite edição de objetos finitos e gerenciamento de páginas, dando aos designers a capacidade de definir objetos “mestres”, o que pode economizar muito tempo ao fazer alterações nos wireframes durante o processo de iteração.

Por exemplo, um designer cria um objeto de botão mestre com tamanho, forma e cor específicos. Este botão é usado várias vezes em todo o wireframe. Mais tarde, no processo de iteração, se o designer precisar alterar a cor do botão, em vez de alterar cada objeto de botão, ele poderá alterá-lo uma vez e todos os objetos de botão filho serão afetados imediatamente.

Pidoco

Pidoco é uma ferramenta de wireframing de ponta focada em entregas de baixa fidelidade com alguma interatividade básica. Também baseado em nuvem, ele faz uso de componentes reutilizáveis ​​e se distingue do Balsamiq e Moqups com uma experiência de wireframe de clique mais robusta.

O Pidoco é útil para aplicativos móveis e web design porque possui visualizações móveis integradas para que os designers possam ver como as páginas de seus aplicativos ficarão em vários tamanhos de tela. Outro recurso integrado é a função de exportação e especificações . Isso ajuda os designers a passar do wireframe para o protótipo/maquete sem a necessidade de um plug-in ou extensão.

O Picoco parece de baixa fidelidade, mas inclui vários recursos que normalmente são encontrados em ferramentas de design mais complexas. Funciona bem para designers que estão fazendo UX enxuto e precisam iterar rapidamente com ciclos de feedback mais curtos.

Gliffy

Gliffy é uma ferramenta de wireframing de média fidelidade com alguns recursos exclusivos que o diferenciam de Balsamiq e Mockups. Um recurso exclusivo é a capacidade de criar fluxos de arame. O Gliffy possui recursos integrados de fluxograma e diagramação com estênceis, mapas mentais e modelagem de processos de negócios incluídos.

Como as outras ferramentas de wireframing, o Gliffy fornece uma biblioteca de formas, ícones e a capacidade de compartilhar wireframes nativamente no Confluence, Slack, Basecamp, Trello e WordPress da Atlassian.

Esta é uma ferramenta de design de wireframe UX relativamente nova, no entanto, possui uma grande base de assinantes de designers profissionais que procuram integrações e recursos simples além de um wireframe estático.

Wireframe.cc

Wireframe.cc é uma ferramenta básica de wireframing muito parecida com Balsamiq. Tem uma interface limpa, sem muitas barras de ferramentas e ícones que distraem. Ao contrário de muitas outras ferramentas, ele permite que você “esboce” wireframes com um mouse.

O Wireframe.cc fornece uma biblioteca de estênceis e manipulação limpa e descomplicada de objetos. Um elemento útil que o Wireframe.cc oferece ao trabalhar com Lean UX é um URL para cada página de wireframe para que possa ser compartilhado para feedback de forma rápida e fácil.

Não há prototipagem ou interatividade embutida, pois é focado exclusivamente em wireframing de baixa fidelidade.

Caprichoso

Chamado de “Google Docs” para wireframes, o Whimsical imita ferramentas de diagramação como OmniGraffle e Visio. Não foca em prototipagem/mockups, pois seu foco principal está em wireframing e fluxogramas, tornando-se um ótimo candidato para produzir wireflows.

Assim como o Gliffy, o Whimsical é uma ferramenta de wireframing de média fidelidade e inclui uma grande biblioteca de elementos configuráveis ​​(botões, entradas, caixas de seleção, etc.).

A colaboração ilimitada no mesmo documento wireframe ao mesmo tempo é um ótimo recurso integrado para equipes de design remotas.

Adobe XD

O Adobe XD recentemente chamou a atenção dos designers devido à sua interface simples, laços profundos com outros produtos da Adobe, facilidade de uso e funcionalidade integrada que reduz a necessidade de depender de plug-ins e extensões.

Há duas maneiras de criar wireframes no Adobe XD. Eles podem ser construídos usando linhas e formas para criar objetos e elementos, ou podem ser construídos usando kits de interface do usuário pré-fabricados de fontes como recursos behance.net e XD.

Um recurso de economia de tempo do Adobe XD é a capacidade de criar componentes “mestres” (chamados Símbolos no Sketch), que são úteis ao fazer alterações, pois todos os componentes instanciados do mestre herdarão quaisquer alterações.

Outra vantagem de usar o XD como ferramenta de wireframing é a capacidade de alternar para o modo de prototipagem com o clique de um mouse. O modo de prototipagem é integrado ao XD e funciona em segundo plano para que os designers não percam tempo ao passar de wireframes para protótipos.

Esboço

Sketch, uma ferramenta de design popular para designers de UX/UI, fornece uma plataforma para edição vetorial, prototipagem e colaboração, e possui uma biblioteca crescente de centenas de plugins que estendem sua funcionalidade.

Wireframing no Sketch é muito parecido com o Adobe XD com o uso de kits/modelos e ferramentas de desenho. O Sketch faz uso extensivo de Símbolos que são componentes reutilizáveis ​​que podem ser definidos uma vez e usados ​​várias vezes (botões, etc.). Símbolos instanciados também assumem quaisquer alterações feitas no símbolo “mestre”. Isso é vantajoso para os designers, pois geralmente há muitas mudanças que precisam ser feitas ao longo do processo de wireframing.

O Sketch permite que os designers criem wireframes, protótipos e maquetes de alta fidelidade. Não é um aplicativo baseado em nuvem e uma das possíveis desvantagens é que ele funciona apenas com o macOS.

PIN UX

UXPin é uma ferramenta de estrutura de arame superior que suporta estados interativos, lógica e componentes programáticos, dando aos designers a capacidade de codificar interações condicionais, variáveis ​​e expressões.

O UXPin vai muito além do wireframing, concentrando-se principalmente na prototipagem com bibliotecas de componentes de interface do usuário, símbolos, ferramentas de desenho vetorial e coedição.

Existe uma versão para Windows, macOS e nuvem/navegador. Para wireframes de alta fidelidade, o UXPin funciona como Sketch e Adobe XD. Não é arrastar e soltar como o Balsamiq, mas leva prototipagem e maquetes para o próximo nível para designers que desejam permanecer em um único ecossistema.

Maravilha

Marvel, outra ferramenta de design popular que facilita wireframes e prototipagem, fornece aos designers uma interface de arrastar e soltar familiar para criar wireframes de baixa a alta fidelidade.

A Marvel não requer complementos ou extensões, pois todos os ativos estão incluídos. A plataforma é totalmente baseada em nuvem, o que torna o compartilhamento de wireframes com outros membros da equipe de design ou clientes rápido e fácil.

Uma das razões pelas quais os designers escolhem a Marvel para wireframing é sua integração com outras plataformas, como Jira, Sketch, Confluence, Dropbox, Slack e muitas outras. Para colaboração com desenvolvedores, equipes de design remotas e clientes, esse recurso economiza muito tempo dos designers.

A Marvel também tem um produto chamado Pop, que ajuda a transformar esboços de wireframes de caneta e papel em protótipos interativos de iPhone e Android. Pop permite que os designers tirem uma foto de seus esboços e os transformem em wireframes interativos.

Axure RP

O Axure RP existe há muito tempo e é uma ótima ferramenta para criar wireframes estáticos (assim como protótipos altamente interativos). Não é baseado em nuvem, embora funcione no Windows e no macOS.

O wireframing pode ser feito usando sua enorme biblioteca de componentes de arrastar e soltar, no entanto, o Axure RP é uma ferramenta complexa que vai muito além do wireframing. Usando os recursos programáticos do Axure RP, os designers podem criar protótipos avançados com funcionalidades que refletem um aplicativo totalmente funcional.

Dada a alta curva de aprendizado do Axure, não faria sentido usá-lo apenas para wireframes estáticos. No entanto, se o objetivo é produzir protótipos altamente polidos e funcionais, então seria a ferramenta perfeita para designers de produtos.

Ferramentas de estrutura de arame favoritas dos designers da Toptal

Entramos em contato com alguns designers da Toptal para descobrir quais ferramentas de wireframing os designers profissionais usam e por quê. Aqui está o que eles tinham a dizer.

“Meus favoritos são Adobe XD e UXPin. Estou começando a escolher o XD como favorito porque é fácil fazer wireframes rápidos e testar ideias, e a partir daí posso realmente começar o design e até protótipo na mesma plataforma.” -Michael Craig

“Meu favorito é o Pop porque é tão rápido. Eu sempre desenho meus wireframes no papel de qualquer maneira, então funciona muito bem e eu não tenho que lidar com nada. Eu também acho que é bom para toda a coisa de 'não se apaixone pela solução' porque é tão claramente lo-fi.” - Nicola Rushton

“Eu uso o Axure praticamente o tempo todo para meu trabalho de design. É uma ferramenta altamente subestimada para um trabalho de design abrangente, com complexidade muito alta” - Andi Omtvedt

“Na verdade, não faço mais wireframes por si só - pois acho que as ferramentas são fortes o suficiente para produzir protótipos de baixa fidelidade, quase combinando o wireframe inicial com um visual melhor. Eu adotei o Framer X desde janeiro deste ano e estou adorando.” -Charlie Williams

Resumo

Dada a capacidade de produzir protótipos sofisticados, o wireframing ainda é relevante? Alguns designers profissionais argumentam que os wireframes são uma relíquia do passado, enquanto outros defendem firmemente sua importância contínua para o processo de design.

Hoje há uma abundância de ferramentas de wireframe que facilitam o processo de design. Alguns continuam focados puramente em wireframing, mesmo quando a tendência está se movendo em direção a produtos híbridos que começam com wireframing, mas também incluem a capacidade de prototipar e, em muitos casos, produzir maquetes totalmente funcionais.

Embora tenha evoluído de uma entrega de baixa fidelidade para uma de média ou alta fidelidade, o Wireframing certamente não vai desaparecer.

Leia mais no Blog Toptal Design:

• Mapeamento de wireframe: como evitar fluência do escopo
• Morte ao Wireframe. Direto para alta fidelidade!
• Confronto da Ferramenta de Design – Adobe XD vs. Sketch (2019)
• Domine seu ofício com essas principais ferramentas de UX
• Os 10 produtos de UX que os principais designers usam