Em um infográfico recente do ApeeScape: “ As melhores ferramentas de UX , ”Examinamos a ampla gama de ferramentas de design digital no mercado, a maioria das quais são capazes de auxiliar nas tarefas do dia a dia do indivíduo Designer UX .

Três das ferramentas apresentadas, Sketch, Figma e Axure, geraram seguidores leais porque se destacam em trabalhos específicos dentro do fluxo de trabalho de design de UX.

No entanto, o desempenho dessas ferramentas varia dependendo da tarefa de design em mãos . Em vez de listar todos os seus recursos em uma tabela de comparação, determinaremos sua eficácia com uma revisão baseada em tarefas.

Esta é uma visão geral rápida dos concorrentes:

• Esboço pela Bohemian Coding com sede em Hague, NL. Sketch é um aplicativo exclusivo para Mac.
• Figma pela Figma com sede em San Francisco, Califórnia. Figma é executado em qualquer sistema operacional por meio de um navegador.
• Axure pela Axure Software Solutions, com sede em San Diego, Califórnia. Axure tem uma versão para Windows e Mac.

Iremos pontuar cada ferramenta com base em quão bem ela executa as tarefas diárias de design fora da caixa— sem plug-ins, complementos ou aplicativos de terceiros. As tarefas incluem:

1. Fazendo Ideação de Conceito
2. Criação de produtos de baixa fidelidade
3. Criação de produtos de alta fidelidade
4. Criação de protótipos interativos
5. Criando um Sistema de Design
6. Entregando para o desenvolvimento

Nota: Quando as ferramentas têm recursos quase idênticos aos necessários para concluir uma tarefa, a vitória vai para a ferramenta que é mais fácil de usar e fornece entrega mais rápida. Se essa determinação parecer muito próxima, o suporte de terceiros é o desempate.

Tarefa: Fazendo Ideação de Conceito

A ideação é um processo criativo para gerar novas ideias e geralmente é feito por grupos interdisciplinares compostos por designers, desenvolvedores, proprietários de produtos e gerentes de projeto.

O objetivo é criar novas ideias para usar em um produto após considerar os requisitos básicos e qualquer trabalho que já esteja em construção. Por exemplo, uma equipe pode passar por uma sessão de concepção de conceito para criar um conjunto de MVP recursos para um novo aplicativo - ou recursos de última geração em um aplicativo existente.

Muitos designers fazem a idealização do conceito em um quadro branco ou papel. No entanto, a ideação também é feita digitalmente, especialmente em escritórios distribuídos . A geração de conceito é um esporte de equipe e inclui não designers, como proprietários / gerentes de produtos e desenvolvedores front-end. As ferramentas que promovem a colaboração e são fáceis de usar são as melhores para essa tarefa.

Vencedor: Figma

Sketch e Axure oferecem serviços de compartilhamento de nuvem, mas não há como compartilhar telas em tempo real com colaboradores.

Arquivos compartilhados em Figma podem ser unidos em tempo real, e o cursor rotulado de cada participante é exibido. Um clique em avatares representativos na barra de ferramentas muda a visão para a perspectiva daquela pessoa, tornando mais fácil compartilhar uma ideia rapidamente. Além disso, Figma não exige que não designers possuam uma cópia; eles abrem o link do arquivo e começam a trabalhar.

Outras ferramentas de colaboração de quadro branco podem ser mais adequadas para a idealização de conceitos do que o Figma, como Mural e Realtimeboard , mas para uma ferramenta de design, Figma é melhor do que Sketch e Axure por uma milha.

Tarefa: Criação de produtos de baixa fidelidade

As entregas de baixa fidelidade são geralmente produzidas como wireframes ou esboços digitais que podem ser distribuídos e revisados ​​por outros designers e proprietários de produtos. Dependendo do processo de UX, eles também podem ser visualizados por desenvolvedores e outras partes interessadas.

