Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
DESIGNER E
FRONT-END DEV:
PRONTOS PARA MUDAR SEU WORKFLOW?
Com as constantes mudanças de ferramentas e no
desenvolvimento ...
MARLOS CARMO
WEBDESIGNER
PROGRAMADOR
PROGRAMADOR
FLASH
GERENTE DE
PROJETOS
DIRETOR DE
OPERAÇÕES
DIGITAIS
FUÇADOR
BRUNO MAGAL
ARTE-FINALISTA
DIRETOR DE
ARTE
DIRETOR DE
CRIAÇÃO
WEBDESIGNER
COORDENADOR
DE CRIAÇÃO
DIGITAL
FUÇADOR
CONTEXTO
GERAL
NO INÍCIO
TODO MUNDO ERA
WEBMASTER
WEB DESIGNERWEB DEVELOPER
AOS POUCOS A PROFISSÃO
FOI SE SEGMENTANDO
MAS OS DOIS
PROFISSIONAIS TINHAM
O MESMO PROCESSO
DE TRABALHO
A ÚNICA DIFERENÇA ERA
WEBDEVELOPERS
FAZIAM SITES COM
FUNDO PRETO
WEBDESIGNERS
FAZIAM SITES COM
FUNDO BRANCO
1 DEVICE
1 BROWSER
1 FORMA DE NAVEGAR
1 SISTEMA OPERACIONAL
!
#DAHORAAVIDA
+
PERFORMANCE, QUALIDADE
DE CÓDIGO E SEMÂNTICA POUCO
IMPORTAVA.
+
SE FUNCIONOU NO IE ESTÁ OK.
!
#SAUDADES
+
O PROGRAMADOR
GERALMENTE NÃO TINHA
UM SENSO ESTÉTICO APURADO
• ESPAÇAMENTOS
• ALINHAMENTOS
• FONTES EXATAS
• CORES EXATAS
REALIDADEEXPECTATIVA
+
O DESIGNER NUNCA TEVE
CONTROLE DAS INTERAÇÕES.
SEU MUNDO ERA SEMPRE
ESTÁTICO E SEM GRAÇA.
APÓS CRIAR O PSD SENTAVA DO
LADO DO PROGRAMADOR E
FICAVA NARRANDO O QUE DEVIA
SER FEITO OU CORRIGIDO
O FAMOSO
FLANELINHA DE LAYOUT
EM GRANDES PROJETOS QUE
TRABALHAMOS JÁ VIMOS DIREÇÃO
DE ANIMAÇÃO DA SEGUINTE
FORMA:
•A BOLINHA VAI APARECER DA DIREITA PARA A
ESQUERDA;
!
•O MOVIMENTO DURA 1 SEGUNDO E COM O
EFEITO DE BOUNCE;
!
•AO FINAL, E...
NÃO HAVIA O QUE PENSAR E SIM
EXECUTAR COMANDOS. MAS
NINGUÉM TINHA A REAL VISÃO
DE COMO FICARIA O RESULTADO.
COM A FALTA DE RECURSOS
INTERATIVOS NO BROWSER E A
MONOTONIA DO TRABALHO DO
DESIGNER, O FLASH GANHOU
FORÇA.
NA ERA DE OURO DO FLASH
TODOS OS SITES TINHAM
ABERTURAS. PRA QUÊ CONTEÚDO
INTERESSANTE, SE VOCÊ PODE
COLOCAR SUA LOGO RODA...
O FLASH SE SUSTENTOU POR
MUITO TEMPO, MAS ELE TINHA
SEUS PROBLEMAS CRÍTICOS
COMO INDEXAÇÃO EM
BUSCADORES E ALTO CONSUMO
DE...
ESSES PROBLEMAS LHE
CUSTARAM A VIDA E OS
DESIGNERS VOLTARAM A ESTACA
ZERO. O LAYOUT ESTÁTICO.
NA BUSCA POR REPRODUZIR OS
RECURSOS RICOS DO FLASH O
“FAZEDOR DE HTML” VIROU:
!
FRONT-END
ENGINEER
TECNOLOGIAS EM JAVASCRIPT
QUE TRAZIAM RECURSOS
INTERATIVOS COMEÇARAM A
GANHAR AINDA MAIS FORÇA.
JQUERY
QUEM NUNCA CLICOU COM O
BOTÃO DIREITO PARA SABER SE ERA
FLASH OU NÃO?
JQUERY
QUEM NUNCA CLICOU COM O
BOTÃO DIREITO PARA SABER SE ERA
FLASH OU NÃO?
#QUEMNUNCA
MAS AINDA NÃO ERA
O MUNDO PERFEITO
O DESIGNER SÓ TINHA
ENCONTRADO ALGUÉM QUE
ENTENDIA SEU SOFRIMENTO
E LÁ ESTAVA O
FLANELINHA
O FRONT-END DEV, MESMO NÃO
SENDO DESIGNER, AINDA ERA
RESPONSÁVEL PELO DESIGN NO
BROWSER.
O DESIGNER SE LIMITAVA NO
PROCESSO CRIATIVO E A FALTA
DE EVOLUÇÃO DAS SUAS
FERRAMENTAS COMPROMETIAM
A SUA PRODUTIVIDADE
EVOLUÇÃO DA BARRA DE
FERRAMENTAS DO PHOTOSHOP
EM 24 ANOS
COM ISSO, TODO O DESIGN ERA
REFEITO
NA MONTAGEM DO SITE
NESTE MOMENTO O
PROFISSIONAL DE
FRONT-END COMEÇOU
A SER SUPER
VALORIZADO PELOS
SEUS PODERES
PARA FACILITAR A
COMUNICAÇÃO ENTRE
DESIGNERS E FRONT-END DEVS
SURGIRAM VÁRIAS FERRAMENTAS
ADOBE PARFAIT
CSS HAT
AVOCODE
PHOTOSHOP CC
DESENHA NO
PHOTOSHOP
VALIDA NO
BROWSER
DESENHA NO
PHOTOSHOP
VALIDA NO
BROWSER
DESIGN RESPONSIVO
WORKFLOW
IDEAL
WORKFLOW
ATUAL
WORKFLOW
ATUAL
WIREFRAME
SOFTWARE
OU PAPEL
PHOTOSHOP
DESENHO ESTÁTICO
E SEM INTERAÇÕES.
“FATIAR”
HTML/ CSS
PRODUÇÃO
NO BRAÇO.
SIMILAR AO
...
WORKFLOW
IDEAL
PHOTOSHOP
“FATIAR”
HTML/ CSS
WIREFRAME
SOFTWARE
OU PAPEL
DESIGN NO
BROWSER
AMBIENTE REAL
E INTERATIVO
ANÁLISE E
OTIMIZAÇÃO...
WIREFRAME
SOFTWARE
OU PAPEL
DESIGN NO
BROWSER
AMBIENTE REAL
E INTERATIVO
ANÁLISE E
OTIMIZAÇÃO
ADEQUAÇÃO DO
CÓDIGO E
OTIMIZ...
WIREFRAME
FIM DO PSD
DESENHAMOS, CRIAMOS
INTERAÇÕES E TESTAMOS NO
BROWSER EM TEMPO REAL.
ENVIAMOS O MOCKUP
FUNCIONAL E RESPONSIVO
PARA O CLIENTE, DIMINUINDO
MUITAS IDAS E VINDAS.
UMA DISTINÇÃO
DEVE SER FEITA:
O BROWSER É O VEÍCULO PARA
NOSSOS DESIGNS,
ENQUANTO OS EDITORES DE IMAGEM
SÃO FEITOS PARA EXPLORAR O
PROCESSO CRIATIVO E DE
EXPERIMENTAÇÃO.
FROONT
ADOBE EDGE REFLOW
SKETCH
TYPECAST
MACAW
WEBFLOW
WEBFLOW
WEBFLOW
WEBFLOW
ANÁLISE E
OTIMIZAÇÃO
USE AS FERRAMENTAS QUE
VOCÊ SE SENTE CONFORTÁVEL,
MAS SAIBA QUANDO AQUELAS
FERRAMENTAS PARAM DE
FAZER SENTIDO EM SEU
WORKFLOW.
APÓS A EXPORTAÇÃO DO
CÓDIGO, ORGANIZE E
VERIFIQUE SE PRECISA DE
ALGUMA ADEQUAÇÃO
OTIMIZAR
IMAGENS, CSS, JS E TUDO QUE
FOR POSSÍVEL MELHORAR.
LEMBRE-SE DE
AUTOMATIZAR TUDO!
VALIDE EM TODOS OS
BROWSERS DESEJADOS.
INTERAÇÕES/
JAVASCRIPT
É NESTA FASE QUE CRIAMOS
TODAS AS INTERAÇÕES RICAS.
QUE REALMENTE FAZEM
DIFERENÇA NO PROJETO.
HORA DE DEIXAR O DEV
COM A SUA ESPECIALIDADE:
PROGRAMAR
PORQUE ELE JÁ ESTÁ
CANSADO DE FAZER TODO
SANTO DIA: MENU, LIGHTBOX,
SLIDER E ETC.
VERSIONAMENTO
OS DESIGNERS NUNCA
TIVERAM UMA FERRAMENTA
DE VERSIONAMENTO E ERA
COMUM PERDER UM DIA DE
TRABALHO
#TADINHO
COMO TRABALHAMOS COM
CÓDIGOS E NÃO BINÁRIOS
(PSD), CONSEGUIMOS
VERSIONAR A EVOLUÇÃO DO
LAYOUT.
E O MELHOR!
!
A CADA EXPORTAÇÃO,
CONSEGUIMOS VER EXATAMENTE
A DIFERENÇA DA VERSÃO
ANTERIOR E A VERSÃO ATUAL.
DIFF NO GITHUB
SE LIGA ENTÃO QUE É
HORA DA REVISÃO
CRIAÇÃO É COM O
DESIGNER
O FRONT-END DEV TEM MAIS O
QUE FAZER DO QUE REMONTAR
LAYOUT
SITE RESPONSIVO É
COMMODITY
FAZER MAIS
COM MENOS
OTIMIZAMOS EM MÉDIA
40% DO TEMPO
GASTO NOS PROJETOS
OBRIGADO
@brunomagalhaes
@marloscarmo
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
Vous avez terminé ce document.
Télécharger et lire hors ligne.
Prochain SlideShare
Trabalho Pratico 1 - Introdução ao Design Digital
Suivant

