Your SlideShare is downloading. ×
0
WIREFRAMES
Making Clients and Developers...
WIREFRAMES
Making Clients and Developers... Happy
NÃO ERA BEM ISTO QUE EU
       QUERIA ...
How the customer    What as         What the
   explained it    implemented   customer really
                            ...
O QUE SÃO
WIREFRAMES ?
               http://bit.ly/aEHOrC
WIRE + FRAME = ESQUELETO




O QUE SÃO
WIREFRAMES ?
                                  http://bit.ly/aEHOrC
ESTRUTURA
               ELEMENTOS
               RELEVÂNCIA PARA O TODO
               PASSOS DE UMA INTERAÇÃO


O QUE SÃ...
O QUE SÃO
WIREFRAMES ?
        http://bit.ly/9kceF3
O QUE SÃO
WIREFRAMES ?
        http://bit.ly/9kceF3
SIMPLICIDADE = MENOS TEMPO + FOCO



                             O QUE SÃO
                             WIREFRAMES ?
    ...
FUNCIONALIDADE
EXPERIMENTAR
EXPLORAR
INTERAGIR


                 O QUE SÃO
                 WIREFRAMES ?
                ...
IMPORTÂNCIA...



                 http://bit.ly/cuzjvW
COMEÇO
                          PRODUTO
IMPORTÂNCIA...   MELHOR
                          COLABORAÇÃO
                   ...
1. REQUISITOS




                http://bit.ly/9b5w3U
1. REQUISITOS


      WIREFRAMES = PENSAR = DESCOBERTA




                                         http://bit.ly/9b5w3U
2. PROBLEMAS
               http://bit.ly/gpXeF
QUANTO MAIS CEDO DETECTADOS,
               MENOR O SEU IMPACTO




2. PROBLEMAS
                                     http...
3. COLABORAÇÃO




                 http://bit.ly/aVax4V
3. COLABORAÇÃO

                 EQUIPA
                 TROCA DE IDEIAS

                 OBJECTIVOS COMUNS
             ...
3. COLABORAÇÃO


  O QUÊ + O QUANDO + PORQUÊ = SEM SURPRESAS




                                         http://bit.ly/aV...
4. CLIENTES FELIZES
4. CLIENTES FELIZES




               Users engage with UI mock-ups more
                       than any other sort of mo...
4. CLIENTES FELIZES




     FEEDBACK + “TESTES” = CAMINHO CERTO
5. PLANEAMENTO
SABER À PARTIDA
                 OS PROBLEMAS
5. PLANEAMENTO   PERMITE-NOS TOMAR
                 MELHOR DECISÕES
MAS NEM É TUDO POSITIVO...



                             http://bit.ly/c7cDit
6. NEGATIVOS
        http://bit.ly/boSw7B
CLIENTES QUE       TOSCAS
NÃO GOSTAM         ABSTRACTAS




               6. NEGATIVOS
                         http://bi...
CLIENTES QUE
                   CONTROLO
GOSTAM




               6. NEGATIVOS
                        http://bit.ly/boSw...
DIFÍCIL DE DEMONSTRAR INTERACÇÕES COMPLEXAS




                            6. NEGATIVOS
                                 ...
GOOD vs. EVIL

      REQUISITOS + PROBLEMAS + COLABORAÇÃO +
      PLANEAMENTO




      CLIENTES + COMPLEXIDADE
CRIAR WIREFRAMES




                  I used to bitch about not having

                                                 ...
PAPEL
PAPEL
PAPEL
PAPEL
Exemplo - Mini Loja
de música online
PAPEL
Exemplo - Mini Loja
de música online
PAPEL
Exemplo - Mini Loja
de música online
PAPEL
Exemplo - Mini Loja
de música online
PAPEL
Exemplo - Mini Loja
de música online
PAPEL
Exemplo - Mini Loja
de música online
Fireworks




BOXES


        OmniGraffle   Illustrator
BOXES
BOXES
BOXES
HIGH FIDELITY
                Photoshop   Pixelmator
HIGH FIDELITY
HIGH FIDELITY
HIGH FIDELITY
INTERACTIVE
SIMPLICIDADE
NAVEGAÇÃO PELAS PÁGINAS
PARTILHA DE ELEMENTOS
COMPORTAMENTOS COMPLEXOS
PARTILHA
FULL CYCLE
COMPARAÇÃO
                  RAPIDEZ   EQUIPA    CLIENTE




     PAPEL        +++++     +++++      +++


     BOXES      ...
CONCLUSÃO...



               http://bit.ly/9kMoKO
MELHOR COMEÇO
               SIMPLES
CONCLUSÃO...   RÁPIDA
               BARATA
               ELIMINAR PROBLEMAS




   ...
AND THAT’S WHY IT WILL
MAKE YOU AND OTHERS HAPPY
RODOLFO CALDEIRA
me@rodolfocaldeira.com




                         http...
Wireframes making clients and developers happy   ist
Wireframes making clients and developers happy   ist
Wireframes making clients and developers happy   ist
Upcoming SlideShare
Loading in...5
×

Wireframes making clients and developers happy ist

1,519

Published on

