Um dos passos mais importantes antes da codificação, é a modelagem e a prototipação. Seja para modelar as classes utilizando o bom e velho UML (Unified Modeling Language), ou seja para criar um mockup das telas do seu site ou aplicativo.

Neste artigo, vou te mostrar alguns sites bacanas que oferecem serviços para que você possa criar os seus diagramas e mockups.

Draw.io

Este é, de longe, o meu favorito (e por isso está em primeiro hehe). O site oferece uma grande diversidade de figuras: desde as básicas como as formas geométricas, até mais avançadas, como UML (Unified Modeling Language), relacionamentos entre entidades (para diagramação de um esquema de banco de dados), flowcharts e suporte ao BPMN (Business Process Model and Notation), linguagem para mapeamento de processos de negócio. E estas são só as opções que já vem habilitadas por padrão. Também é possível habilitar as formas para mobile (botões do Android e iOS), componentes eletrônicos (conectores lógicos, resistores, capacitores, switches e afins) e muitas outras.

O serviço é open source e 100% gratuito, tem suporte a uma grande variedade de línguas, suporta a maior parte dos navegadores e consegue integrar à conta do Dropbox e/ou Google Drive. Caso você trabalhe com o Confluence, também é possível instalar o plugin da Draw.io para integrar os serviços.

Balsamiq

O Balsamiq é outra opção excelente. Ele também faz as mesmas coisas que a opção anterior, mas dá três formas de trabalhar: através da interface web, pelo aplicativo desktop ou pelos plugins. O seu grande diferencial está no visual das suas formas, tornando-o ideal para criar mockups de aplicativos, sites e afins. Ficam perfeitos para convencer um cliente em potencial, por exemplo.

Infelizmente, este serviço é pago. Há três formas de obtê-lo:

• Desktop: A licença para um único usuário é $89 dólares. É vitalícia e pode ser migrada para outras máquinas;
• Web: A cobrança é feita pela quantidade de projetos ativos. Três projetos saem por $12 dólares ao mês (ou $120 dólares o ano);
• Plugin: O serviço disponibiliza plugins para se integrar ao Jira, Confluence e ao Google Drive. Para cada um deles, a cobrança é feita de forma diferente.

Para todos os casos, há um período de testes que eles oferecem.

Evolus Pencil

Esta é outra opção open source, mas não possui interface web, somente um aplicativo desktop construído em Electron  – framework que nos possibilita utilizar tecnologias web (HTML, CSS e JavaScript) para criar aplicações desktop. Assim como no Balsamiq, o visual das suas formas é muito bonito. São bem agradáveis, bem feitas e flexíveis. Ele é integrado ao Openclipart, o que permite inserir figuras legais nos diagramas.

O Evolus Pencil também é extensível. Isso significa que você pode desenvolver seu próprio set de figuras utilizando a API. É excelente para empresas que possuem um framework interno e desejam que os designers façam os mockups em cima do modelo proprietário.

Menção honrosa

Eu citei as ferramentas que tenho mais familiaridade, mas há uma infinidade de outras disponíveis por aí. Abaixo, deixo mais algumas opções bem famosas:

• Wireframe
• Figma
• Moqups

E você? Conhece mais alguma ferramenta? Gostou de algumas destas? Fala ai nos comentários!