Desde que me tornei um desenvolvedor web freelancer, passei a ser responsável por quase todas as etapas de criação de um website ou sistema web. Não demorei muito para aprender o quanto é importante a parte de criação de mockups e protótipos de telas, especialmente com Clientes leigos e/ou que não possuem total conhecimento de sua real necessidade. Com as telas desenhadas, é muito mais fácil para o Cliente analisar se é realmente isso que deseja simplesmente pelo fato de terem em mãos algo mais concreto.
Nos últimos meses tenho testado diversos aplicativos com objetivo de encontrar uma ferramenta poderosa e que me desse liberdade e agilidade de criar mockups profissionais para meus clientes. Não queria nada tão complexo como o Visio nem tão simples quanto usar papel e caneta. Busquei até encontrar o Balsamiq Mockups da Balsamiq Studios. Balsamiq Mockups é uma aplicação desenvolvida em Flash e roda sobre o AIR da Adobe, o que permite rodar em múltiplas plataformas (Mac/Linux/Windows).
Além disso, o look and feel dos mockups gerados lembram os inúmeros desenhos de telas que fiz no passado, mas dessa vez sem utilizar papel e caneta (e com muito mais qualidade). Toda a interface é simples e direta. Basicamente existem duas barras de ferramentas. A primeira contém o Quick Add, que como o próprio nome diz é a forma mais fácil de encontrar e adicionar controles, além dos botões básicos como copiar, colar, agrupar, etc.
A segunda barra de ferramentas contém todos os 75 controles disponíveis divididos por categorias como Botões, Layout, Mídia, etc. (existem controles específicos para o iPhone). Novos controles ainda não podem ser adicionados diretamente no aplicativo, mas é possível importar imagens e utilizar o recurso Sketch it!, que transforma a imagem num desenho similar aos outros controles. O site Mockups To Go possui diversos templates gratuitos criados pela comunidade e novos controles podem ser solicitados diretamente aos criadores do Balsamiq.
Para criar um mockup não existe nenhum segredo: basta arrasta e soltar os controles na página. Todos os controles possuem uma caixa de propriedades que permite alterar fontes, cores, alinhamentos e outras propriedades exclusivas de cada controle. A ferramenta permite exportar os mockups no formato PNG e ainda copiar e colar diretamente no Word ou Powerpoint. O Balsamiq Mockups suporta diversas soluções colaborativas, entre elas Atlassian Confluence, Atlassian JIRA e XWiki além de possuir um formato baseado no padrão XML para armazenamento dos mockups. O modo Tela Cheia permite esconder as barras de ferramentas e focar exclusivamente no mockup. Essa função é excelente para fazer apresentações e brainstorm com aos clientes.
Veja um vídeo (em inglês) de como criar o mockup de uma aplicação semelhante ao iTunes da Apple:
Duas das poucas críticas que encontrei em reviews de outros sites são:
- Apenas uma página por arquivo: Não é possível adicionar novas páginas. Isso é um ponto negativo se você estiver trabalhando em um projeto com múltiplas páginas relacionadas ou agrupadas.
- Não existe o conceito de Master: Pelo fato de não existir a possibilidade de múltiplas paginas, não é possível criar controles Master (compartilhamento dos mesmo componentes por diversas páginas)
Mas pelo fato dos criadores do Balsamiq estarem abertos a críticas e sugestões, eles se pronunciaram em relação a essas críticas e já estão providenciando melhorias para as próximas versões. Ponto positivo para o aplicativo e para nós, usuários, que só temos a ganhar mais recursos e melhorias.
Sem dúvida nenhuma, o Balsamiq Mockups já faz parte da lista de ferramentas que utilizo para desenvolver sites e aplicações web.
