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.

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. Uma (breve) introdução

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