O documento discute as mudanças no workflow entre designers e desenvolvedores front-end, propondo um fluxo de trabalho ideal que envolve o design diretamente no navegador para permitir interatividade e versionamento, melhorando a comunicação e a produtividade da equipe.

1. DESIGNER E
FRONT-END DEV:
PRONTOS PARA MUDAR SEU WORKFLOW?
Com as constantes mudanças de ferramentas e no
desenvolvimento web, construímos um workflow do
processo criativo ao desenvolvimento front-end, focado
em qualidade, agilidade e integração entre as equipes

2. MARLOS CARMO

3. WEBDESIGNER
PROGRAMADOR
PROGRAMADOR
FLASH
GERENTE DE
PROJETOS
DIRETOR DE
OPERAÇÕES
DIGITAIS
FUÇADOR

4. BRUNO MAGAL

5. ARTE-FINALISTA
DIRETOR DE
ARTE
DIRETOR DE
CRIAÇÃO
WEBDESIGNER
COORDENADOR
DE CRIAÇÃO
DIGITAL
FUÇADOR

6. CONTEXTO
GERAL

7. NO INÍCIO
TODO MUNDO ERA
WEBMASTER

8. WEB DESIGNERWEB DEVELOPER
AOS POUCOS A PROFISSÃO
FOI SE SEGMENTANDO

9. MAS OS DOIS
PROFISSIONAIS TINHAM
O MESMO PROCESSO
DE TRABALHO

10. A ÚNICA DIFERENÇA ERA

11. WEBDEVELOPERS
FAZIAM SITES COM
FUNDO PRETO

12. WEBDESIGNERS
FAZIAM SITES COM
FUNDO BRANCO

13. 1 DEVICE
1 BROWSER
1 FORMA DE NAVEGAR
1 SISTEMA OPERACIONAL
!
#DAHORAAVIDA
+

14. PERFORMANCE, QUALIDADE
DE CÓDIGO E SEMÂNTICA POUCO
IMPORTAVA.
+

15. SE FUNCIONOU NO IE ESTÁ OK.
!
#SAUDADES
+

16. O PROGRAMADOR
GERALMENTE NÃO TINHA
UM SENSO ESTÉTICO APURADO

17. • ESPAÇAMENTOS
• ALINHAMENTOS
• FONTES EXATAS
• CORES EXATAS

18. REALIDADEEXPECTATIVA
+

19. O DESIGNER NUNCA TEVE
CONTROLE DAS INTERAÇÕES.
SEU MUNDO ERA SEMPRE
ESTÁTICO E SEM GRAÇA.

20. APÓS CRIAR O PSD SENTAVA DO
LADO DO PROGRAMADOR E
FICAVA NARRANDO O QUE DEVIA
SER FEITO OU CORRIGIDO

21. O FAMOSO
FLANELINHA DE LAYOUT

22. EM GRANDES PROJETOS QUE
TRABALHAMOS JÁ VIMOS DIREÇÃO
DE ANIMAÇÃO DA SEGUINTE
FORMA:

23. •A BOLINHA VAI APARECER DA DIREITA PARA A
ESQUERDA;
!
•O MOVIMENTO DURA 1 SEGUNDO E COM O
EFEITO DE BOUNCE;
!
•AO FINAL, ELA IRÁ CRESCER EM UMA ESCALA
DE 2X DURANTE 500 MS;
!
•POR FIM, IR PARA A ESCALA 0 EM 300 MS COM
FADE-OUT;

24. NÃO HAVIA O QUE PENSAR E SIM
EXECUTAR COMANDOS. MAS
NINGUÉM TINHA A REAL VISÃO
DE COMO FICARIA O RESULTADO.

25. COM A FALTA DE RECURSOS
INTERATIVOS NO BROWSER E A
MONOTONIA DO TRABALHO DO
DESIGNER, O FLASH GANHOU
FORÇA.

26. NA ERA DE OURO DO FLASH
TODOS OS SITES TINHAM
ABERTURAS. PRA QUÊ CONTEÚDO
INTERESSANTE, SE VOCÊ PODE
COLOCAR SUA LOGO RODANDO E
COM MÚSICA?

