IGTI Blog
protoripagem

Conheça as melhores ferramentas de prototipagem

Comentários e fatores influenciadores para ajudá-lo a encontrar a melhor ferramenta de prototipagem para o seu trabalho.

As opções de ferramentas disponíveis no mercado para prototipagem continuam a crescer. Quando terminar de escrever esse artigo, minhas ferramentas preferidas podem muito bem mudar ou evoluir novamente. Eu tenho utilizado muito o MarvelApp. A Adobe acaba de lançar uma nova ferramenta chamada Adobe XD. Quem sabe o que estará disponível?

Então, por que escolher, Marvel, Invision, Axure ou outra coisa?

Para mim estes são os principais fatores influenciadores que impulsionam a escolha da ferramenta, em ordem de importância:

  •     Intenção do protótipo
  •     Familiaridade e disponibilidade
  •     Tempo e esforço para produzir um protótipo funcional
  •     Criando protótipo utilizável para teste
  •     Curva de aprendizado
  •     Preços
  •     Capacidade de criar os próprios Widgets GUI
  •     Disponível na minha plataforma
  •     Recursos de design colaborativo / remoto
  •     Soluções / padrões integrados para transições
  •     Widgets de GUI incorporados
  •     Criando código fonte utilizável

Você pode notar a presença de “criar código fonte utilizável”. Você também pode notar que está na parte inferior da lista. Este é ponto um pouco complicado. A criação de protótipos que são reutilizáveis para a produção final não é algo comumente feito ou recomendado. Há várias razões para isso. A prototipagem é um processo rápido e iterativo. É um processo para explorar ideias e aprender rapidamente. Se você estiver focado na criação de código de nível de produção, você começa a perder o valor da iteração rápida.

Por outro lado, se você pode produzir código fonte reutilizável com pouco ou nenhum esforço adicional, sua ferramenta de prototipagem tem o valor agregado da economia de tempo de desenvolvimento.

Quais ferramentas são usadas no mercado hoje?

Vou fazer uma rápida lista de ferramentas que podem ajudá-los a apresentar melhor suas ideias de design. Essa lista serve para diminuir as suas opções à medida que você escolhe o que melhor acomoda seu projeto e restrições de tempo. É difícil encontrar uma ferramenta que faça tudo, às vezes o melhor que podemos fazer é usar as melhores partes de uma ferramenta antes de transferir nosso trabalho para uma ferramenta diferente.

Meu conselho é descobrir o que você precisa para a apresentação que está focando, descobrir o seu público e determinar a fidelidade que você precisa. Às vezes é necessário desenvolver alguma coisa, às vezes você só precisa “linkar” as telas.

Papel

Marvel App – Fácil de usar e faz o trabalho bem. Tudo que você precisa é de um papel e um telefone.

Wireframe

Balsamiq – Mais fidelidade para o próximo passo após o papel. Eu prefiro usar a biblioteca de widgets do wireframe do Axure, os dois são basicamente a mesma coisa.

Keynotopia – Uma vasta biblioteca de modelos de wireframe e é ideal para Prototipar em Keynote ou PowerPoint.

Ilustrator – Faz o trabalho. Tem muita liberdade para fazer coisas, apenas permaneça em baixa fidelidade enquanto você faz o wireframe.

Rápido + fácil

Powerpoint / Keynote – Bom para demonstrações / apresentações.

Desktop / Mobile

Justinmind – Já ouvi muito sobre ele, embora eu ache parecido com o Axure. Gostei do fato de poder selecionar a plataforma para a qual você está projetando desde o início.

Axure – É possível partir para alta fidelidade, mas o ideal é para wireframes.

Movimento e micro interações

AfterEffects – Curva de aprendizado longa, mas tem mais personalização e opção.

Framer – Pode ter uma curva de aprendizado difícil, e usa java script, mas é muito eficaz, feito pelo Facebook.

Proto.io – Cria interfaces de alta fidelidade que podem ser executadas no seu dispositivo.

Origami Studio – apenas para Mac, feito pelo Facebook, ideal para apresentar animações

Principle – apenas Mac, ótimo para mostrar interações e fluxos detalhados

Adobe XD – Embora ainda esteja em versão beta, tem muitos recursos promissores para o design de movimento, além de suporte para Mac / Windows. O nome da Adobe é muito forte, e eles sempre podem surpreender, mesmo tendo perdido tanto espaço dentro do design de interfaces.

Apenas para celular

Flinto – Visualização de tela para tela. Muito rápido e eficiente de usar. Também faz algumas animações básicas.

Jpegs linkados (os melhores para fingir uma interação)

Invision app – Desktop, celular com uma boa variedade de quadros com transições simples. Possui recursos de colaboração.

Marvel app – iOS, Android, prototipagem na Web com transições simples, tem a possibilidade de tirar fotos de papel e linkar.

Ficar de olho em 2018

Figma – é possível criar layouts de alta fidelidade direto do navegador.

Webflow – O Webflow oferece aos designers e desenvolvedores o poder de projetar, construir e lançar sites sensíveis visualmente, enquanto escrevem um código fonte bastante limpo.

Professor autor: Gustavo Moreira Braga Lamounier