O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?

4.243 visualizações

Publicada em

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.

Publicada em: Internet
  • Seja o primeiro a comentar

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?

  1. 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. 2. MARLOS CARMO
  3. 3. WEBDESIGNER PROGRAMADOR PROGRAMADOR FLASH GERENTE DE PROJETOS DIRETOR DE OPERAÇÕES DIGITAIS FUÇADOR
  4. 4. BRUNO MAGAL
  5. 5. ARTE-FINALISTA DIRETOR DE ARTE DIRETOR DE CRIAÇÃO WEBDESIGNER COORDENADOR DE CRIAÇÃO DIGITAL FUÇADOR
  6. 6. CONTEXTO GERAL
  7. 7. NO INÍCIO TODO MUNDO ERA WEBMASTER
  8. 8. WEB DESIGNERWEB DEVELOPER AOS POUCOS A PROFISSÃO FOI SE SEGMENTANDO
  9. 9. MAS OS DOIS PROFISSIONAIS TINHAM O MESMO PROCESSO DE TRABALHO
  10. 10. A ÚNICA DIFERENÇA ERA
  11. 11. WEBDEVELOPERS FAZIAM SITES COM FUNDO PRETO
  12. 12. WEBDESIGNERS FAZIAM SITES COM FUNDO BRANCO
  13. 13. 1 DEVICE 1 BROWSER 1 FORMA DE NAVEGAR 1 SISTEMA OPERACIONAL ! #DAHORAAVIDA +
  14. 14. PERFORMANCE, QUALIDADE DE CÓDIGO E SEMÂNTICA POUCO IMPORTAVA. +
  15. 15. SE FUNCIONOU NO IE ESTÁ OK. ! #SAUDADES +
  16. 16. O PROGRAMADOR GERALMENTE NÃO TINHA UM SENSO ESTÉTICO APURADO
  17. 17. • ESPAÇAMENTOS • ALINHAMENTOS • FONTES EXATAS • CORES EXATAS
  18. 18. REALIDADEEXPECTATIVA +
  19. 19. O DESIGNER NUNCA TEVE CONTROLE DAS INTERAÇÕES. SEU MUNDO ERA SEMPRE ESTÁTICO E SEM GRAÇA.
  20. 20. APÓS CRIAR O PSD SENTAVA DO LADO DO PROGRAMADOR E FICAVA NARRANDO O QUE DEVIA SER FEITO OU CORRIGIDO
  21. 21. O FAMOSO FLANELINHA DE LAYOUT
  22. 22. EM GRANDES PROJETOS QUE TRABALHAMOS JÁ VIMOS DIREÇÃO DE ANIMAÇÃO DA SEGUINTE FORMA:
  23. 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. 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. 25. COM A FALTA DE RECURSOS INTERATIVOS NO BROWSER E A MONOTONIA DO TRABALHO DO DESIGNER, O FLASH GANHOU FORÇA.
  26. 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?
  27. 27. 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.
  28. 28. ESSES PROBLEMAS LHE CUSTARAM A VIDA E OS DESIGNERS VOLTARAM A ESTACA ZERO. O LAYOUT ESTÁTICO.
  29. 29. NA BUSCA POR REPRODUZIR OS RECURSOS RICOS DO FLASH O “FAZEDOR DE HTML” VIROU: ! FRONT-END ENGINEER
  30. 30. TECNOLOGIAS EM JAVASCRIPT QUE TRAZIAM RECURSOS INTERATIVOS COMEÇARAM A GANHAR AINDA MAIS FORÇA.
  31. 31. JQUERY QUEM NUNCA CLICOU COM O BOTÃO DIREITO PARA SABER SE ERA FLASH OU NÃO?
  32. 32. JQUERY QUEM NUNCA CLICOU COM O BOTÃO DIREITO PARA SABER SE ERA FLASH OU NÃO? #QUEMNUNCA
  33. 33. MAS AINDA NÃO ERA O MUNDO PERFEITO
  34. 34. O DESIGNER SÓ TINHA ENCONTRADO ALGUÉM QUE ENTENDIA SEU SOFRIMENTO
  35. 35. E LÁ ESTAVA O FLANELINHA
  36. 36. O FRONT-END DEV, MESMO NÃO SENDO DESIGNER, AINDA ERA RESPONSÁVEL PELO DESIGN NO BROWSER.
  37. 37. O DESIGNER SE LIMITAVA NO PROCESSO CRIATIVO E A FALTA DE EVOLUÇÃO DAS SUAS FERRAMENTAS COMPROMETIAM A SUA PRODUTIVIDADE
  38. 38. EVOLUÇÃO DA BARRA DE FERRAMENTAS DO PHOTOSHOP EM 24 ANOS
  39. 39. COM ISSO, TODO O DESIGN ERA REFEITO NA MONTAGEM DO SITE
  40. 40. NESTE MOMENTO O PROFISSIONAL DE FRONT-END COMEÇOU A SER SUPER VALORIZADO PELOS SEUS PODERES
  41. 41. PARA FACILITAR A COMUNICAÇÃO ENTRE DESIGNERS E FRONT-END DEVS SURGIRAM VÁRIAS FERRAMENTAS
  42. 42. ADOBE PARFAIT
  43. 43. CSS HAT
  44. 44. AVOCODE
  45. 45. PHOTOSHOP CC
  46. 46. DESENHA NO PHOTOSHOP VALIDA NO BROWSER
  47. 47. DESENHA NO PHOTOSHOP VALIDA NO BROWSER
  48. 48. DESIGN RESPONSIVO
  49. 49. WORKFLOW IDEAL WORKFLOW ATUAL
  50. 50. WORKFLOW ATUAL
  51. 51. 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
  52. 52. WORKFLOW IDEAL
  53. 53. 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
  54. 54. 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
  55. 55. WIREFRAME
  56. 56. FIM DO PSD
  57. 57. DESENHAMOS, CRIAMOS INTERAÇÕES E TESTAMOS NO BROWSER EM TEMPO REAL.
  58. 58. ENVIAMOS O MOCKUP FUNCIONAL E RESPONSIVO PARA O CLIENTE, DIMINUINDO MUITAS IDAS E VINDAS.
  59. 59. UMA DISTINÇÃO DEVE SER FEITA:
  60. 60. O BROWSER É O VEÍCULO PARA NOSSOS DESIGNS,
  61. 61. ENQUANTO OS EDITORES DE IMAGEM SÃO FEITOS PARA EXPLORAR O PROCESSO CRIATIVO E DE EXPERIMENTAÇÃO.
  62. 62. FROONT
  63. 63. ADOBE EDGE REFLOW
  64. 64. SKETCH
  65. 65. TYPECAST
  66. 66. MACAW
  67. 67. WEBFLOW
  68. 68. WEBFLOW
  69. 69. WEBFLOW
  70. 70. WEBFLOW
  71. 71. ANÁLISE E OTIMIZAÇÃO
  72. 72. USE AS FERRAMENTAS QUE VOCÊ SE SENTE CONFORTÁVEL,
  73. 73. MAS SAIBA QUANDO AQUELAS FERRAMENTAS PARAM DE FAZER SENTIDO EM SEU WORKFLOW.
  74. 74. APÓS A EXPORTAÇÃO DO CÓDIGO, ORGANIZE E VERIFIQUE SE PRECISA DE ALGUMA ADEQUAÇÃO
  75. 75. OTIMIZAR IMAGENS, CSS, JS E TUDO QUE FOR POSSÍVEL MELHORAR.
  76. 76. LEMBRE-SE DE AUTOMATIZAR TUDO!
  77. 77. VALIDE EM TODOS OS BROWSERS DESEJADOS.
  78. 78. INTERAÇÕES/ JAVASCRIPT
  79. 79. É NESTA FASE QUE CRIAMOS TODAS AS INTERAÇÕES RICAS. QUE REALMENTE FAZEM DIFERENÇA NO PROJETO.
  80. 80. HORA DE DEIXAR O DEV COM A SUA ESPECIALIDADE: PROGRAMAR
  81. 81. PORQUE ELE JÁ ESTÁ CANSADO DE FAZER TODO SANTO DIA: MENU, LIGHTBOX, SLIDER E ETC.
  82. 82. VERSIONAMENTO
  83. 83. OS DESIGNERS NUNCA TIVERAM UMA FERRAMENTA DE VERSIONAMENTO E ERA COMUM PERDER UM DIA DE TRABALHO #TADINHO
  84. 84. COMO TRABALHAMOS COM CÓDIGOS E NÃO BINÁRIOS (PSD), CONSEGUIMOS VERSIONAR A EVOLUÇÃO DO LAYOUT.
  85. 85. E O MELHOR! ! A CADA EXPORTAÇÃO, CONSEGUIMOS VER EXATAMENTE A DIFERENÇA DA VERSÃO ANTERIOR E A VERSÃO ATUAL.
  86. 86. DIFF NO GITHUB
  87. 87. SE LIGA ENTÃO QUE É HORA DA REVISÃO
  88. 88. CRIAÇÃO É COM O DESIGNER
  89. 89. O FRONT-END DEV TEM MAIS O QUE FAZER DO QUE REMONTAR LAYOUT
  90. 90. SITE RESPONSIVO É COMMODITY
  91. 91. FAZER MAIS COM MENOS
  92. 92. OTIMIZAMOS EM MÉDIA 40% DO TEMPO GASTO NOS PROJETOS
  93. 93. OBRIGADO @brunomagalhaes @marloscarmo

×