FERRAMENTAS DE PROTOTIPAGEM

Prototipar não é projetar: protótipos são ferramentas para testar e validar idéias.
Eles dão tangibilidade (materialidade visual/interativa/tridimensional) para as idéias, e ajudam nos estudos que são desenvolvidos enquanto projetamos um artefato.
O protótipo não é o produto final de um projeto, mas o meio para aperfeiçoá-lo, para identificar problemas, para antecipar e resolver questões preventivamente e melhorar sua interface e seu comportamento, até que ele começe a ser executado/construído definitivamente.

Mais informações sobre a diferenças entre Mockups, Wireframes e Protótipos.
Para uma avaliação mais completa e rigorosa das ferramentas disponíveis no mercado, utilize o site UX Tools.



DESIGN DE INTERFACE RECOMENDADO PARA PLATAFORMA
FERRAMENTA PREÇO WIREFRAMES DESIGN DE INTERFACE VISUALIZAÇÃO MOBILE PROTÓTIPO FUNCIONAL PROTÓTIPO DE ALTA FIDELIDADE WINDOWS MAC OS WEB
Figma gratuito
recursos premium pagos
Sketch US$99,00/ano
Adobe XD CC Subscription
Fuse Open gratuito
Moqups gratuito
recursos premium pagos
Invision Studio ?
recursos premium pagos
Marvel gratuíto
recursos premium pagos
✓ (iOS)
Whimsical gratuíto
recursos premium pagos


PROTÓTIPO (COMPORTAMENTO) RECOMENDADO PARA PLATAFORMA
FERRAMENTA PREÇO WIREFRAMES DESIGN DE INTERFACE VISUALIZAÇÃO MOBILE PROTÓTIPO FUNCIONAL PROTÓTIPO DE ALTA FIDELIDADE WINDOWS MAC OS WEB
Origami gratuito
Invision gratuito 1 projeto
US$25,00/mês para projetos ilimitados
Framer US$15,00/mês
Fuse Open gratuito
Principle US$129,00 ✓ (iOS)
Marvel gratuito 1 projeto
US$12,00/mês
✓ (iOS)


AVALIAÇÃO E USABILIDADE RECOMENDADO PARA PLATAFORMA
FERRAMENTA PREÇO WIREFRAMES DESIGN DE INTERFACE VISUALIZAÇÃO MOBILE PROTÓTIPO FUNCIONAL PROTÓTIPO DE ALTA FIDELIDADE WINDOWS MAC OS WEB
Invision gratuito 1 projeto
US$25,00/mês para projetos ilimitados
Quant-UX gratuito


ASPECTOS ÚNICOS A SEREM CONSIDERADOS SOBRE CADA FERRAMENTA

Figma
Figma é uma ferramenta para design de interfaces inteiramente on-line. É considerada o "Google Docs" para design de interfaces por permitir que vários usuários possam trabalhar em um arquivo simultaneamente. Como a ferramenta funciona on-line, não é possível utilizá-la sem conexão com a internet. Também por se tratar de uma ferramenta online, ela recebe autalizações e e novos recursos com uma freqüência muito rápida. Recursos e tutoriais podem ser encontrados aqui.

Sketch
É a ferramenta mais utilizada para design de interfaces atualmente. É muito leve e possui uma quantidade extraordinária de plug-ins para aprimorar e ampliar suas funcionalidades. Muitas das ferramentas de prototipagem aceitam seus arquivos .sketch nativamente. Plug-ins e recursos para o Sketch podem ser encontrados aqui.

Moqups
É uma ferramenta dedicada a construção de Wireframes. Permite a construição de wireframes com comportamento e interação.

InVision / InVision Studio
InVision é a ferramenta mais utilizada atualmente para design de comportamento de aplictivos e sites, e para avaliação de usabilidade. É uma ferramenta on-line que funciona de forma semelhante a um "PowerPoint", mapeamedo Hit-Areas em imagens de telas e adicionando transições a elas. É amplamente adotada por que os protótipos podem ser compartilhados online para que colaboradores utilizem, avaliem e anotem suas considerações em cada elemento.
InVision Studio é a nova ferramenta, ainda em fase Alpha (não disponível publicamente), desenvolvida para concorrer com o Sketch, Figma e AdobeXD.

Marvel
Marvel é uma ferramenta online que reúne um editor gráfico de interface simples (sem os recursos presentes no Figma), e uma ferramenta de prototipagem à la "PowerPoint", mas sem os recursos do InVision. É um produto que faz tudo integrado, mas que não é excepcional em nenhum dos quesitos. Ele possui uma ferramenta de espelhamento de interface para iOS, e também produz protótipos que podem ser utilizados pelo navegador.

Fuse / Fuse Studio / Fuse Open
Fuse é uma ferramenta de prototipagem baseada em programação: os protótipos e seu comportamento são construídos com uma linguagem de marcação (como o HTML). É uma ferramenta ideal para quem se sente à vontade com programação.
O pacote Fuse Open, que inclui tanto a ferramenta Fuse Studio, quanto a ferramenta de programação que permite que códigos nativos (iOS e Android) sejam utilizados na programação, se tornaram gratuitos.
Fuse Studio é ferramenta visual que auxilia a construção dos protótipos para quem não se sente confortável com a programação. A documentação da linguagem, classes e recursos pode ser consultada aqui.

Framer
Framer, assim como o Fuse, é uma ferramenta de design de comportamento construídos com uma linguagem de programação (coffescript); Também é indicado para quem possui familiaridade com programação. A ferramenta é paga, mas seu núcleo (FramerJS) é gratuito, opersource, e produz um protótipo em HTML que pode ser utilizado pelo navegador. Contudo, para se utilizar seu núcleo (FramerJS), é preciso transformar todo o código de Coffescript pra Javascript, e a documentação disponível no site do produto apresenta apenas as instruções utilizando Coffescript. Para fazer download do FramerJS utilize a página do projeto no Github; Para auxiliar na tradução do Coffescript para Javascript, utilize o Decaffeinate.

Origami Studio
Ferramenta desenvolvida pelo Facebook para prototipagem de comportamentos. É uma ferramenta inteiramente gratuita e extremamente poderosa, que se utiliza de programação visual com fluxogramas, módulos e conectores, permitindo que lógica e recursos como dados em tempo real possam ser incorporados no protótipo por pessoas que não tenham familiaridade com programação. Tutoriais para uso da ferramenta podem ser vistos aqui e a documentação de módulos e recursos aqui.

Quant-UX
Uma das poucas ferramentas que traça os percursos e usos realizados por multiplos usuários em um protótipo, e pode reconstituir esses percursos e atividades para que o projetista observe como seu artefato está sendo usado.

Whimsical
Whimsical é uma ferramenta online de fluxogramas que também tem um módulo para construção de wireframes. Ela é útil para construção de diagramas de todas os tipos, muito usados como ferramentas para projetar.