Os wireframes têm o objetivo de mostrar a estrutura básica de um aplicativo para que o modelo de interação possa ser definido antes de gastar tempo criando modelos de alta fidelidade.

A criação de wireframes de baixa fidelidade pode ser feita por ferramentas que são especificamente dedicadas à tarefa, incluindo Balsamiq Mockups , Moqups e FluidUI . No entanto, Sketch, Axure e Figma podem fazer a mesma tarefa, especialmente quando os usuários criam bibliotecas de componentes de wireframe.

Como os wireframes geralmente servem como o layout de IU inicial para um aplicativo ou página, eles são cortes brutos monocromáticos que mudam com frequência. Isso ajuda a manter as expectativas das partes interessadas sob controle.

Para wireframes, facilidade de uso, velocidade de entrega e modificação são essenciais porque permitem que os designers produzam designs variantes com eficiência.

Vencedor: Axure

Axure ganha aqui porque tem componentes pré-empacotados para wireframing imediatamente após a instalação do software. Sketch e Figma têm o Ferramentas que permitem criar wireframes, mas você precisa desenhar um componente wireframe ou baixar um arquivo que os contenha. Em qualquer caso, eles devem ser integrados a um símbolo (Esboço) ou componente (Figma) biblioteca a ser arrastada e solta como componentes do Axure.

Axure tem muitos terceiros bibliotecas para a criação de resultados de baixa fidelidade, e o Sketch tem uma infinidade de produtos gratuitos e pagos arquivos que pode ser baixado, enquanto o Figma’s recursos públicos ainda são novatos.

Uma vez por designer criou bibliotecas de componentes de wireframe, as três ferramentas são igualmente combinadas. Observe que os componentes do Axure possuem propriedades paramétricas e ajustáveis, mas para wireframes estáticos, todas as três ferramentas funcionam bem quando as bibliotecas estão disponíveis.

Tarefa: Criação de produtos de alta fidelidade

Produtos de alta fidelidade nascem do feedback e do aprendizado obtido a partir de wireframes de baixa fidelidade. São maquetes que mostram cores, detalhes visuais e designs finais propostos para um aplicativo.

Alta fidelidade também significa maquetes de tela prontas para apresentação e mostradas a clientes, executivos internos e outras partes interessadas que não são designers. As ferramentas de design que se destacam nessa tarefa têm todos os recursos necessários para adicionar o polimento necessário para criar uma representação dos resultados finais voltados para o cliente.

Isso inclui controle sobre preenchimentos e traçados de objetos, adicionando efeitos como sombras e preenchimentos gradientes e exportando arte em um formato facilmente digerido (png, pdf, jpg).

Vencedor: Figma

Esboço e Figma têm conjuntos de ferramentas quase idênticos que podem criar maquetes de alta fidelidade, mas Figma’s o modelo de interação é mais refinado e a ferramenta é mais fácil de usar desde o início. Ambas as ferramentas têm fácil acesso à edição avançada e comandos booleanos, como Join, Intersect, Union e Subtract. Embora o suporte ao plug-in do Sketch permita que terceiros criem recursos adicionais, essas ferramentas não estão disponíveis imediatamente após a instalação.

Todas as três ferramentas possuem recursos que permitem a criação de objetos personalizados, mas o Axure torna um pouco difícil acessar os comandos. As edições mencionadas acima não estão disponíveis na barra de ferramentas. O acesso só é obtido por meio do menu de contexto quando vários objetos são selecionados.

Além disso, Figma’s redes de vetores facilite o trabalho com as ferramentas de linha.

Tarefa: Criando Protótipos Interativos

Os protótipos interativos podem ser tão rudimentares quanto um protótipo em papel ou tão detalhados quanto uma versão ramificada de um aplicativo existente que foi alterado para explorar novos recursos. Normalmente, os protótipos interativos permitem que os usuários naveguem de uma tela a outra e utilizem funcionalidades como menus e listas.

Para muitos designers, uma apresentação de slides interativa básica será suficiente ao apresentar seus trabalhos. Isso é especialmente verdadeiro para aplicativos móveis, pois as transições simples fornecem interação de dispositivo suficiente para explicar o design.