sur

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 1 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 2 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 3 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 4 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 5 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 6 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 7 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 8 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 9 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 10 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 11 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 12 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 13 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 14 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 15 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 16 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 17 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 18 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 19 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 20 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 21 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 22 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 23 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 24 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 25 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 26 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 27 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 28 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 29 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 30 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 31 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 32 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 33 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 34 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 35 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 36 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 37 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 38 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 39 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 40 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 41 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 42 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 43 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 44 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 45 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 46 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 47 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 48 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 49 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 50 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 51 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 52 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 53 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 54 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 55 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 56 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 57 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 58 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 59 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 60 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 61 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 62 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 63 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 64 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 65 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 66 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 67 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 68 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 69 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 70 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 71 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 72 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 73 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 74 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 75 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 76 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 77 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 78 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 79 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 80 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 81 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 82 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 83 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 84 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 85 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 86 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 87 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 88 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 89

Les vidéos YouTube ne sont plus prises en charge sur SlideShare

Regarder la vidéo sur YouTube

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 91 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 92 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 93 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 94 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 95 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 96 DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow? Slide 97
Prochain SlideShare
Trabalho Pratico 1 - Introdução ao Design Digital
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

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

Télécharger pour lire hors ligne

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.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

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
  • amandareznor

    Oct. 22, 2020
  • KenniaSilva2

    Mar. 31, 2019
  • olyverriviero

    Feb. 14, 2018
  • CarolineKrone

    Jul. 15, 2016
  • AdrianoCahet

    Feb. 26, 2016
  • adamrequenamacias

    Feb. 13, 2016
  • fercastilho

    Jan. 29, 2016
  • mtdsousa

    Aug. 17, 2015
  • samukboydoido

    Jul. 28, 2015
  • marciomassari

    Jun. 30, 2015
  • emanucavalcante

    Jun. 15, 2015
  • BrunodaSilva1

    Mar. 28, 2015
  • JeffersonOtoni

    Jan. 16, 2015
  • alexmachado

    Dec. 14, 2014
  • eduardogouvea

    Oct. 6, 2014
  • RodrigoScarfone

    Oct. 6, 2014
  • julianamuccisantos

    Sep. 14, 2014
  • shaunstanislaus

    Sep. 9, 2014
  • brunosra

    Sep. 1, 2014
  • zilliejr

    Aug. 26, 2014

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.

Vues

Nombre de vues

5 134

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

146

Actions

Téléchargements

108

Partages

0

Commentaires

0

Mentions J'aime

41

×