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

Embed Size (px)

DESCRIPTION

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.

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

  • 1. DESIGNER E FRONT-END DEV: PRONTOS PARA MUDAR SEU WORKFLOW? Com as constantes mudanas de ferramentas e no desenvolvimento web, construmos um workow do processo criativo ao desenvolvimento front-end, focado em qualidade, agilidade e integrao entre as equipes
  • 2. MARLOS CARMO
  • 3. WEBDESIGNER PROGRAMADOR PROGRAMADOR FLASH GERENTE DE PROJETOS DIRETOR DE OPERAES DIGITAIS FUADOR
  • 4. BRUNO MAGAL
  • 5. ARTE-FINALISTA DIRETOR DE ARTE DIRETOR DE CRIAO WEBDESIGNER COORDENADOR DE CRIAO DIGITAL FUADOR
  • 6. CONTEXTO GERAL
  • 7. NO INCIO TODO MUNDO ERA WEBMASTER
  • 8. WEB DESIGNERWEB DEVELOPER AOS POUCOS A PROFISSO FOI SE SEGMENTANDO
  • 9. MAS OS DOIS PROFISSIONAIS TINHAM O MESMO PROCESSO DE TRABALHO
  • 10. A NICA DIFERENA 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 CDIGO E SEMNTICA POUCO IMPORTAVA. +
  • 15. SE FUNCIONOU NO IE EST OK. ! #SAUDADES +
  • 16. O PROGRAMADOR GERALMENTE NO TINHA UM SENSO ESTTICO APURADO
  • 17. ESPAAMENTOS ALINHAMENTOS FONTES EXATAS CORES EXATAS
  • 18. REALIDADEEXPECTATIVA +
  • 19. O DESIGNER NUNCA TEVE CONTROLE DAS INTERAES. SEU MUNDO ERA SEMPRE ESTTICO E SEM GRAA.
  • 20. APS 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 DIREO DE ANIMAO 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. NO HAVIA O QUE PENSAR E SIM EXECUTAR COMANDOS. MAS NINGUM TINHA A REAL VISO DE COMO FICARIA O RESULTADO.
  • 25. COM A FALTA DE RECURSOS INTERATIVOS NO BROWSER E A MONOTONIA DO TRABALHO DO DESIGNER, O FLASH GANHOU FORA.
  • 26. NA ERA DE OURO DO FLASH TODOS OS SITES TINHAM ABERTURAS. PRA QU CONTEDO INTERESSANTE, SE VOC PODE COLOCAR SUA LOGO RODANDO E COM MSICA?
  • 27. O FLASH SE SUSTENTOU POR MUITO TEMPO, MAS ELE TINHA SEUS PROBLEMAS CRTICOS COMO INDEXAO EM BUSCADORES E ALTO CONSUMO DE MQUINA.
  • 28. ESSES PROBLEMAS LHE CUSTARAM A VIDA E OS DESIGNERS VOLTARAM A ESTACA ZERO. O LAYOUT ESTTICO.
  • 29. NA BUSCA POR REPRODUZIR OS RECURSOS RICOS DO FLASH O FAZEDOR DE HTML VIROU: ! FRONT-END ENGINEER
  • 30. TECNOLOGIAS EM JAVASCRIPT QUE TRAZIAM RECURSOS INTERATIVOS COMEARAM A GANHAR AINDA MAIS FORA.
  • 31. JQUERY QUEM NUNCA CLICOU COM O BOTO DIREITO PARA SABER SE ERA FLASH OU NO?
  • 32. JQUERY QUEM NUNCA CLICOU COM O BOTO DIREITO PARA SABER SE ERA FLASH OU NO? #QUEMNUNCA
  • 33. MAS AINDA NO ERA O MUNDO PERFEITO
  • 34. O DESIGNER S TINHA ENCONTRADO ALGUM QUE ENTENDIA SEU SOFRIMENTO
  • 35. E L ESTAVA O FLANELINHA
  • 36. O FRONT-END DEV, MESMO NO SENDO DESIGNER, AINDA ERA RESPONSVEL PELO DESIGN NO BROWSER.
  • 37. O DESIGNER SE LIMITAVA NO PROCESSO CRIATIVO E A FALTA DE EVOLUO DAS SUAS FERRAMENTAS COMPROMETIAM A SUA PRODUTIVIDADE
  • 38. EVOLUO DA BARRA DE FERRAMENTAS DO PHOTOSHOP EM 24 ANOS
  • 39. COM ISSO, TODO O DESIGN ERA REFEITO NA MONTAGEM DO SITE
  • 40. NESTE MOMENTO O PROFISSIONAL DE FRONT-END COMEOU A SER SUPER VALORIZADO PELOS SEUS PODERES
  • 41. PARA FACILITAR A COMUNICAO ENTRE DESIGNERS E FRONT-END DEVS SURGIRAM VRIAS FERRAMENTAS
  • 42. ADOBE PARFAIT
  • 43. CSS HAT
  • 44. AVOCODE
  • 45. PHOTOSHOP CC