O Design e a Interface no
   mundo da programação
                                 ... ou “Como acabar com as guerras civi...
Uma (breve) introdução
@shiota:
3 anos de Ciência da Computação
[quase]   Formado em Design
Trabalha com Front-end, UX e Design
Irmão do @shadow1...
Problema
      O desenvolvimento de um produto é
prejudicado por conflitos e falta de comunicação
       entre design, fron...
Objetivo
Identificar papéis e obrigações de cada um,
unificar o time e estabelecer uma metologia
       eficiente de desenvol...
história da Interwebz   como consertar?   como continuar?   exemplos
História da Interwebz
 Como as interfaces evoluíram e os papéis mudaram
história da Interwebz          como consertar?          como continuar?           exemplos




  1991      1996        199...
história da Interwebz          como consertar?          como continuar?           exemplos




1991
   Primeira página HTM...
história da Interwebz          como consertar?          como continuar?           exemplos




1996

   Entrada das empres...
história da Interwebz          como consertar?          como continuar?               exemplos




1996




              ...
história da Interwebz          como consertar?          como continuar?                exemplos




1996
Designers        ...
história da Interwebz          como consertar?          como continuar?           exemplos




1998

   HTML 4.0
   CSS 1
...
história da Interwebz          como consertar?          como continuar?               exemplos




1998




              ...
história da Interwebz          como consertar?          como continuar?                exemplos




1998
Designers        ...
história da Interwebz          como consertar?          como continuar?           exemplos




1999


   Explosão “ponto-c...
história da Interwebz          como consertar?          como continuar?                     exemplos




1999




        ...
história da Interwebz          como consertar?          como continuar?           exemplos




2000~2002


   Redesign das...
história da Interwebz          como consertar?          como continuar?                     exemplos




2000~2002




   ...
história da Interwebz          como consertar?             como continuar?                 exemplos




2000~2002
Designer...
história da Interwebz          como consertar?          como continuar?           exemplos




2003


   CSS Zen Garden
  ...
história da Interwebz          como consertar?          como continuar?           exemplos




2005


   YouTube
   Orkut
...
história da Interwebz          como consertar?          como continuar?           exemplos




2006


   Moda “Web 2.0”
  ...
história da Interwebz          como consertar?          como continuar?           exemplos




2007


   iPhone
   Ruby on...
história da Interwebz          como consertar?          como continuar?           exemplos




2009

   Explosão do mercad...
história da Interwebz          como consertar?          como continuar?           exemplos




2010


   Crescimento do HT...
história da Interwebz          como consertar?          como continuar?              exemplos




2010




               ...
história da Interwebz          como consertar?            como continuar?                exemplos




2010
Designers      ...
Como consertar?
Identificando os problemas de comunicação
e conflitos entre as áreas, e solucionando-os
história da Interwebz      como consertar?   como continuar?        exemplos




O Problema
                              ...
história da Interwebz             como consertar?           como continuar?                 exemplos




O Problema
Design...
história da Interwebz        como consertar?   como continuar?       exemplos




A Solução


                          Ma...
história da Interwebz   como consertar?   como continuar?   exemplos




A Solução

   Um único time: Design + Front-end +...
história da Interwebz            como consertar?            como continuar?                 exemplos




A Solução
Designe...
história da Interwebz   como consertar?   como continuar?   exemplos




A Solução




       Fim do egocentrismo na própr...
história da Interwebz   como consertar?    como continuar?    exemplos




A Solução

                           “Eu não v...
Como continuar?
Sugestões de workflows e organização para manter
      a equipe sincronizada e funcionando
história da Interwebz   como consertar?   como continuar?   exemplos




                           1. Wireframes
história da Interwebz   como consertar?   como continuar?                  exemplos




1. Wireframes




                ...
história da Interwebz   como consertar?   como continuar?   exemplos




