Análise e Projeto de Sistemas: Mockup de um Crud no Balsamiq

Nesta aula vamos aprender:
✓O que é um Mockup?
✓Conhecer o Balsamiq Mockups
✓Exemplo de Mockup de um Crud
✓Exercício: Locadora de Veículos

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:
✓Oqueé um Mockup?
✓ConheceroBalsamiqMockups
✓ExemplodeMockupdeumCrud
✓Exercício: Locadora de Veículos
www.tiago.blog.br
OBJETIVO: Conhecer o conceito de Mockupse a ferramenta BalsamiqMockups
2

3. O QUE É UM MOCKUP?

4. O QUE É UM MOCKUP?
•Um mockupou mock-up, é um modeloem 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.
Mockupssão usados por designers principalmente para
adquirirem um feedback dos usuários.
www.tiago.blog.br 4

5. CONHECENDO A FERRAMENTA BALSAMIQ

6. www.tiago.blog.br 6

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!

8. www.tiago.blog.br 8
Componente
selecionado
Propriedadesdo
Componente
selecionado.
Como é um botão,
pode-se clicar e ir para
outro mockup(tela)

9. EXEMPLODEUMCRUDSIMPLES

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
TextInput
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
datagridna tela
anterior, abre-se
a tela com
detalhes do
registro do
cliente.
Operação delete
do crud

19. EXERCÍCIO

20. EXERCÍCIO
•Faça o Mockupdo Exercício da prova (Locadora de Carros)
seguindo o exemplo. Localize a quantidade de Crudse desenvolva
cada uma das telas.
•Lembre-sequecadacrudproduz, no mínimo, 3 telas.
www.tiago.blog.br 20

21. OBRIGADO!
[email protected]
www.tiago.blog.br