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:
✓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

3. O QUE É UM MOCKUP?

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

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
Propriedades do
Componente
selecionado.
Como é um botão,
pode-se clicar e ir para
outro mockup (tela)

9. EXEMPLO DE UM CRUD SIMPLES

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

19. EXERCÍCIO

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

21. OBRIGADO!
tiago@tiago.blog.br
www.tiago.blog.br