Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Bernard De LunaPublicitário, 27 anosCariocaEspecialista em Design Funcional e Front-endCoordenador Front-endwww.bernarddel...
Metódico como designer?www.bernarddeluna.com   @bernarddeluna
Pela última vez, arte, estética,   desenho, ilustração não são a      mesma coisa que design.www.bernarddeluna.com        ...
Ideal artístico x Ideal de engenharia       O ideal artístico de expressar-se e o ideal da engenharia de       resolver um...
O absurdo de planejar o tiro municiando a     arma, sem antes identificar o alvo. Até porque        o alvo é que determina...
Research
A good designer may not have all the answers,           but he knows which questions to ask.                              ...
Apresentação       • Peça para ser apresentado ao projeto, deixe seu cliente          contar tudo sobre a ideia do aplicat...
Identifique a arena       • Pesquise concorrentes diretos e indiretos       • Documente o aplicativo dos concorrentes com ...
Entrevistas       • Após ler a documentação, prepare-se para criar uma          pauta para entrevistas       • Defina os “...
http://www.youtube.com/watch?v=XlcDtCX-GwEwww.bernarddeluna.com                                     @bernarddeluna
Brainstormizando                          25 minutoswww.bernarddeluna.com                  @bernarddeluna
Brainstormizando                          50  ideiaswww.bernarddeluna.com                  @bernarddeluna
Cuidado com o brainstormingwww.bernarddeluna.com          @bernarddeluna
O opinião do seu cliente tem     A MESMA IMPORTÂNCIA    que qualquer outro empregadowww.bernarddeluna.com         @bernard...
Em uma cultura inovativa, todo mundo se         sente capaz de falar e vão falar muito.         Em uma cultura não-inovati...
Personas
Se eu perguntasse para os meus clientes         o que eles desejavam, eles diriam:         um cavalo mais veloz           ...
As pessoas não sabem o que querem até         você mostrar a elas                                           Steve Jobswww....
Postura reativa x Postura proativa                                      Horácio Soares Netowww.bernarddeluna.com          ...
Centro de Informações de Novos negócioswww.bernarddeluna.com                                     @bernarddeluna
CASE: Centro de Informações de Novos negócioswww.bernarddeluna.com                                   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Goal first           Then Behaviorwww.bernarddeluna.com   @bernarddeluna
Concept
salão   Campo                                                       Society                            Kart             Pa...
www.bernarddeluna.com   @bernarddeluna
http://www.youtube.com/watch?v=NugRZGDbPFUwww.bernarddeluna.com                                     @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
ideia         vendas                    sketch                        produçãowww.bernarddeluna.com                 @berna...
Here’s the world’s worst idea for a movie:         Titanic. It did okay at the box office                                 ...
www.bernarddeluna.com   @bernarddeluna
Sketchiando...                              10 minutoswww.bernarddeluna.com                      @bernarddeluna
Sketchiando...                             boxing                             glovewww.bernarddeluna.com                  ...
Requirements
www.bernarddeluna.com   @bernarddeluna
Levantamento de requisitos                                            Imp. para o   Imp. para o   Viabilidade  Requisito  ...
Priorização de requisitos       Alta prioridade (HP)       Média prioridade (MP)       Baixa prioridade (LP)www.bernarddel...
Se você não conseguiu identificar o CORE             do seu aplicativo, algo está errado.            Experimente o conceit...
Fluxo da aplicação       • Validar cenários e personas       • Destacar “user goals”       • Identificar buracos       • M...
Facilitando o fluxo     static             dynamic   future      cluster                                           Box and...
wireframes
SKETCH   IDEIA      WIREFRAME            USABILIDADEwww.bernarddeluna.com              @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Comece pelo seu CORE (epicenter design).www.bernarddeluna.com                       @bernarddeluna
Foco na estruturawww.bernarddeluna.com                  @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Foco na interaçãowww.bernarddeluna.com              @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Saiba como utilizar as heurísticas.         Se preferir crie suas próprias Heurísticaswww.bernarddeluna.com               ...
http://jordisan.net/blog/2011/psychological-usability-heuristicswww.bernarddeluna.com                                     ...
3 simple   ux questions                    3 simples perguntas de uxwww.bernarddeluna.com                           @berna...
Can I use it?                        Consigo usá-lo?www.bernarddeluna.com                     @bernarddeluna
Should I use it?                        Devo usá-lo?www.bernarddeluna.com                  @bernarddeluna
Do I want to use it?                        Desejo usá-lo?www.bernarddeluna.com                    @bernarddeluna
Não se esqueça da Memóriawww.bernarddeluna.com         @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Eae?www.bernarddeluna.com          @bernarddeluna
1. Ball – Bola       2. Eraser – Borracha       3. Rat – Rato       4. Notebook       5. Anchor – Âncora       6. Rope – C...
1. Ball – Bola       2. Eraser – Borracha       3. Rat – Rato       4. Notebook       5. Anchor – Âncora       6. Rope – C...
Ícones são traiçoeiroswww.bernarddeluna.com                      @bernarddeluna
Teste o seu wireframewww.bernarddeluna.com                    @bernarddeluna
Sexy projects
Wireframe de                        compras coletivaswww.bernarddeluna.com         @bernarddeluna
>50%     já se inscreveram                         42%                          já realizaram                             ...
Wireframe de compra coletiva SEXYwww.bernarddeluna.com                                 @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Blank Slatewww.bernarddeluna.com                 @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Que tal uma página                     de erro assim?www.bernarddeluna.com                   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
www.bernarddeluna.com   @bernarddeluna
Não importa o seu negócio,             usuário, budget, ou tempowww.bernarddeluna.com               @bernarddeluna
nunca se esqueçawww.bernarddeluna.com                      @bernarddeluna
Seja Sexy@bernarddeluna
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
Upcoming SlideShare
Loading in...5
×

