Este artigo demonstra de forma detalhada a prototipação ou criação de modelos de sistemas web, mobile ou desktop utilizando a ferramenta Balsamiq Mockup. Esta ferramenta é útil tanto para acadêmicos da área de sistema de informação que pretendem desenvolver seu TCC (Trabalho de Conclusão de Curso) e precisam de uma ferramenta para modelar o sistema desenvolvido, como para profissionais da área de informática que necessitam apresentar para seus superiores a prototipação do sistema que será desenvolvido na empresa.
Breve Descrição da Ferramenta Basalmiq Mockup
Basalmiq Mockup (BALSAMIQ, 2011) da Basalmiq Studio é uma aplicação desenvolvida na linguagem de programação ActionScript, que executa adobe AIR (Adobe Integrated Runtime). Essa aplicação é utilizada para desenvolver protótipos ou modelos (mockups), como as telas de um sistema desktop, ou sistema/páginas web ou mobile. O download da ferramenta pode ser realizado pelo site http://www.balsamiq.com/download. Após realizar o download e a instalação da ferramenta, inicia-se a utilização da ferramenta, conforme Figura 1.
![Ferramenta Balsamiq Mockup](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup1.jpg)
Figura 1: Ferramenta Balsamiq Mockup
O aplicativo é de interface simples, possui uma barra de ferramentas rápida chamada de Quick Add (representada na Figura 2). Através dela é possível encontrar e adicionar os componentes na View do Basalmiq, além dos botões básicos como colar, copiar e agrupar.
![Barra de ferramentas Quick Add do Balsamiq](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup2.jpg)
Figura 2: Barra de ferramentas Quick Add do Balsamiq
Balsamiq contém outros controles, totalizando 75 controles disponíveis, divididos em categorias como leiaute, mídia e botões. Novos controles podem ser adicionados, através do menu Help – Download More Controls (Mockups to Go). O Balsamiq Mockup irá abrir o site https://mockupstogo.mybalsamiq.com/projects, no qual poderão ser encontrados diversos controles separados por categoria. A Figura 3 apresenta a barra de ferramentas completa do Balsamiq.
![Barra de ferramentas completa do Balsamiq](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup3.jpg)
Figura 3: Barra de ferramentas completa do Balsamiq
Desenvolvimento
Pretende-se desenvolver neste artigo um simples protótipo web com tela de Login, uma tela que lista os clientes cadastrados e uma outra tela que apresenta um gráfico de faturamento por vendas do mês, com o intuito de apresentar a utilização da ferramenta.
Com a ferramenta Balsamiq aberta adiciona-se o componente Browser Window (Figura 4) na view da ferramenta Balsamiq.
![Browser Window](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup4.jpg)
Figura 4: Browser Window
Com um duplo clique sobre o componente adicionado da view, altera-se o nome da página e a URL que será acessada (Figura 5).
![Nome do Protótipo e Url](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup5.jpg)
Figura 5: Nome do Protótipo e Url
A Figura 6 apresenta o componente Browser Window juntamente com seu nome e URL alterado.
![Protótipo Web](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup6.jpg)
Figura 6: Protótipo Web
Os componentes adicionados na view possuem propriedades que podem ser alteradas. AFigura 7 ilustra as propriedades do componente Browser Window. Para acessar essas propriedades, clica-se uma vez com o mouse sobre o componente.
![Propriedades do Componente](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup7.jpg)
Figura 7: Propriedades do Componente
Ainda na Figura 7 verificou-se alteração nas propriedades color e scrollbar, essa alteração modificou a cor de fundo da página web para vermelho e a adição do scrollbar na página, conforme apresenta a Figura 8.
![Alteração das Propriedades do Componente Browser Window](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup8.jpg)
Figura 8: Alteração das Propriedades do Componente Browser Window
Para melhor visualização do sistema, a cor de fundo utilizada será branca. Alterando a propriedade color para branca.
Criação da Tela de Login do Usuário
Para criação da tela de Login do usuário foi inserido na view da ferramenta Balsamiq, um componente Window / Dialog e alterando sua propriedade Window, deixando o rodapé do componente maior, conforme Figura 9.
![Panel Login](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup9.jpg)
Figura 9: Panel Login
Após isso adicionou-se dois botões (Button), alterando suas legendas para OK e Limpar e inserindo-os no Rodapé da tela de Login. Foram adicionados também campos de textos (TextInput) e Labels, alterando o texto das Labels para Usuário e Senha. A Figura 10 apresenta a criação da tela de Login do sistema proposto.
![Criação da Tela de Login](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup10.jpg)
Figura 10: Criação da Tela de Login
Nota: Cada componente possui N propriedades que podem ser alteradas, por exemplo, o componente TextInput, pode alterar as propriedades Color, State, Text, entre outras.
Criação da Tela Clientes
Para a criação da tela de Clientes foram adicionado os seguintes componentes:
- Window / Dialog
- Search Box
- Data Grid / Table
- Button
O componente Window / Dialog representa a tela de Clientes, no seu rodapé foram adicionados 3 botões, alterando seus labels para Novo, Editar e Deletar. Foi adicionado um Search Box alterando seu label para Procurar. E Finalizando a construção da tela, foi adicionado um componente do tipo Data Grid / Table. A Figura 11 apresenta como ficou o leiaute da Tela de Consulta Entidades.
![Tela Clientes e Menu Bar](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup11.jpg)
Figura 11: Tela Clientes e Menu Bar
Para a valorização do componente Data Grid / Table (Figura 11) com registros, foi alterado o componente conforme a Figura 12. Observa-se na Figura 12 que a primeira linha representa o cabeçalho da tabela, os campos estão separados por vírgula. As demais linhas representam os registros da tabela.
![Valorização da Tabela](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup12.jpg)
Figura 12: Valorização da Tabela
Alterando algumas propriedades do componente Data Grid / Table é possível setar o foco para um dos registros da grid, conforme Figura 13.
![Propriedades do Componente Data Grid / Table](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup13.jpg)
Figura 13: Propriedades do Componente Data Grid / Table
Ainda falando sobre a tela de Consulta Entidades, clicando sobre o componente Window / Dialog é possível adicionar os botões de minimizar, maximizar e fechar. Conforme Figura 14.
![Minimizar, Maximizar e Fechar Tela Consulta Entidades](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup14.jpg)
Figura 14: Minimizar, Maximizar e Fechar Tela Consulta Entidades
Criação de Gráfico
Outra opção legal da ferramenta é a prototipação de telas que possuem gráficos. Para a criação da tela de Gráfico foram adicionados os seguintes componentes:
- 1 Window / Dialog
- 4 Labels
- 2 Data Chooser / Data Picker
- 1 Chart: Line Chart
- 1 Button
O componente Window / Dialog representa a Tela de Gráfico, no seu rodapé foi adicionado um botão, alterando seu label para Fechar. Foram adicionados 4 labels e alteradas suas propriedades text para Data Inicial, Data Final, Faturamento e Vendas.
Foram adicionados também 2 componentes do tipo Data Chooser / Data Picker e um componente de gráfico chamado de Chart: Line Chart.
A Figura 15 apresenta como ficou o leiaute da Tela de Gráfico.
![tela grafico](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup15.jpg)
Figura 15: Tela Gráfico
No primeiro componente Data Chooser / Data Picker foi alterado seu focus, colocando o foco para o componente, ficando este na cor azul, conforme figura 16.
![Focus Data Chooser / Data Picker](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup16.jpg)
Figura 16: Focus Data Chooser / Data Picker
Para o componente Button, que representa o botão Fechar, foi adicionada uma imagem clicando sobre o componente e alterando sua propriedade Icon, conforme a figura a seguir.
![Adicionando Ícone no Componente Button](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup17.jpg)
Figura 17: Adicionando Ícone no Componente Button
A figura a seguir representa o ícone escolhido para representar o botão Fechar.
![Ícone Fechar](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup18.jpg)
Figura 18: Ícone Fechar
É possível alterar o tamanho do ícone alterando os valores do ícone para XS, S, M ou L, como pode ser visualizado na acima (Figura 18).
Por fim, foi alterado o label Faturamento utilizado para representar o eixo y do gráfico, deixando o label na vertical, alterando sua propriedade orientation (Figura 19).
![Alterando a Orientação da Label](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup19.jpg)
Figura 19: Alterando a Orientação da Label
Por fim é apresentando pela Figura 20 como ficou a criação da Tela de Gráfico do sistema proposto.
![Gráfico](http://arquivo.devmedia.com.br/artigos/Eduardo_Malherbi/Balsamiq_Mocukp/Balsamiq_Mockup20.jpg)
Figura 20: Gráfico
Neste artigo foi apresentada de forma prática e didática a utilização da ferramenta Balsamiq Mockup, a fim de que leitores possam utilizar em seus projetos.
Lembrando que além da prototipação de Sistemas Web é possível realizar a prototipação de sistemas Mobile ou Desktop.
Bom, pessoal, por hoje é isso. Espero que tenham gostando.
Obrigado e um abraço!