Quais são as melhores ferramentas de prototipagem de interface? UI UX

Felipe Melo Guimarães
Aela
Published in
6 min readNov 3, 2017

Atenção: Escrevemos um artigo atualizado, sobre Ferramentas de UX/UI Design para você conhecer em 2021.

Seja você um profissional que está iniciando a sua carreira em UX e UI ou um profissional já com uma boa experiência na área, a questão das ferramentas de prototipagem é sempre um assunto importante.

Com as opções de aplicações crescendo cada dia mais, como saber qual é a melhor ferramenta para você? A escolha da ferramenta certa pode dobrar sua eficiência e até mesmo cortar os esforços pela metade.

Atualmente, no Brasil eu vejo que muita gente ainda utiliza o Photoshop para a parte de Visual Design, porém ele pode não ser a melhor opção, dependendo da etapa do projeto ou da plataforma para a qual você está criando.

A verdade é que não existe “a melhor” ferramenta de todas, mas sim a ferramenta adequada para você, seu projeto, a etapa e sua necessidade.

Antes de escolher esta ferramenta mais adequada, é importante que você se faça algumas perguntas. Quem sabe você descobre uma opção melhor, que vai ajudar em muito o seu trabalho.

1. Qual a curva de aprendizado?

Quanto tempo você demoraria para aprender a mexer nesta ferramenta? Quanto tempo você levaria para criar um protótipo? Essas são algumas perguntas que você deve se fazer.

Evite escolher ferramentas pesadas, com muitas funções que você nem vai usar.

Se você está gastando mais tempo tentando desvendar o programa do que montando o protótipo, tem algo errado aí.

2. Qual é o tipo de interface que você está prototipando?

É um site, um aplicativo mobile, um aplicativo desktop, um aplicativo para um wearable (Apple Watch, Android Wear)?

Dependendo do tipo da interface para a qual você está prototipando uma ferramenta ou outra podem se encaixam melhor em suas necessidades.

Além disso, alguns programas de prototipagem estão disponíveis apenas para Mac, outros rodam no navegador.

3. Qual a necessidade de fidelidade do protótipo?

Esse é um fator muito importante na hora de escolher a ferramenta com a qual você vai prototipar, pois existem várias diferenças de fidelidade.

Você precisa apenas de wireframes que mostrem a estrutura e layout ou precisa de algo que mostre mais detalhes e interações complexas?

4. Qual a necessidade de compartilhamento do protótipo?

A colaboração é algo bem importante no design, então é crucial considerar quais as possibilidades de colaboração oferecidas pela ferramenta.

Caso haja necessidade, algumas ferramentas permitem que você compartilhe seu protótipo com a sua equipe ou até mesmo que trabalhem de forma colaborativa no material.

5. Quais são as habilidades necessárias?

Você é um expert na área ou ainda está começando?

Noções de programação são necessárias para esse projeto ou mais a parte de Visual Design?

Dependendo do seu perfil profissional e do seu papel nesse projeto. Como por exemplo, se você vai prototipar e programar ou se vai fazer a parte visual, determinadas ferramentas podem atender melhor.

6. E finalmente, qual o seu orçamento?

Quanto você ou a sua empresa podem investir na ferramenta?

Com todas essas perguntas respondidas, vamos dar uma olhada em algumas ferramentas.

Sketch App:

Sketch app

Feito exclusivamente para Mac OS X, é uma das ferramentas mais conhecidas no mercado internacional para criar interfaces, sites e ícones.

É bem similar ao Illustrator, porém mais fácil de usar. É possível ver um preview da interface no mobile ou tablet usando o app Sketch Mirror. Ao se integrar com o InVision ou Marvel é possível criar protótipos rapidamente.

InVision:

InVision

É uma ferramenta de prototipação que roda na web e permite ter protótipos colaborativos e interativos, para receber feedback de clientes e colegas

É indicada para projetos que precisam de fidelidade mais baixa, mas aceita upload de arquivos PNG, JPG, GIF, AI e PSD.

Utilizar o InVision para projetos com muitas telas e com necessidade de testar/validar micro-interações poderá ser uma tarefa bem complicada e nada interessante de se trabalhar.

A empresa levantou há poucos dias um novo round de investimento, ($100M Series E) e está desenvolvimento novas ferramentas de Design de Interface e prototipação:

InVision Studio

InVision Design System Manager

Adobe Xd:

Adobe XD — Experience Design

Lançado em 2017 (a versão final) pela Adobe, permite a criação de interfaces e também prototipagem.

Na aba Design, você pode criar interfaces usando ferramentas de texto e vetor, e na aba Prototype é possível ver um preview e compartilhar a interface.

Excelente para criar protótipos de alta fidelidade.

Adobe XD e recursos do lançamento na Adobe MAX 2017:

Axure RP:

Axure RP

É uma ferramenta bem completa e já bem conhecida na área de Design UX. É bem usada por web e UX designers para criar wireframes clicáveis, fluxos de usuários e mapas de site, além de protótipos interativos.

É bem poderosa, mas peca na parte colaborativa e na prototipação para mobile.

Just in Mind:

Just in Mind

É um aplicativo para desktop excelente, e embora não seja tão conhecido quanto o Adobe Xd ou o Sketch, é razoavelmente fácil de usar. Permite a criação rápida de wireframes clicáveis e protótipos de alta fidelidade.

Muito bom para apps web e mobile.

UXPin:

UXPin

É uma ferramenta altamente colaborativa, que possui funcionalidades de prototipação rápida, protótipos de baixa ou alta fidelidade, snippets de código e várias outras funções bem interessantes.

Framer:

Framer

Ferramenta que integra com outras como Sketch e Figma e permite que você crie animações extremamente detalhadas com poucas linhas de código (utiliza uma versão simplificada de JavaScript chamada CoffeeScript).

Origami Studio:

Origami Studio

É a ferramenta de design do Facebook, porém apenas disponível para Mac OS, e mais focada em animações.

Você pode importar interfaces criadas no Sketch e inserir animações. Além disso, possui apps de preview para iOS e Android.

Principle:

Principle

Outra ferramenta exclusiva para Mac OS, que também permite importar arquivos criados no Sketch e aplicar animações. Possui um app de preview para iOS.

Bem interessante para criar e verificar animações para apps mobile.

Marvel App:

Marvel app

Ferramenta muito simples de criação de protótipos, mas que pode agradar tanto UX designers com conhecimento avançado, quanto iniciantes.

Permite a criação de protótipos de alta e de baixa fidelidade, além de ter integração com o Sketch. Recentemente adicionaram uma função bem bacana que permite transformar sketchs no papel em protótipos interativos para mobile.

Conclusão

Para se trabalhar com UX/UI hoje, existe uma gama muito grande de programas bem interessantes.

É claro, é importante que você esteja sempre atento aos novos lançamentos, principalmente para saber de novidades que podem melhorar o seu trabalho. Porém, o mais importante é sempre o seu desenvolvimento como designer.

Portanto, quando você perceber que está focando muito em uma ferramenta, pare e pense em se desenvolver como designer, pois dessa forma você nunca ficará desatualizado e para atrás como acontece com as ferramentas.

Eu gosto muito de trabalhar, antes de tudo, com caneta e papel, e também ensino isso aos meus alunos. Dessa forma, com as ideias ali, fica muito mais fácil sentar em frente a uma ferramenta e transformar aquilo em realidade.

--

--

Felipe Melo Guimarães
Aela
Editor for

Design Leader, Educator & Mentor | Creative Consultant for Tech Companies | Founder Aela.io