Planejamento de um wireframe orientado para aplicativos

7,754

Published on

Minha palestra sobre Planejamento de um wireframe orientado para aplicativos no iMaster Intercon 2011

Published in: Design
2 Comments
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,754
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
159
Comments
2
Likes
44
Embeds 0
No embeds

No notes for slide

Planejamento de um wireframe orientado para aplicativos

  1. 1. Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
  2. 2. Bernard De LunaPublicitário, 27 anosCariocaEspecialista em Design Funcional e Front-endCoordenador Front-endwww.bernarddeluna.comwww.bernarddeluna.com/blog@bernarddeluna
  3. 3. Metódico como designer?www.bernarddeluna.com @bernarddeluna
  4. 4. Pela última vez, arte, estética, desenho, ilustração não são a mesma coisa que design.www.bernarddeluna.com @bernarddeluna
  5. 5. Ideal artístico x Ideal de engenharia O ideal artístico de expressar-se e o ideal da engenharia de resolver um problema para o cliente. Este livro coloca-se firmemente ao lado da engenharia. Embora eu reconheça que haja necessidade de arte, alegria e diversão na Web, acredito que o principal objetivo da maioria dos projetos da web seja facilitar aos clientes o desempenho de tarefas úteis Jakob Nielsen - Designing web usability: The practice of simplicity.www.bernarddeluna.com @bernarddeluna
  6. 6. O absurdo de planejar o tiro municiando a arma, sem antes identificar o alvo. Até porque o alvo é que determina a escolha da arma. O tiro e o alvo – Horácio Soares Netowww.bernarddeluna.com @bernarddeluna
  7. 7. Research
  8. 8. A good designer may not have all the answers, but he knows which questions to ask. Rudy Dukewww.bernarddeluna.com @bernarddeluna
  9. 9. Apresentação • Peça para ser apresentado ao projeto, deixe seu cliente contar tudo sobre a ideia do aplicativo. • O aplicativo precisa ser documentada por escrito. • Não permita que sua reunião demore mais de 40 minutos.www.bernarddeluna.com @bernarddeluna
  10. 10. Identifique a arena • Pesquise concorrentes diretos e indiretos • Documente o aplicativo dos concorrentes com base na documentação do seu cliente • Identifique os pontos de seus clientes (positivos e negativos)www.bernarddeluna.com @bernarddeluna
  11. 11. Entrevistas • Após ler a documentação, prepare-se para criar uma pauta para entrevistas • Defina os “Stakeholders” e entreviste-os. • Entreviste usuários (internos ou não).www.bernarddeluna.com @bernarddeluna
  12. 12. http://www.youtube.com/watch?v=XlcDtCX-GwEwww.bernarddeluna.com @bernarddeluna
  13. 13. Brainstormizando 25 minutoswww.bernarddeluna.com @bernarddeluna
  14. 14. Brainstormizando 50 ideiaswww.bernarddeluna.com @bernarddeluna
  15. 15. Cuidado com o brainstormingwww.bernarddeluna.com @bernarddeluna
  16. 16. O opinião do seu cliente tem A MESMA IMPORTÂNCIA que qualquer outro empregadowww.bernarddeluna.com @bernarddeluna
  17. 17. Em uma cultura inovativa, todo mundo se sente capaz de falar e vão falar muito. Em uma cultura não-inovativa, o chefe fala o tempo todo. David Kelley, IDEOwww.bernarddeluna.com @bernarddeluna
  18. 18. Personas
  19. 19. Se eu perguntasse para os meus clientes o que eles desejavam, eles diriam: um cavalo mais veloz Henry Fordwww.bernarddeluna.com @bernarddeluna
  20. 20. As pessoas não sabem o que querem até você mostrar a elas Steve Jobswww.bernarddeluna.com @bernarddeluna
  21. 21. Postura reativa x Postura proativa Horácio Soares Netowww.bernarddeluna.com @bernarddeluna
  22. 22. Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna
  23. 23. CASE: Centro de Informações de Novos negócioswww.bernarddeluna.com @bernarddeluna
  24. 24. www.bernarddeluna.com @bernarddeluna
  25. 25. www.bernarddeluna.com @bernarddeluna
  26. 26. www.bernarddeluna.com @bernarddeluna
  27. 27. www.bernarddeluna.com @bernarddeluna
  28. 28. www.bernarddeluna.com @bernarddeluna
  29. 29. www.bernarddeluna.com @bernarddeluna
  30. 30. www.bernarddeluna.com @bernarddeluna
  31. 31. Goal first Then Behaviorwww.bernarddeluna.com @bernarddeluna
  32. 32. Concept
  33. 33. salão Campo Society Kart Paintball Futebol Voleibol JogadaCerta Tênis Basquetebol Videogame Cartaswww.bernarddeluna.com @bernarddeluna
  34. 34. www.bernarddeluna.com @bernarddeluna
  35. 35. http://www.youtube.com/watch?v=NugRZGDbPFUwww.bernarddeluna.com @bernarddeluna
  36. 36. www.bernarddeluna.com @bernarddeluna
  37. 37. www.bernarddeluna.com @bernarddeluna
  38. 38. www.bernarddeluna.com @bernarddeluna
  39. 39. www.bernarddeluna.com @bernarddeluna
  40. 40. ideia vendas sketch produçãowww.bernarddeluna.com @bernarddeluna
  41. 41. Here’s the world’s worst idea for a movie: Titanic. It did okay at the box office Scott Adamswww.bernarddeluna.com @bernarddeluna
  42. 42. www.bernarddeluna.com @bernarddeluna
  43. 43. Sketchiando... 10 minutoswww.bernarddeluna.com @bernarddeluna
  44. 44. Sketchiando... boxing glovewww.bernarddeluna.com @bernarddeluna
  45. 45. Requirements
  46. 46. www.bernarddeluna.com @bernarddeluna
  47. 47. Levantamento de requisitos Imp. para o Imp. para o Viabilidade Requisito Descrição Comentários negócio usuário Técnica Usuários devem colocar login/ senha para acessar a Formulário plataforma. No caso de não High High Low de Login lembrarem a senha, deve haver opção para reset password por email.www.bernarddeluna.com @bernarddeluna
  48. 48. Priorização de requisitos Alta prioridade (HP) Média prioridade (MP) Baixa prioridade (LP)www.bernarddeluna.com @bernarddeluna
  49. 49. Se você não conseguiu identificar o CORE do seu aplicativo, algo está errado. Experimente o conceito “mobile first”www.bernarddeluna.com @bernarddeluna
  50. 50. Fluxo da aplicação • Validar cenários e personas • Destacar “user goals” • Identificar buracos • Mapear seu aplicativo • Documentar interações • Reconhecer o coração da sua aplicaçãowww.bernarddeluna.com @bernarddeluna
  51. 51. Facilitando o fluxo static dynamic future cluster Box and arrowswww.bernarddeluna.com @bernarddeluna
  52. 52. wireframes
  53. 53. SKETCH IDEIA WIREFRAME USABILIDADEwww.bernarddeluna.com @bernarddeluna
  54. 54. www.bernarddeluna.com @bernarddeluna
  55. 55. www.bernarddeluna.com @bernarddeluna
  56. 56. www.bernarddeluna.com @bernarddeluna
  57. 57. Comece pelo seu CORE (epicenter design).www.bernarddeluna.com @bernarddeluna
  58. 58. Foco na estruturawww.bernarddeluna.com @bernarddeluna
  59. 59. www.bernarddeluna.com @bernarddeluna
  60. 60. Foco na interaçãowww.bernarddeluna.com @bernarddeluna
  61. 61. www.bernarddeluna.com @bernarddeluna
  62. 62. www.bernarddeluna.com @bernarddeluna
  63. 63. Saiba como utilizar as heurísticas. Se preferir crie suas próprias Heurísticaswww.bernarddeluna.com @bernarddeluna
  64. 64. http://jordisan.net/blog/2011/psychological-usability-heuristicswww.bernarddeluna.com @bernarddeluna
  65. 65. 3 simple ux questions 3 simples perguntas de uxwww.bernarddeluna.com @bernarddeluna
  66. 66. Can I use it? Consigo usá-lo?www.bernarddeluna.com @bernarddeluna
  67. 67. Should I use it? Devo usá-lo?www.bernarddeluna.com @bernarddeluna
  68. 68. Do I want to use it? Desejo usá-lo?www.bernarddeluna.com @bernarddeluna
  69. 69. Não se esqueça da Memóriawww.bernarddeluna.com @bernarddeluna
  70. 70. www.bernarddeluna.com @bernarddeluna
  71. 71. www.bernarddeluna.com @bernarddeluna
  72. 72. www.bernarddeluna.com @bernarddeluna
  73. 73. www.bernarddeluna.com @bernarddeluna
  74. 74. www.bernarddeluna.com @bernarddeluna
  75. 75. www.bernarddeluna.com @bernarddeluna
  76. 76. www.bernarddeluna.com @bernarddeluna
  77. 77. www.bernarddeluna.com @bernarddeluna
  78. 78. www.bernarddeluna.com @bernarddeluna
  79. 79. www.bernarddeluna.com @bernarddeluna
  80. 80. www.bernarddeluna.com @bernarddeluna
  81. 81. Eae?www.bernarddeluna.com @bernarddeluna
  82. 82. 1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batomwww.bernarddeluna.com @bernarddeluna
  83. 83. 1. Ball – Bola 2. Eraser – Borracha 3. Rat – Rato 4. Notebook 5. Anchor – Âncora 6. Rope – Corda 7. Dog – Cão 8. Dice – Dado 9. Elephant – Elefante 10. Lipstick - Batomwww.bernarddeluna.com @bernarddeluna
  84. 84. Ícones são traiçoeiroswww.bernarddeluna.com @bernarddeluna
  85. 85. Teste o seu wireframewww.bernarddeluna.com @bernarddeluna
  86. 86. Sexy projects
  87. 87. Wireframe de compras coletivaswww.bernarddeluna.com @bernarddeluna
  88. 88. >50% já se inscreveram 42% já realizaram compras 300% Aumento de impulsivoswww.bernarddeluna.com @bernarddeluna
  89. 89. Wireframe de compra coletiva SEXYwww.bernarddeluna.com @bernarddeluna
  90. 90. www.bernarddeluna.com @bernarddeluna
  91. 91. Blank Slatewww.bernarddeluna.com @bernarddeluna
  92. 92. www.bernarddeluna.com @bernarddeluna
  93. 93. www.bernarddeluna.com @bernarddeluna
  94. 94. Que tal uma página de erro assim?www.bernarddeluna.com @bernarddeluna
  95. 95. www.bernarddeluna.com @bernarddeluna
  96. 96. www.bernarddeluna.com @bernarddeluna
  97. 97. www.bernarddeluna.com @bernarddeluna
  98. 98. www.bernarddeluna.com @bernarddeluna
  99. 99. www.bernarddeluna.com @bernarddeluna
  100. 100. www.bernarddeluna.com @bernarddeluna
  101. 101. www.bernarddeluna.com @bernarddeluna
  102. 102. Não importa o seu negócio, usuário, budget, ou tempowww.bernarddeluna.com @bernarddeluna
  103. 103. nunca se esqueçawww.bernarddeluna.com @bernarddeluna
  104. 104. Seja Sexy@bernarddeluna
  1. A particular slide catching your eye?

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

×