aula 05/08                   Projetando a interface                                 Prototipação rápida                   ...
Plano de curso       1ª          Apresentação do curso, aquecimento e posicionamento teórico       -       2ª          CMS...
recapitulando..Monday, October 24, 2011
Nome, Idade                                                                            Papel            Personas ágeis    ...
Personas ágeis  1o passo: Determinar tipos de usuários  2o passo: Listar características de cada tipo  3o passo: Determina...
Questionários Ciclo de vida do produto          rking             entrevistas                                          e  ...
Prototipação                           quebrando ovos para fazer omeletesMonday, October 24, 2011
Protótipo ~ modelo                     =Monday, October 24, 2011
lembrando...                                 Modelos           São ferramentas simples e poderosas para            melhora...
Podem ser de baixa ou alta resolução               Baixa: Para explorar ideias, conceitos, fluxos                         ...
“Devemos criar exatamente quanta          documentação necessitamos para       executar bem um projeto, e não mais.”      ...
Nós <3 PAPEL!  • Nada digital é mais rápido, flexível e fácil de prototipar  • Não requer habilidades específicas  • É mai...
Cenário           “São protótipos feitos de palavras”         • Os protagonistas são as PERSONAS         • Devem refletir ...
Cenário          Uma imagem vale mil palavras.          Mas as palavras certas podem valer algumas boas imagens.          ...
TO DO          DONE                           EM GRUPO!              Criar um cenário (primeiro uso ou              tarefa...
RascunhosMonday, October 24, 2011
Rascunhos    • Ideias primárias, generalistas, fluxos.    • São feios! estimulam a discussão sobre função e usoMonday, Oct...
StoryboardsMonday, October 24, 2011
Storyboards             Técnica da publicidade, HQs e cinema, que ilustra                          interações complexasMon...
Storyboards    • Imagens + legendas    • Ilustram fluxos, momentos chave    • Casos de uso    • Mostram ambientes e contex...
WireframesMonday, October 24, 2011
Wireframes                protótipos estruturais do sistemaMonday, October 24, 2011
Wireframes                protótipos estruturais do sistema                 Registram as funcionalidades do produto, seus ...
Wireframes                protótipos estruturais do sistema                 Registram as funcionalidades do produto, seus ...
Wireframes                protótipos estruturais do sistema                 Registram as funcionalidades do produto, seus ...
Wireframes            Substituem documentos mais burocráticos, são            especificações visuais comprometidas com:   ...
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
papel=desapegoMonday, October 24, 2011
Monday, October 24, 2011
Monday, October 24, 2011
Prototipando e testando lo fi            http://www.youtube.com/watch?v=k9mTvt0LXgkMonday, October 24, 2011
wireoutsMonday, October 24, 2011
layoutsMonday, October 24, 2011
EM                                    G                              Prot RUPO!                                   o       ...
igad o!                           o br                                  Este arquivo contém a apresentação realizada por M...
Upcoming SlideShare
Loading in...5
×

PUC/PFC - Prototipação

674

Published on

Aula para a disciplina Produção e Ferramentas Colaborativas

Pós-Graduação em Produção em Mídias Digitais

Prof. Marcello de Campos Cardoso
www.mcardoso.com.br
2o semestre de 2011

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
674
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PUC/PFC - Prototipação

  1. 1. aula 05/08 Projetando a interface Prototipação rápida Produção e Ferramentas Colaborativas IEC - INSTITUTO DE Pós-Graduação em Produção em Mídias Digitais EDUCAÇÃO CONTINUADA Marcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.comMonday, October 24, 2011
  2. 2. Plano de curso 1ª Apresentação do curso, aquecimento e posicionamento teórico - 2ª CMS + Social Media 10pts 3ª Conversando com usuários: Questionários e entrevistas 15pts 4ª Técnica de Modelagem: Personas ágeis 15pts 5ª Projetando a interface: Prototipação rápida em papel 20pts 6ª Criando seu blog no Wordpress - 7ª Implantação do blog 15pts 8ª Apresentação final 25ptsMonday, October 24, 2011
  3. 3. recapitulando..Monday, October 24, 2011
  4. 4. Nome, Idade Papel Personas ágeis descrição, frase emblemática Técnica para a definição de Necessidades no mundo Tarefas no sistema modelos de usuários do sistema, real para necessidades no intuito de melhorar a visibilidade, compreensão e comunicação sobre seu comportamento de uso. Auxilia no levantamento de user stories.Monday, October 24, 2011
  5. 5. Personas ágeis 1o passo: Determinar tipos de usuários 2o passo: Listar características de cada tipo 3o passo: Determinar usuários focaisMonday, October 24, 2011
  6. 6. Questionários Ciclo de vida do produto rking entrevistas e chma Ben to jam isa to en o ne qu çã en lvim pla pes lida vo sen va de Stor map y rototipação ping onas p persMonday, October 24, 2011
  7. 7. Prototipação quebrando ovos para fazer omeletesMonday, October 24, 2011
  8. 8. Protótipo ~ modelo =Monday, October 24, 2011
  9. 9. lembrando... Modelos São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações.Monday, October 24, 2011
  10. 10. Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuaisMonday, October 24, 2011
  11. 11. “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan SafferMonday, October 24, 2011
  12. 12. Nós <3 PAPEL! • Nada digital é mais rápido, flexível e fácil de prototipar • Não requer habilidades específicas • É mais barato e colaborativo; • Variedade = possibilidades: Diferentes cores, tamanhos, texturas, adesivos... • Tamanho é documento (difícil ter um monitor do tamanho de uma cartolina) • Estimula desapego • Reciclável, divertido, estimula a equipeMonday, October 24, 2011
  13. 13. Cenário “São protótipos feitos de palavras” • Os protagonistas são as PERSONAS • Devem refletir comportamento no sistema • Uma boa prática é passar diferentes personas pelo mesmo cenário • Um bom cenário é imaginar o primeiro usoMonday, October 24, 2011
  14. 14. Cenário Uma imagem vale mil palavras. Mas as palavras certas podem valer algumas boas imagens. Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e decide usá-lo de novo para esta semana. Remove alguns itens arrastando-os de sua Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no botão Entrega rápida e confirma o débito em seu cartão de crédito previamente salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas.Monday, October 24, 2011
  15. 15. TO DO DONE EM GRUPO! Criar um cenário (primeiro uso ou tarefa chave) e aplicá-lo em sua Persona Focal. ANOTAR PARA MANDAR POR EMAIL. tempo: 15’Monday, October 24, 2011
  16. 16. RascunhosMonday, October 24, 2011
  17. 17. Rascunhos • Ideias primárias, generalistas, fluxos. • São feios! estimulam a discussão sobre função e usoMonday, October 24, 2011
  18. 18. StoryboardsMonday, October 24, 2011
  19. 19. Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexasMonday, October 24, 2011
  20. 20. Storyboards • Imagens + legendas • Ilustram fluxos, momentos chave • Casos de uso • Mostram ambientes e contextos • Complementam wireframesMonday, October 24, 2011
  21. 21. WireframesMonday, October 24, 2011
  22. 22. Wireframes protótipos estruturais do sistemaMonday, October 24, 2011
  23. 23. Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)Monday, October 24, 2011
  24. 24. Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Podem ser usados para validar ideiasMonday, October 24, 2011
  25. 25. Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Podem ser usados para validar ideias Podem ser usados para testes com usuáriosMonday, October 24, 2011
  26. 26. Wireframes Substituem documentos mais burocráticos, são especificações visuais comprometidas com: • Estrutura • Arquitetura da informação • Controles (padrões de interação) • ConteúdoMonday, October 24, 2011
  27. 27. Monday, October 24, 2011
  28. 28. Monday, October 24, 2011
  29. 29. Monday, October 24, 2011
  30. 30. Monday, October 24, 2011
  31. 31. Monday, October 24, 2011
  32. 32. Monday, October 24, 2011
  33. 33. papel=desapegoMonday, October 24, 2011
  34. 34. Monday, October 24, 2011
  35. 35. Monday, October 24, 2011
  36. 36. Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgkMonday, October 24, 2011
  37. 37. wireoutsMonday, October 24, 2011
  38. 38. layoutsMonday, October 24, 2011
  39. 39. EM G Prot RUPO! o rasc tipar e unho m c s, ou ima tem refin dos po: r á-lo esto s da a ula os é ágil, podem Lembre m que isso . foi decidido udar o que = CAOS! m I DEAÇÃOMonday, October 24, 2011
  40. 40. igad o! o br Este arquivo contém a apresentação realizada por Marcello de Campos Cardoso, em Outubro de 2011, para a disciplina Produção e Ferramentas Colaborativas, ministrada no curso de especialização em Mídias Digitais Internet na PUC Minas.Monday, October 24, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×