1. Wireframes
   Documentam as features (e desejo...
história da Interwebz   como consertar?   como continuar?               exemplos




2. Meetings




                     ...
história da Interwebz   como consertar?   como continuar?   exemplos




2. Meetings


   Daily meetings, plannings, revie...
história da Interwebz   como consertar?   como continuar?   exemplos




                             3. Tech talks
história da Interwebz   como consertar?   como continuar?                      exemplos




3. Tech talks




            ...
história da Interwebz   como consertar?   como continuar?   exemplos




3. Tech talks


   Compartilha o conhecimento ent...
história da Interwebz   como consertar?   como continuar?   exemplos




                              4. Work ow
história da Interwebz   como consertar?   como continuar?   exemplos




4. Work ow (Scrum)

   O wireframe de cada histór...
história da Interwebz             como consertar?                       como continuar?                      exemplos




...
Exemplos
O que deu certo e o que deu errado
Recapitulando...
Recapitulando...



Design: Protótipos, Wireframes, Arquitetura, UX, Arte

Back-end: Sistema, oferece toda a funcionalidad...
Recapitulando...

Design, front e back-end devem formar um único time

Todos devem compartilhar conhecimentos e acabar
com...
Recapitulando...

Wireframes: devem ser feitos com antecedência, ajudam
(muito) a mapear funcionalidades e fazer estimativ...
Obrigado!
Eduardo Shiota Yasuda - @shiota
          contato@eshiota.com
             www.eshiota.com
Upcoming SlideShare
Loading in …5
×

O Design e a Interface no mundo da Programação

3,384 views
3,260 views

Published on

O desenvolvimento de um produto é constantemente prejudicado por conflitos e falta de comunicação entre design, front-end e back-end. Como acabar com esta guerra civil e como manter o time unido?

Nesta apresentação, conto um pouco da História da Internet no aspecto das três áreas, quais os problemas e comunicação, como solucioná-los e como manter a equipe funcionando.

Published in: Technology

O Design e a Interface no mundo da Programação

  1. 1. O Design e a Interface no mundo da programação ... ou “Como acabar com as guerras civis no desenvolvimento de um produto” Eduardo Shiota Yasuda | Dev in Sampa 2010 | 15.08.2010
  2. 2. Uma (breve) introdução
  3. 3. @shiota: 3 anos de Ciência da Computação [quase] Formado em Design Trabalha com Front-end, UX e Design Irmão do @shadow11 - back-end jedi developer
  4. 4. Problema O desenvolvimento de um produto é prejudicado por conflitos e falta de comunicação entre design, front-end e back-end
  5. 5. Objetivo Identificar papéis e obrigações de cada um, unificar o time e estabelecer uma metologia eficiente de desenvolvimento
  6. 6. história da Interwebz como consertar? como continuar? exemplos
  7. 7. História da Interwebz Como as interfaces evoluíram e os papéis mudaram
  8. 8. história da Interwebz como consertar? como continuar? exemplos 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  9. 9. história da Interwebz como consertar? como continuar? exemplos 1991 Primeira página HTML por Tim Berners-Lee 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  10. 10. história da Interwebz como consertar? como continuar? exemplos 1996 Entrada das empresas na Web Netscape Navigator 2 Internet Explorer 3 JavaScript ASP 1.0 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  11. 11. história da Interwebz como consertar? como continuar? exemplos 1996 Yahoo! e UOL - 1996 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  12. 12. história da Interwebz como consertar? como continuar? exemplos 1996 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham “layouts” Fazem o HTML e colocam as imagens Atualizam o conteúdo Modificam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  13. 13. história da Interwebz como consertar? como continuar? exemplos 1998 HTML 4.0 CSS 1 Macromedia (R.I.P.) Dreamweaver PHP 3 Mozilla 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  14. 14. história da Interwebz como consertar? como continuar? exemplos 1998 Yahoo! e UOL - 1998 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  15. 15. história da Interwebz como consertar? como continuar? exemplos 1998 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham layouts Fazem o HTML e colocam as imagens Interações com JavaScript Atualizam o conteúdo Modificam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  16. 16. história da Interwebz como consertar? como continuar? exemplos 1999 Explosão “ponto-com” Photoshop com slices e “Save for Web” Macromedia (R.I.P.) Flash 4 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  17. 17. história da Interwebz como consertar? como continuar? exemplos 1999 Yahoo! e UOL - 1999 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  18. 18. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Redesign das páginas Introdução da Arquitetura da Informação, Usabilidade e User Experience na Web Surgimento do Front-end Developer 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  19. 19. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Yahoo! @ 18-18-2002 e UOL @ 2001 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  20. 20. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Definem interações imagens Interações com JavaScript Desenham layouts HTML, geralmente com tabelas e estilos inline Interações com JavaScript 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  21. 21. história da Interwebz como consertar? como continuar? exemplos 2003 CSS Zen Garden Movimento Tableless Safari 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  22. 22. história da Interwebz como consertar? como continuar? exemplos 2005 YouTube Orkut Ruby on Rails Firefox & Safari 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  23. 23. história da Interwebz como consertar? como continuar? exemplos 2006 Moda “Web 2.0” Crescimento do uso do AJAX Internet Explorer 7 & Firefox 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  24. 24. história da Interwebz como consertar? como continuar? exemplos 2007 iPhone Ruby on Rails no Mac OS X Safari 3 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  25. 25. história da Interwebz como consertar? como continuar? exemplos 2009 Explosão do mercado mobile Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  26. 26. história da Interwebz como consertar? como continuar? exemplos 2010 Crescimento do HTML5 e do CSS3 iPad Apple x Flash Morte do IE 6 (pelo Google) 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  27. 27. história da Interwebz como consertar? como continuar? exemplos 2010 Yahoo! e UOL @ 10-08-2010 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  28. 28. história da Interwebz como consertar? como continuar? exemplos 2010 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Definem interações imagens Desenham layouts Estrutura semântica do HTML e CSS Orientado a Objeto Interações avançadas com JavaScript Otimização de carregamento da página 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  29. 29. Como consertar? Identificando os problemas de comunicação e conflitos entre as áreas, e solucionando-os
  30. 30. história da Interwebz como consertar? como continuar? exemplos O Problema Back-end Devs Designers Managers Testers Stakeholders Front-end Devs
  31. 31. história da Interwebz como consertar? como continuar? exemplos O Problema Designers Front-end Devs Back-end Devs São os únicos que se Não seguem corretamente o Desenvolvem o sistema, mas envolvem com o P.O./ layout e as especificações devolvem dados Stakeholder/Cliente e testers dos Designers incompletos/mal formatados Não possuem conhecimento Não sabem integrar o HTML Desenvolvem o sistema, mas em front-end ou back-end, e ao sistema desenvolvido, não criam as views certas elaboram features deixando que um Back-end complexas/impossíveis para Dev o faça Fazem alterações no o tempo disponível ambiente de Não possuem conhecimento desenvolvimento (migrations, Alteram layouts ou suficiente de JavaScript, gems, configurações da funcionalidades e consumindo tempo do Back- aplicação) e não comunicam comunicam de última hora end Dev o Front-end Dev (ou não comunicam) Se recusam a configurar Não auxiliam ou ensinam o São inflexíveis em simplificar ambientes e aprender Front-end Dev a instalar, o layout ou interação para sistemas de versionamento configurar e utilizar recursos diminuir o tempo de desenvolvimento Enxergam o produto como programadores mas nunca como usuários
  32. 32. história da Interwebz como consertar? como continuar? exemplos A Solução Managers Back-end Devs Stakeholders Designers Testers Front-end Devs
  33. 33. história da Interwebz como consertar? como continuar? exemplos A Solução Um único time: Design + Front-end + Back-end Um único objetivo: fazer o melhor pelo time, pelo P.O., e pelo usuário Trabalho constante junto ao P.O. Transparência entre todos Compartilhamento de conhecimento entre as áreas
  34. 34. história da Interwebz como consertar? como continuar? exemplos A Solução Designers Front-end Devs Back-end Devs Devem saber o básico (de Devem estar em contato Devem ter conhecimento preferência o intermediário) constante com os Designers, básico de Front-end de Front-end Development de preferência opinando construtivamente na Devem produzir as views e Deve ter uma noção e se interface imprimir os dados interessar pelo trabalho dos corretamente Back-end Developers Devem seguir as especificações do layout e Devem auxiliar o Front-end Devem comunicar das funcionalidades, Dev caso haja problemas ou alterações de layouts e consultando os Designers dificuldades com a view funcionalidades a todos o caso haja dificuldades quanto antes Devem ter uma noção e se Devem ter conhecimento na interessar pelo trabalho dos Devem estar dispostos a linguagem de Back-end, em Designers, esclarecendo simplificar o layout/ ferramentas de quaisquer dúvidas técnicas funcionalidade (e lutar por versionamento e o básico do isso contra o P.O.) básico de infra para rodar o ambiente
  35. 35. história da Interwebz como consertar? como continuar? exemplos A Solução Fim do egocentrismo na própria área
  36. 36. história da Interwebz como consertar? como continuar? exemplos A Solução “Eu não vejo diferença entre Front- end e Back-end developer. Pra mim, são todos developers e devem ser tratados igualmente.” Ronaldo Ferraz (@rferraz)
  37. 37. Como continuar? Sugestões de workflows e organização para manter a equipe sincronizada e funcionando
  38. 38. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes
  39. 39. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Colombia Travel Fonte: www.wireframeshowcase.com
  40. 40. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Documentam as features (e desejos do P.O.) Ajudam o P.O. e o tester a enxergarem melhor as features Estruturam a página para que o HTML seja feito Documentam funcionalidades da interface Deixam claro aos Back-end Devs as funcionalidades do sistema e dados a serem impressos Facilitam a estimativa das histórias
  41. 41. história da Interwebz como consertar? como continuar? exemplos 2. Meetings Fonte: icanhascheezburguer.com
  42. 42. história da Interwebz como consertar? como continuar? exemplos 2. Meetings Daily meetings, plannings, reviews e retrospectives devem envolver todos (designers, front-end e back- end devs) Meetings que envolvem todos não devem entrar em detalhes técnicos – discutir isso separadamente tempo++ == stress++ == harmonia--
  43. 43. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks
  44. 44. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Fonte: @taq - http://twitpic.com/2engls
  45. 45. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Compartilha o conhecimento entre todos Quebra a rotina do trabalho Promove skills sociais Slides/vídeos/anotações servem como referência posterior
  46. 46. história da Interwebz como consertar? como continuar? exemplos 4. Work ow
  47. 47. história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) O wireframe de cada história deve ser feito separadamente em outra história, um sprint antes Histórias devem ter design, front e back-end simultâneos, em constante comunicação Testes devem ser constantes Todos devem tirar quaisquer dúvidas com o P.O. diretamente – design, front e back-end estão no mesmo “nível”
  48. 48. história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) Sprint n-1 Sprint n Sprint n+1 Wireframe/UX Design Interface Dev. Bug fix & deploy Back-end Dev. Testes Planning 1 & 2 Planning 1 & 2 Wireframe é apresentado e explicado Wireframe é apresentado e explicado
  49. 49. Exemplos O que deu certo e o que deu errado
  50. 50. Recapitulando...
  51. 51. Recapitulando... Design: Protótipos, Wireframes, Arquitetura, UX, Arte Back-end: Sistema, oferece toda a funcionalidade e dados necessários à interface Front-end: Interface que conecta o back-end ao Design
  52. 52. Recapitulando... Design, front e back-end devem formar um único time Todos devem compartilhar conhecimentos e acabar com barreiras entre as áreas Todos devem prontamente auxiliar outras áreas Todos devem se interessar pelo trabalho das outras áreas Todos devem cuidar para que todos façam suas tasks com perfeição
  53. 53. Recapitulando... Wireframes: devem ser feitos com antecedência, ajudam (muito) a mapear funcionalidades e fazer estimativas Meetings: rápidos, somente o necessário, envolvendo todos Meetings: discussões técnicas somente com a sua área Tech talks: ajudam a passar o conhecimento Workflow: todos simultaneamente na história, evitando o formato waterfall
  54. 54. Obrigado! Eduardo Shiota Yasuda - @shiota contato@eshiota.com www.eshiota.com

×