Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

25 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 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. 3. O QUE É UM MOCKUP?
  4. 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. 5. CONHECENDO A FERRAMENTA BALSAMIQ
  6. 6. www.tiago.blog.br 6
  7. 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. 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. 9. EXEMPLO DE UM CRUD SIMPLES
  10. 10. EXEMPLO DE UM CRUD SIMPES: LOGIN www.tiago.blog.br 10
  11. 11. EXEMPLO DE UM CRUD SIMPES: LOGIN www.tiago.blog.br 11 Container Window Fieldset Image Label Text Input Checkbox
  12. 12. EXEMPLO DE UM CRUD SIMPES: RECUPERAÇÃO DA SENHA www.tiago.blog.br 12
  13. 13. EXEMPLO DE UM CRUD SIMPES: TELA INICIAL www.tiago.blog.br 13 Menu Bar
  14. 14. EXEMPLO DE UM CRUD SIMPES: COM MENU BAR www.tiago.blog.br 14 Menu
  15. 15. EXEMPLO DE UM CRUD SIMPES: CADASTRO DE CLIENTE www.tiago.blog.br 15 Date Chooser Combo box
  16. 16. EXEMPLO DE UM CRUD SIMPES: LISTAR CLIENTE www.tiago.blog.br 16 Datagrid
  17. 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. 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. 19. EXERCÍCIO
  20. 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. 21. OBRIGADO! tiago@tiago.blog.br www.tiago.blog.br

×