Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq
1. MOCKUP DE CRUD COM BALSAMIQ
Prof. Me. Tiago A. Silva
VERSÃO 2019
www.tiago.blog.br
ANÁLISE DE PROJETO DE SISTEMAS
2. PLANO DE AULA
▪ Nesta aula vamos aprender:
✓O que é um Mockup?
✓Conhecer o Balsamiq Mockups
✓Exemplo de Mockup de um Crud
✓Exercício: Locadora de Veículos
www.tiago.blog.br
OBJETIVO: Conhecer o conceito de Mockups e a ferramenta Balsamiq Mockups
2
4. O QUE É UM MOCKUP?
• Um mockup ou mock-up, é um modelo em escala ou de tamanho
real de um projeto ou dispositivo, usado para ensino,
demonstração, avaliação de design, promoção e outros
propósitos.
• Um mockup é um protótipo se ele fornece pelo menos parte da
funcionalidade de um sistema e permite o teste de um projeto.
Mockups são usados por designers principalmente para
adquirirem um feedback dos usuários.
www.tiago.blog.br 4
7. www.tiago.blog.br 7
A estrutura do Balsamiq é parecida com a do
Microsoft Power Point. O objetivo é o
mesmo: apresentar a ideia a alguém!
Há uma palheta de
componentes, é só
clicar e arrastar!
10. EXEMPLO DE UM CRUD SIMPES: LOGIN
www.tiago.blog.br 10
11. EXEMPLO DE UM CRUD SIMPES: LOGIN
www.tiago.blog.br 11
Container
Window
Fieldset
Image
Label
Text Input
Checkbox
12. EXEMPLO DE UM CRUD SIMPES: RECUPERAÇÃO DA
SENHA
www.tiago.blog.br 12
13. EXEMPLO DE UM CRUD SIMPES: TELA INICIAL
www.tiago.blog.br 13
Menu Bar
14. EXEMPLO DE UM CRUD SIMPES: COM MENU BAR
www.tiago.blog.br 14
Menu
15. EXEMPLO DE UM CRUD SIMPES: CADASTRO DE
CLIENTE
www.tiago.blog.br 15
Date Chooser
Combo box
16. EXEMPLO DE UM CRUD SIMPES: LISTAR CLIENTE
www.tiago.blog.br 16
Datagrid
17. EXEMPLO DE UM CRUD SIMPES: LISTAR CLIENTE
www.tiago.blog.br 17
Note as 4
colunas
separadas por
vírgulas
Esta linha é um
link para outra
tela Veja que todas as linhas
tem 4 informações
separadas por vírculas.
18. EXEMPLO DE UM CRUD SIMPES: DETALHES
www.tiago.blog.br 18
Após clicar na
linha do
datagrid na tela
anterior, abre-se
a tela com
detalhes do
registro do
cliente.
Operação delete
do crud
20. EXERCÍCIO
• Faça o Mockup do Exercício da prova (Locadora de Carros)
seguindo o exemplo. Localize a quantidade de Cruds e desenvolva
cada uma das telas.
• Lembre-se que cada crud produz, no mínimo, 3 telas.
www.tiago.blog.br 20