O modelo de prototipagem da Figma é bem integrado e simples de usar e, por ser um aplicativo baseado em nuvem em tempo real, não há necessidade de atualizar as páginas HTML quando um arquivo é atualizado.

Ocasionalmente, as partes interessadas desejam conexões de dados ao vivo para carregar um protótipo com dados do mundo real para testar a escalabilidade de um design, mas a grande maioria dos designers agora tem pouca necessidade de protótipos complexos.

Vencedor: Figma

Sketch e Figma suportam prototipagem simples com link de “objeto a prancheta” e um conjunto limitado de transições. Plugins ajudam a reforçar os recursos de prototipagem simples do Sketch, mas o Axure é o mais poderoso quando se trata de fornecer um modelo de interação robusto para protótipos.

Tarefa: Criando um Sistema de Design

Sistemas de design, embora sejam relativamente novos no domínio do design UX, existem há décadas . Eles incluem uma linguagem de design compartilhada, componentes, recursos e diretrizes que capacitam as equipes a colaborar e tomar melhores decisões. Uma biblioteca de sistema de design geralmente é implementada como um site da Web e atua como a única fonte da verdade para um produto em toda a empresa.

Vencedor: Figma

Enquanto bibliotecas de componentes pode ser construído em qualquer um dos programas, nenhum deles permite que os designers acionem um botão e produzam uma biblioteca de componentes viável desde o início. Axure pode gerar uma página HTML com componentes personalizados, mas não há como consultar o único componente para descobrir o valor da cor, o tamanho e outras propriedades.

Construir um sistema de design usando qualquer uma dessas ferramentas ainda é um processo manual. No entanto, existem plug-ins para Sketch (como o recentemente lançado pelo Google Plugin de design de material ) e pelo menos uma ferramenta de terceiros em obras para Figma.

Figma ganha porque a colaboração é o cerne de um bom sistema de design. Os funcionários da empresa de várias disciplinas (design, desenvolvimento, qualidade, conteúdo) precisam acessar uma biblioteca do sistema de design e muitos irão adicionar ao arquivo de componente de design que sincroniza com a biblioteca compartilhada. O Figma pode ser usado por qualquer pessoa, não apenas pelo detentor da licença, tornando fácil acessar e adicionar a um arquivo compartilhado.

Tarefa: Entregar para o desenvolvimento

Quando os designers de IU terminam de criar uma interface, é sua responsabilidade entregar os arquivos de design aos desenvolvedores para que o projeto seja concluído. Mas um não interferir é mais do que uma simples troca de dados, é uma oportunidade para os designers comunicarem a razão de seu trabalho e, assim, ajudar os desenvolvedores a unir a forma com a função.

Existem dezenas de métodos de transferência e ainda mais ferramentas de terceiros para facilitar as consultas de informações de objetos e linhas vermelhas dos arquivos Sketch e Figma (consulte Avocode e Zeplin ) No entanto, nesta comparação, estamos olhando para a ferramenta de design original antes de ser complementada com plug-ins ou outros aplicativos.

Curiosamente, o surgimento dos sistemas de design UX mitiga a necessidade dessa forma de transferência, já que as bibliotecas de componentes publicadas são a única fonte de verdade para o desenvolvedor. Eles podem extrair o layout exato dos componentes e informações de design sem esperar por uma entrega ou consulta UX.

Além disso, obter informações de objetos em um arquivo de design pode ser útil durante a construção de um sistema de design, portanto, alguma visão do CSS é uma coisa boa.

Sketch permite selecionar objetos e usar um menu contextual para “Copiar atributos CSS”, mas não é o ideal. Figma faz um trabalho justo ao fornecer uma guia “Código” no painel de propriedades que produz valores CSS, iOS ou Android para objetos selecionados (os desenvolvedores podem usar esse recurso no modo somente visualização ou protótipo).

