Em 1487, Leonardo da Vinci desenhou um esquema denominado “ veículo de combate , ”Projetado enquanto ele 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. Da Vinci's esquemático é um dos primeiros exemplos de um wireframe básico.

O termo wireframe foi usado por décadas , muito antes de ser adotado pelo mundo do web design. Wireframes foram originalmente usados ​​em software de design auxiliado por computador (CAD) para ilustrar o design de um objeto sem a necessidade de detalhes. O resultado foi um planta que parecia feito de fios, ergo, acabamos com wireframes.

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

Um wireframe em design digital é um guia visual ou esquemático 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 idéias de layout de nível de página que retratam funcionalidade, comportamento e prioridade de conteúdo.

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 de estágio inicial sem muitos detalhes. Wireframes de baixa fidelidade costumam ser esboços feitos à mão ou linhas e formas que representam uma ideia.
• Mid-fidelity - wireframes que começam a mostrar mais detalhes do componente e se concentram no layout do conteúdo e na estrutura geral da página.
• Alta fidelidade - desenhos de estágio posterior (pós-iterativos) que representam mais detalhes e representações de nível superior dos componentes, com características comportamentais e foco no layout do conteúdo.

Uma evolução dos wireframes em design digital é outro artefato UX e entrega: o wireflow. Wireflows são uma combinação de wireframes e fluxogramas, dois artefatos que Designers de UX lentamente se fundiram em um para outro propósito: 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 wireframes é comunicar a jornada do usuário. Embora existam maneiras mais complexas de mostrar as jornadas do usuário, há uma tendência de incluí-los na simplicidade de um wireframe. Uma ferramenta útil para isso é um mapa wireframe .

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

As melhores ferramentas de wireframing

Designers tem várias opções ao decidir qual ferramenta (s) de wireframing usar. Novas ferramentas estão continuamente entrando no mercado, portanto, pode ser difícil mantê-lo atualizado. 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 IU padrão com recursos complementares

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

Balsamiq

Balsamiq é uma ferramenta de wireframe simples de usar e de baixa fidelidade, favorecida por sua facilidade de uso e aparência icônica de 'desenho à mão'. Ele vem com um conjunto de modelos pré-construídos que podem ser usados ​​rápida e facilmente com um editor de arrastar e soltar. Os designers podem adicionar seus próprios recursos e personalizar o layout.

A prototipagem básica pode ser alcançada vinculando maquetes para criar experiências de click-through simples para teste de usabilidade ao exibir o projeto no modo de apresentação em tela inteira ou como um PDF exportado.

O Balsamiq é oferecido como uma versão desktop (Windows e Mac), serviço em 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 fazer wireframes para aplicativos da web e móveis.

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

O Moqups se diferencia do Balsamiq de algumas outras maneiras. O software permite a edição de objetos finitos e gerenciamento de página, 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 mestre objeto de botão com um tamanho, forma e cor específicos. Este botão é usado várias vezes em todo o wireframe. Posteriormente, no processo de iteração, se o designer precisar alterar a cor do botão, em vez de alterar cada objeto de botão único, ele pode alterá-lo uma vez, e todos os objetos de botão filho são afetados imediatamente.

eu pergunto

eu pergunto é uma das principais ferramentas de wireframe focada em entregas de baixa fidelidade com alguma interatividade básica. Também baseado em nuvem, ele usa componentes reutilizáveis ​​e se diferencia do Balsamiq e do Moqups com uma experiência de wireframe de click-through mais robusta.

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

O Picoco parece e se sente com baixa fidelidade, mas inclui vários recursos que são normalmente encontrados em ferramentas de design mais complexas. Ele funciona bem para designers que estão realizando uma UX enxuta e precisam iterar rapidamente com ciclos de feedback mais curtos.

Glyffy

Glyffy é uma ferramenta de wireframe de fidelidade média com alguns recursos exclusivos que o diferenciam do Balsamiq e dos Mockups. Um recurso exclusivo é a capacidade de criar fluxos de fios. Gliffy tem 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 wireframes, Gliffy fornece uma biblioteca de formas, ícones e a capacidade de compartilhar wireframes nativamente para Confluência de Atlassian , Folga , Campo de base , Trello , e WordPress .

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

Wireframe.cc

Wireframe.cc é uma ferramenta básica de wireframe, muito parecida com o Balsamiq. Possui uma interface limpa, sem muitas barras de ferramentas e ícones que distraem. Ao contrário de muitas outras ferramentas, ele permite que você “esboça” wireframes com o mouse.

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 o lean UX é uma URL para cada página do wireframe para que possa ser compartilhada para feedback de forma rápida e fácil.

Não há prototipagem ou interatividade embutida, uma vez que é focado puramente em wireframes de baixa fidelidade.

Caprichoso

