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