Workflow ideal para designers e desenvolvedores front-end

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

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

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

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

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

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

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.

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

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

DESENHA NO
PHOTOSHOP
VALIDA NO
BROWSER

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

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

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.

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.

É 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.

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.

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

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

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

OBRIGADO
@brunomagalhaes
@marloscarmo

Workflow ideal para designers e desenvolvedores front-end

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a Workflow ideal para designers e desenvolvedores front-end

Semelhante a Workflow ideal para designers e desenvolvedores front-end (20)

Workflow ideal para designers e desenvolvedores front-end