designer e front-end dev: prontos para mudar seu workflow?
Post on 05-Dec-2014
2.145 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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, ELA IRÁ CRESCER EM UMA ESCALA DE 2X DURANTE 500 MS; !•POR FIM, IR PARA A ESCALA 0 EM 300 MS COM FADE-OUT;
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 RODANDO E COM MÚSICA?
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.
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.
JQUERYQUEM NUNCA CLICOU COM O
BOTÃO DIREITO PARA SABER SE ERA FLASH OU NÃO?
JQUERYQUEM 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
IDEALWORKFLOW
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
PHOTOSHOP
INTERAÇÕES/ JAVASCRIPT
CRIAÇÃO DE RECURSOS RICOS
WORKFLOW
IDEAL
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
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
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
top related