Ferramentas grátis para criar protótipos de aplicações

Hoje graças a tecnologia, quando vamos apresentar um projeto, podemos apenas apresentar um protótipo que simula um app final e consome 1/3 do trabalho de uma equipe em relação a produção do app nativo. Geralmente essas ferramentas são bem caras, mas rodando na internet percebi que temos a disposição várias ferramentas grátis para o mesmo propósito, porventura até melhor e simples que algumas pagas. Elaborei esse post para apresentar as ferramentas grátis que temos disponíveis para criação de protótipos de aplicativos para web (mobile e desktop).

Introdução

Você já deve ter se deparado na internet com exemplos de apps, que parecem arquivos de imagem GIF (as vezes até são mesmo) animados, demonstrando o uso de um app ainda em estado de criação, como na imagem abaixo.

Ferramentas para criar protótipos de aplicações para web - Web Social Dev

Esse exemplo provavelmente foi criado com uma das dezenas de ferramentas disponíveis hoje para criação de protótipos rápidos de aplicações para web. Essas ferramentas ajudam no processo de elaboração e design de uma aplicação, pois otimiza o feedback da aplicação, diminuindo draticamente o tempo em que engenheiros elaboram um app. Na verdade com algumas dessas ferramentas você consegue criar todo o app e no fim apenas exportar o protótipo para projetos mobile, para criação de apps para Android e iOS, por exemplo.

Como essas ferramentas geralmente são muito caras, decidi juntar em um post as que eu encontrei grátis. 🙂

Lista de ferramentas/serviços

Framer.js

Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O Framer.js é uma biblioteca JavaScript muito conhecida, utilizada para criação de protótipos rápidos. Com o Framer.js você consegue criar protótipos bastante fiéis a um app nativo, alocando menos tempo de trabalho e membros da equipe de desenvolvimento. Apesar de apresentar informações de compra no website, o Framer.js é gratuito, pago é o aplicativo lançado recentemente chamado Framer Studio, que é um software para Mac que auxilia na criação dos protótipos. Por ser grátis, a pena pelo ter conhecimento da ferramenta. No website tem vários exemplos de utilização para quem quiser conferir.

website github exemplos

Prott

Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O Prott é uma ferramenta para criação de protótipos com app disponível (por enquanto) apenas para iPhone. O conceito é bem bacana, você tira foto dos sketchs ou wireframes do elaborados para o projeto do app, essas imagens são sincronizadas automaticamente na nuvem e na aplicação web do Prott você edita e cria as interações que no final geram o protótipo. No fim, você pode testar o protótipo pronto no próprio iPhone, para uma experiência mais próxima da realidade. A ferramenta é grátis para um projeto, mais que isso é necessário adquirir o serviço.

website

Origami

Origami - Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O Origami é uma framework, criado pelo Facebook para seu time de desenvolvimento, para a ferramenta Quartz Composer da Apple. O Origami é grátis e tem projeto hospedado no GitHub, além da comunidade no Facebook. O Quartz Composer é uma ferramenta um tanto antiga da Apple, inicialmente utilizada para manipular motion grpaphics. Com auxílio do Origami é possível utilizar essa ferramenta para criação de protótipos de apps ou aplicações sem a necessidade de escrever códigos. Por ser do Facebook, a ferramenta possui uma comunidade bem movimentada e a ferramenta está em constante atualização. Vale a pena conferir.

website github exemplos

Avocado

Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O Avocado é uma ferramenta que auxilia na utilização do Quartz Composer para criação de protótipos rápidos de aplicações web, criado pela agênciaIDEO. O papel do Avocado é auxiliar a criação de protótipos sem a necessidade de escrever códigos de instrução. Ele tem a mesma função do Origami, que citamos anteriormente. Este também é um projeto open source, hospedado no GitHub. Possui uma documentação bem completa e vários exemplos no link de apresentação do projeto no GitHub.

github

Marvel

Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O Marvel é mais uma ferramenta voltada para a criação de protótipos de aplicações web, com o diferencial desta ser totalmente online. Para utilizar o Marvel você precisa linkar uma conta do Dropbox ou do Google Drive, pois é com base nestes serviços na nuvem que opera o serviço. Ele é muito simples se comparado com os outros exemplos da lista, o programa basicamente se baseia em ações de arrastar elementos atribuindo funções. Vale muito a pena conferir essa ferramenta, além de ser uma mão na roda ela é grátis.

website

POP – Prototyping on Paper

POP - Ferramentas grátis para criar protótipos de aplicações web - Web Social Dev

O POP é, como as outras da lista, mais uma ferramenta para criação de protótipos de web apps, mas este trata a camada mais rústica da elaboração de aplicações. A proposta do POP é a seguinte: ele fornece algum sketchs com wireframe dos principais dispositivos, você faz o rascunho, fotografa o rascunho com o app mobile (Android e iOS Windows Phone – WOW!) e depois edita as interações do app, através do smartphone ou desktop. O POP é muito útil para quem tem várias ideias para apps, porque fornece um “ambiente” pra você colocar essa ideia no papel bem rápido. Vale a pena conferir essa ferramenta, ela é grátis e está disponíveis para as principais plataformas mobile.

website

Conclusão

A produção de protótipos hoje é uma tendência, é só pensar que gera menos custos a uma empresa de desenvolvimento a apresentação de protótipos ao invés de apps nativos (devido ao tempo alocado para criação de apps, e tempo é dinheiro). Ter conhecimento em pelo menos uma dessas ferramentas ja ajuda você a se destacar, pois pelo menos uma etapa do processo de produção você já tem otimizada, o que ajuda a ganhar tempo para focar em atividades mais importantes.

Qualquer dúvida ou sugestão de serviços/ferramentas, encaminhe um comentário.

🙂

  • Aerton Oliveira

    Gostei do post

  • D+, Vi por exemplo o “avocato” a pessoa tem que ter um certo conhecimento das ferramentas e como seu projeto deve funcionar. Por exemplo eu quero fazer um app para xxx que ao clicar aqui vai fazer xxx… Interessante mesmo mais primeiro tem que ter a ídeia toda no papel correto?

    • Então Fábio, desculpe a demora para responder. Na verdade, essa etapa no processo de desenvolvimento surgiu justamente dessa necessidade de tirar as idéias do papel para saber como iria ficar, sem, no caso, precisar programar toda a aplicação para então prever o resultado. Então no caso, sim, normalmente você já precisa ter um norte para o desenvolvimento da aplicação, no mínimo.

  • Pingback: Criação de Protótipos()