O Design e a Interface no mundo da Programação
17 gostaram2,076 visualizações
Este documento resume a evolução histórica das interfaces na programação e propõe soluções para problemas comuns de comunicação entre designers, desenvolvedores front-end e back-end durante o desenvolvimento de produtos. Ele descreve como os papéis de cada área mudaram ao longo do tempo e sugere estratégias como wireframes, reuniões diárias e compartilhamento de conhecimento para promover uma abordagem colaborativa e unificada.
![@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](https://image.slidesharecdn.com/devinsampa-100814150158-phpapp02/85/O-Design-e-a-Interface-no-mundo-da-Programacao-3-320.jpg)
O Design e a Interface no mundo da Programação
- 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
- 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. Problema O desenvolvimento de um produto é prejudicado por conflitos e falta de comunicação entre design, front-end e back-end
- 5. Objetivo Identificar papéis e obrigações de cada um, unificar o time e estabelecer uma metologia eficiente de desenvolvimento
- 6. história da Interwebz como consertar? como continuar? exemplos
- 7. História da Interwebz Como as interfaces evoluíram e os papéis mudaram
- 8. história da Interwebz como consertar? como continuar? exemplos 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Como consertar? Identificando os problemas de comunicação e conflitos entre as áreas, e solucionando-os
- 30. história da Interwebz como consertar? como continuar? exemplos O Problema Back-end Devs Designers Managers Testers Stakeholders Front-end Devs
- 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. história da Interwebz como consertar? como continuar? exemplos A Solução Managers Back-end Devs Stakeholders Designers Testers Front-end Devs
- 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. 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. história da Interwebz como consertar? como continuar? exemplos A Solução Fim do egocentrismo na própria área
- 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. Como continuar? Sugestões de workflows e organização para manter a equipe sincronizada e funcionando
- 38. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes
- 39. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Colombia Travel Fonte: www.wireframeshowcase.com
- 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. história da Interwebz como consertar? como continuar? exemplos 2. Meetings Fonte: icanhascheezburguer.com
- 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. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks
- 44. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Fonte: @taq - http://twitpic.com/2engls
- 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. história da Interwebz como consertar? como continuar? exemplos 4. Work ow
- 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. 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. Exemplos O que deu certo e o que deu errado
- 50. Recapitulando...
- 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. 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. 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. Obrigado! Eduardo Shiota Yasuda - @shiota contato@eshiota.com www.eshiota.com