Why should we use wireframes and prototypes in an Agile Development environment.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,519
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframes making clients and developers happy ist"

  1. 1. WIREFRAMES Making Clients and Developers...
  2. 2. WIREFRAMES Making Clients and Developers... Happy
  3. 3. NÃO ERA BEM ISTO QUE EU QUERIA ...
  4. 4. How the customer What as What the explained it implemented customer really needed http://www.projectcartoon.com
  5. 5. O QUE SÃO WIREFRAMES ? http://bit.ly/aEHOrC
  6. 6. WIRE + FRAME = ESQUELETO O QUE SÃO WIREFRAMES ? http://bit.ly/aEHOrC
  7. 7. ESTRUTURA ELEMENTOS RELEVÂNCIA PARA O TODO PASSOS DE UMA INTERAÇÃO O QUE SÃO WIREFRAMES ? http://bit.ly/aEHOrC
  8. 8. O QUE SÃO WIREFRAMES ? http://bit.ly/9kceF3
  9. 9. O QUE SÃO WIREFRAMES ? http://bit.ly/9kceF3
  10. 10. SIMPLICIDADE = MENOS TEMPO + FOCO O QUE SÃO WIREFRAMES ? http://bit.ly/9kceF3
  11. 11. FUNCIONALIDADE EXPERIMENTAR EXPLORAR INTERAGIR O QUE SÃO WIREFRAMES ? http://bit.ly/9kceF3
  12. 12. IMPORTÂNCIA... http://bit.ly/cuzjvW
  13. 13. COMEÇO PRODUTO IMPORTÂNCIA... MELHOR COLABORAÇÃO COMUNICAÇÃO http://bit.ly/cuzjvW
  14. 14. 1. REQUISITOS http://bit.ly/9b5w3U
  15. 15. 1. REQUISITOS WIREFRAMES = PENSAR = DESCOBERTA http://bit.ly/9b5w3U
  16. 16. 2. PROBLEMAS http://bit.ly/gpXeF
  17. 17. QUANTO MAIS CEDO DETECTADOS, MENOR O SEU IMPACTO 2. PROBLEMAS http://bit.ly/gpXeF
  18. 18. 3. COLABORAÇÃO http://bit.ly/aVax4V
  19. 19. 3. COLABORAÇÃO EQUIPA TROCA DE IDEIAS OBJECTIVOS COMUNS COESÃO http://bit.ly/aVax4V
  20. 20. 3. COLABORAÇÃO O QUÊ + O QUANDO + PORQUÊ = SEM SURPRESAS http://bit.ly/aVax4V
  21. 21. 4. CLIENTES FELIZES
  22. 22. 4. CLIENTES FELIZES Users engage with UI mock-ups more than any other sort of model ” Harris Lloyd-Levy
  23. 23. 4. CLIENTES FELIZES FEEDBACK + “TESTES” = CAMINHO CERTO
  24. 24. 5. PLANEAMENTO
  25. 25. SABER À PARTIDA OS PROBLEMAS 5. PLANEAMENTO PERMITE-NOS TOMAR MELHOR DECISÕES
  26. 26. MAS NEM É TUDO POSITIVO... http://bit.ly/c7cDit
  27. 27. 6. NEGATIVOS http://bit.ly/boSw7B
  28. 28. CLIENTES QUE TOSCAS NÃO GOSTAM ABSTRACTAS 6. NEGATIVOS http://bit.ly/boSw7B
  29. 29. CLIENTES QUE CONTROLO GOSTAM 6. NEGATIVOS http://bit.ly/boSw7B
  30. 30. DIFÍCIL DE DEMONSTRAR INTERACÇÕES COMPLEXAS 6. NEGATIVOS http://bit.ly/boSw7B
  31. 31. GOOD vs. EVIL REQUISITOS + PROBLEMAS + COLABORAÇÃO + PLANEAMENTO CLIENTES + COMPLEXIDADE
  32. 32. CRIAR WIREFRAMES I used to bitch about not having ” good tools for wireframing in 1998 but now I am paralyzed by the choice Chris Risdon
  33. 33. PAPEL
  34. 34. PAPEL
  35. 35. PAPEL
  36. 36. PAPEL Exemplo - Mini Loja de música online
  37. 37. PAPEL Exemplo - Mini Loja de música online
  38. 38. PAPEL Exemplo - Mini Loja de música online
  39. 39. PAPEL Exemplo - Mini Loja de música online
  40. 40. PAPEL Exemplo - Mini Loja de música online
  41. 41. PAPEL Exemplo - Mini Loja de música online
  42. 42. Fireworks BOXES OmniGraffle Illustrator
  43. 43. BOXES
  44. 44. BOXES
  45. 45. BOXES
  46. 46. HIGH FIDELITY Photoshop Pixelmator
  47. 47. HIGH FIDELITY
  48. 48. HIGH FIDELITY
  49. 49. HIGH FIDELITY
  50. 50. INTERACTIVE
  51. 51. SIMPLICIDADE NAVEGAÇÃO PELAS PÁGINAS PARTILHA DE ELEMENTOS COMPORTAMENTOS COMPLEXOS PARTILHA
  52. 52. FULL CYCLE
  53. 53. COMPARAÇÃO RAPIDEZ EQUIPA CLIENTE PAPEL +++++ +++++ +++ BOXES +++ ++++ ++++ HIGH FIDELIDY BONITAS INTERACTIVE ++++ ++++ +++++ FULL CYCLE FUTURO
  54. 54. CONCLUSÃO... http://bit.ly/9kMoKO
  55. 55. MELHOR COMEÇO SIMPLES CONCLUSÃO... RÁPIDA BARATA ELIMINAR PROBLEMAS http://bit.ly/9kMoKO
  56. 56. AND THAT’S WHY IT WILL MAKE YOU AND OTHERS HAPPY RODOLFO CALDEIRA me@rodolfocaldeira.com http://www.opensoft.pt
  1. A particular slide catching your eye?

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

×