Prototipação de Sistemas utilizando a Ferramenta Balsamiq Mockup

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.

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.

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.

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.

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).

Figura 5: Nome do Protótipo e Url

A Figura 6 apresenta o componente Browser Window juntamente com seu nome e URL alterado.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Figura 17: Adicionando Ícone no Componente Button

A figura a seguir representa o ícone escolhido para representar o botão Fechar.

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).

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.

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!