Vencedor: Axure

No momento, apenas o Axure tem “geradores” poderosos que produzem arquivos HTML totalmente publicáveis, especificações do Word e até mesmo relatórios em formato CSV para importar para uma planilha. Embora os resultados não sejam uma biblioteca de design, o aplicativo fornece materiais úteis de transferência para o desenvolvedor.

O vencedor geral da ferramenta de design: Figma

Pelos números, Figma é o vencedor desta comparação, principalmente por sua natureza colaborativa e disponibilidade de plataforma cruzada. À medida que mais equipes usam sistemas de design que exigem integração mais estreita entre o desenvolvimento e design de front-end, a colaboração em tempo real e o recurso de incorporação ao vivo da Figma oferecem uma grande vantagem. Por outro lado, o Figma é um aplicativo online que pode ser proibido de usar em uma empresa por motivos de segurança.

Axure fica em segundo lugar devido à sua força imediata com componentes pré-construídos, poderosos recursos de prototipagem interativa e geração de documentos. No caso mais raro, quando uma empresa precisa acessar armazenamentos de dados do mundo real para ver como um determinado recurso se comporta, o Axure é a melhor ou a única opção.

Esboço pode ter chegado por último, mas uma vez que os usuários aproveitem os muitos plug-ins e recursos disponíveis para a ferramenta, ela é extremamente poderosa e pode ser adaptada para atender às necessidades de um grupo de design. A ressalva aqui é que os plug-ins devem ser atualizados após cada atualização do Sketch e, como um aplicativo exclusivo para Mac, as empresas que usam PCs com Windows não podem usá-lo.

Todas as três ferramentas analisadas neste artigo são poderosas por si mesmas. No entanto, cada um tem limitações. Cabe aos designers e equipes individuais identificar suas necessidades de fluxo de trabalho, pesar os prós e contras de cada programa e fazer uma escolha adequada.

• • •

Leituras adicionais no ApeeScape Design Blog:

• Abandone MVPs, adote protótipos mínimos viáveis ​​(MVPr)
• O poder do Figma como ferramenta de design
• Como criar um guia de estilo de esboço, biblioteca e kit de interface do usuário
• Compreendendo sistemas e padrões de design
• Morte para o Wireframe. Direto para alta fidelidade!

Compreender o básico

Para que é usado o Axure?

Axure é uma ferramenta de design UX usada para criar wireframes e protótipos interativos. Axure é especialmente útil para designers de aplicativos de desktop e móveis, e é altamente considerado entre empresas pelo alto nível de funcionalidade e detalhes visuais que podem ser integrados em seus protótipos.

Axure é a melhor ferramenta de prototipagem?

Axure é uma das principais ferramentas de prototipagem para designers UX corporativos e equipes de design digital. No entanto, alternativas Axure como Sketch e Figma também são populares por causa de suas ferramentas de colaboração, recursos de transferência e suporte a plug-ins.

Por que a ideação é importante?

A ideação é uma parte importante do processo de design UX porque permite que os designers gerem de forma livre e rápida conceitos e soluções que normalmente não podem ser considerados. É também um momento valioso para os designers colaborarem e combinarem seus conhecimentos e experiências anteriores no processo de resolução de problemas.

O que é design de alta fidelidade?

Produtos de design de alta fidelidade são modelos de tela prontos para apresentação e exibidos para clientes, executivos internos e outras partes interessadas. As ferramentas de design que se destacam nessa tarefa têm todos os recursos necessários para adicionar o polimento necessário para criar uma representação das interfaces finais voltadas para o cliente.

O que é um protótipo de baixa fidelidade?

Protótipos de baixa fidelidade são wireframes ou esboços digitais que podem ser revisados ​​por outros designers e proprietários de produtos. Dependendo do processo de UX, eles também podem ser visualizados por desenvolvedores e partes interessadas. Os wireframes têm como objetivo mostrar a estrutura básica de um aplicativo antes de gastar tempo em maquetes de alta fidelidade.