Chamado de “Google Docs” para wireframes, Caprichoso imita ferramentas de diagramação, como OmniGraffle e Visio . Ele não se concentra em prototipagem / maquetes, pois seu foco principal é em wireframes e fluxogramas, tornando-o um ótimo candidato para a produção de wireflows.

Como o Gliffy, o Whimsical é uma ferramenta de wireframe 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

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

Existem duas maneiras de construir 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 behance.net e Recursos XD .

Um recurso de economia de tempo do Adobe XD é a capacidade de criar componentes 'principais' (chamados de 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 um clique do mouse. O modo de prototipagem é integrado ao XD e funciona em segundo plano, portanto designers não perca tempo ao passar de wireframes para protótipos.

Esboço

Esboço , uma ferramenta de design popular para designers de UX / UI, fornece uma plataforma para edição vetorial, prototipagem e colaboração, e tem uma biblioteca crescente de centenas de plug-ins que estendem sua funcionalidade.

Wireframing em Sketch é muito parecido com Adobe XD com o uso de kits / templates e ferramentas de desenho. 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.). Os símbolos instanciados também assumem quaisquer alterações feitas no símbolo “mestre”. Isso é vantajoso para designers, pois muitas vezes há muitas mudanças que precisam ser feitas durante o 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 desvantagens em potencial é que ele só funciona com o macOS.

UXPin

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

UXPin vai muito além de wireframes, focando principalmente na prototipagem com bibliotecas de componentes de IU, símbolos, ferramentas de desenho vetorial e coedição.

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

Maravilha

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

A Marvel não requer nenhum complemento ou extensão, 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 em papel e caneta em protótipos interativos de iPhone e Android. Pop permite designers para tirar uma foto de seus esboços e transformá-los em wireframes interativos.

Axure RP

Axure RP já 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.

Wireframing pode ser feito usando sua enorme biblioteca de componentes de arrastar e soltar, no entanto, Axure RP é uma ferramenta complexa que vai muito além de wireframing. Usando os recursos programáticos do Axure RP, os designers podem criar protótipos avançados com funcionalidade que espelha 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 que são altamente polidos e funcionais, então seria a ferramenta perfeita para designers de produto .

Ferramentas de Wireframe favoritas dos designers do ApeeScape

Entramos em contato com alguns ApeeScape Designers para descobrir quais ferramentas de wireframes 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 ideias de teste, e a partir daí posso realmente iniciar o design e até mesmo o protótipo na mesma plataforma. ” - Michael Craig

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

“Eu uso 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, eu não faço mais wireframe per se - 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. Adotei o Framer X desde janeiro deste ano e estou adorando. ” - Charlie Williams

Resumo

Dada a capacidade de produzir protótipos sofisticados, o wireframe ainda é relevante? Alguns designers profissionais argumentarão que os wireframes são uma relíquia do passado, enquanto outros defendem firmemente sua importância contínua no 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 enquanto a tendência está mudando para produtos híbridos que começam com wireframing, mas também incluem a capacidade de prototipar e, em muitos casos, produzir mockups totalmente funcionais.

Embora tenha evoluído de um produto de baixa fidelidade para um de média ou alta fidelidade, o wireframing certamente não irá desaparecer.

• • •

Leituras adicionais no Blog de design do ApeeScape:

• Mapeamento de wireframe: como evitar o aumento de escopo
• Morte para o Wireframe. Direto para alta fidelidade!
• Design Tool Showdown - Adobe XD vs. Sketch (2019)
• Domine sua arte com essas ferramentas UX de ponta
• Os 10 produtos UX que os principais designers usam

Compreender o básico

O que é um wireframe UX?

Um wireframe UX é uma representação de uma página da web, produto ou aplicativo que mostra quais elementos existirão. Wireframes são normalmente uma ilustração bidimensional que enfoca o conteúdo, comportamentos e funcionalidades. Eles normalmente não incluem estilo, cor ou gráficos.

O que é software de design de wireframe?

Ferramentas de design de wireframe são o que os designers usam para criar wireframes, protótipos e maquetes. Normalmente, o software incluirá bibliotecas de elementos pré-construídos, também chamados de modelos, kits de wireframe ou add-ons que podem construir layouts de wireframe usando arrastar e soltar.

O que torna um bom wireframe?

Um bom wireframe terá forma e função em um layout bidimensional. Ele priorizará o conteúdo e os comportamentos pretendidos dos elementos da página, produto ou aplicativo. Bons wireframes, como projetos, ensinam como construir algo sem detalhes desnecessários.

O que um wireframe deve incluir?

Um wireframe deve representar a alocação de espaço entre os componentes de uma página, uma representação do conteúdo, das funcionalidades disponíveis e dos comportamentos pretendidos. Não precisa de cores, imagens ou tipografia especial.

Por que você precisa de um wireframe?

Os wireframes são necessários porque ajudam a conectar a arquitetura de informações de um site ao seu design visual, determinar a funcionalidade pretendida da interface e dar aos designers uma melhor compreensão para exibir vários componentes na interface do usuário.