28. O FLASH SE SUSTENTOU POR
MUITO TEMPO, MAS ELE TINHA
SEUS PROBLEMAS CRÍTICOS
COMO INDEXAÇÃO EM
BUSCADORES E ALTO CONSUMO
DE MÁQUINA.

29. ESSES PROBLEMAS LHE
CUSTARAM A VIDA E OS
DESIGNERS VOLTARAM A ESTACA
ZERO. O LAYOUT ESTÁTICO.

30. NA BUSCA POR REPRODUZIR OS
RECURSOS RICOS DO FLASH O
“FAZEDOR DE HTML” VIROU:
!
FRONT-END
ENGINEER

31. TECNOLOGIAS EM JAVASCRIPT
QUE TRAZIAM RECURSOS
INTERATIVOS COMEÇARAM A
GANHAR AINDA MAIS FORÇA.

33. JQUERY
QUEM NUNCA CLICOU COM O
BOTÃO DIREITO PARA SABER SE ERA
FLASH OU NÃO?

34. JQUERY
QUEM NUNCA CLICOU COM O
BOTÃO DIREITO PARA SABER SE ERA
FLASH OU NÃO?
#QUEMNUNCA

35. MAS AINDA NÃO ERA
O MUNDO PERFEITO

36. O DESIGNER SÓ TINHA
ENCONTRADO ALGUÉM QUE
ENTENDIA SEU SOFRIMENTO

37. E LÁ ESTAVA O
FLANELINHA

38. O FRONT-END DEV, MESMO NÃO
SENDO DESIGNER, AINDA ERA
RESPONSÁVEL PELO DESIGN NO
BROWSER.

39. O DESIGNER SE LIMITAVA NO
PROCESSO CRIATIVO E A FALTA
DE EVOLUÇÃO DAS SUAS
FERRAMENTAS COMPROMETIAM
A SUA PRODUTIVIDADE

40. EVOLUÇÃO DA BARRA DE
FERRAMENTAS DO PHOTOSHOP
EM 24 ANOS

41. COM ISSO, TODO O DESIGN ERA
REFEITO
NA MONTAGEM DO SITE

42. NESTE MOMENTO O
PROFISSIONAL DE
FRONT-END COMEÇOU
A SER SUPER
VALORIZADO PELOS
SEUS PODERES

43. PARA FACILITAR A
COMUNICAÇÃO ENTRE
DESIGNERS E FRONT-END DEVS
SURGIRAM VÁRIAS FERRAMENTAS

44. ADOBE PARFAIT

45. CSS HAT

46. AVOCODE

47. PHOTOSHOP CC

48. DESENHA NO
PHOTOSHOP
VALIDA NO
BROWSER

49. DESENHA NO
PHOTOSHOP
VALIDA NO
BROWSER

50. DESIGN RESPONSIVO

51. WORKFLOW
IDEAL
WORKFLOW
ATUAL

52. WORKFLOW
ATUAL

53. WIREFRAME
SOFTWARE
OU PAPEL
PHOTOSHOP
DESENHO ESTÁTICO
E SEM INTERAÇÕES.
“FATIAR”
HTML/ CSS
PRODUÇÃO
NO BRAÇO.
SIMILAR AO
PHOTOSHOP
INTERAÇÕES
/ JAVASCRIPT
CRIAÇÃO DE
RECURSOS RICOS

54. WORKFLOW
IDEAL

55. PHOTOSHOP
“FATIAR”
HTML/ CSS
WIREFRAME
SOFTWARE
OU PAPEL
DESIGN NO
BROWSER
AMBIENTE REAL
E INTERATIVO
ANÁLISE E
OTIMIZAÇÃO
ADEQUAÇÃO DO
CÓDIGO E
OTIMIZAÇÕES
NECESSÁRIAS
INTERAÇÕES
/ JAVASCRIPT
CRIAÇÃO DE
RECURSOS RICOS

56. WIREFRAME
SOFTWARE
OU PAPEL
DESIGN NO
BROWSER
AMBIENTE REAL
E INTERATIVO
ANÁLISE E
OTIMIZAÇÃO
ADEQUAÇÃO DO
CÓDIGO E
OTIMIZAÇÕES
NECESSÁRIAS
INTERAÇÕES
/ JAVASCRIPT
CRIAÇÃO DE
RECURSOS RICOS
DESIGN
VERSIONADO

57. WIREFRAME

59. FIM DO PSD

60. DESENHAMOS, CRIAMOS
INTERAÇÕES E TESTAMOS NO
BROWSER EM TEMPO REAL.

61. ENVIAMOS O MOCKUP
FUNCIONAL E RESPONSIVO
PARA O CLIENTE, DIMINUINDO
MUITAS IDAS E VINDAS.

62. UMA DISTINÇÃO
DEVE SER FEITA:

63. O BROWSER É O VEÍCULO PARA
NOSSOS DESIGNS,

64. ENQUANTO OS EDITORES DE IMAGEM
SÃO FEITOS PARA EXPLORAR O
PROCESSO CRIATIVO E DE
EXPERIMENTAÇÃO.

65. FROONT

66. ADOBE EDGE REFLOW

67. SKETCH

68. TYPECAST

69. MACAW

70. WEBFLOW

71. WEBFLOW

72. WEBFLOW

73. WEBFLOW

74. ANÁLISE E
OTIMIZAÇÃO

75. USE AS FERRAMENTAS QUE
VOCÊ SE SENTE CONFORTÁVEL,

76. MAS SAIBA QUANDO AQUELAS
FERRAMENTAS PARAM DE
FAZER SENTIDO EM SEU
WORKFLOW.

77. APÓS A EXPORTAÇÃO DO
CÓDIGO, ORGANIZE E
VERIFIQUE SE PRECISA DE
ALGUMA ADEQUAÇÃO

78. OTIMIZAR
IMAGENS, CSS, JS E TUDO QUE
FOR POSSÍVEL MELHORAR.

79. LEMBRE-SE DE
AUTOMATIZAR TUDO!

80. VALIDE EM TODOS OS
BROWSERS DESEJADOS.

81. INTERAÇÕES/
JAVASCRIPT

82. É NESTA FASE QUE CRIAMOS
TODAS AS INTERAÇÕES RICAS.
QUE REALMENTE FAZEM
DIFERENÇA NO PROJETO.

83. HORA DE DEIXAR O DEV
COM A SUA ESPECIALIDADE:
PROGRAMAR

84. PORQUE ELE JÁ ESTÁ
CANSADO DE FAZER TODO
SANTO DIA: MENU, LIGHTBOX,
SLIDER E ETC.

85. VERSIONAMENTO

86. OS DESIGNERS NUNCA
TIVERAM UMA FERRAMENTA
DE VERSIONAMENTO E ERA
COMUM PERDER UM DIA DE
TRABALHO
#TADINHO

87. COMO TRABALHAMOS COM
CÓDIGOS E NÃO BINÁRIOS
(PSD), CONSEGUIMOS
VERSIONAR A EVOLUÇÃO DO
LAYOUT.

88. E O MELHOR!
!
A CADA EXPORTAÇÃO,
CONSEGUIMOS VER EXATAMENTE
A DIFERENÇA DA VERSÃO
ANTERIOR E A VERSÃO ATUAL.

89. DIFF NO GITHUB

90. SE LIGA ENTÃO QUE É
HORA DA REVISÃO

91. CRIAÇÃO É COM O
DESIGNER

92. O FRONT-END DEV TEM MAIS O
QUE FAZER DO QUE REMONTAR
LAYOUT

93. SITE RESPONSIVO É
COMMODITY

94. FAZER MAIS
COM MENOS

95. OTIMIZAMOS EM MÉDIA
40% DO TEMPO
GASTO NOS PROJETOS

96. OBRIGADO
@brunomagalhaes
@marloscarmo