Designer e front-end, até que o grid os separem.
Uma breve ilustração da relação de amor Designers x Front-ends
Cena 1
Designer trabalhando feliz da vida, todo mundo curtindo a criatividade do carinha, tudo lindo as mil maravilhas até o designer entrega o layout para equipe de front-end fazer o “corte”, aí o bicho pega meu velho. É nesse ponto exato onde descobrimos se o projeto vai andar rápido ou vai engasgar e se vai engasgar apenas um pouco ou vai tirar umas noites de sono pra quem vai codificar a criança.
Quando o front abre o photoshop e começa a fazer as verificações de espaços, catalogar as cores, fontes, etc. Descobre que o Senhor Fantástico do design não respeitou em nada o grid estabelecido pela equipe. O sangue sobe pra cabeça, porque vai ser preciso ajustar o bendito layout para o grid padrão, caso contrário o css vai ser inundado por gambiarras pra poder fazer o layout funcionar.
O resultado desses ajustes e das gambiarras é: muuuuuuito mais código, pouca semântica e o aumento significativo de horas trabalhadas, nem quero falar se o projeto for responsivo, nesse caso a dor de cabeça vai ser bem maior.
Cena 2
O Designer fez um ótimo trabalho, layout passou por todas as revisões e ajustes e finalmente foi finalizado e aprovado. O front recebe o o layout todo documentado e organizado semanticamente, um primor. Passam-se os dias e enfim é apresentado o layout transformado em site que vai para o teste de qualidade. Momentos de tensão… Chama o designer aí. O carinha vem todo animado pra ver seu filhote nascido e encontra na tela um Frankenstein.
Não quero dizer que o front seja tão lerdo ao ponto de fazer algo totalmente diferente, mas é que se não prestarmos atenção aos detalhes do layout o resultado final vai ficar ruim. Cores mal catalogadas com pequenas diferenças no hexadecimal, fontes com peso e tamanho um pouco diferentes do especificado e espaçamentos maiores ou menores do que o layout pedia vão dar um aspecto de desleixo com o design e o resultado não vai ser agradável no fim.
O que quero abordar aqui é a forma de trabalho colaborativo entre o designer e o dev front-end, porque, na minha opinião, no final das contas design e front são duas partes de um mesmo corpo.
O designer deve ter em mente que após o seu trabalho ainda existe um longo caminho até o projeto ser finalizado e o front-end precisa entender que quando recebe um bom layout, muito estudo foi aplicado e cada elemento precisa obedecer exatamente o que foi determinado pelo designer e pelos outros profissionais envolvidos até se chegar ao “layout final”, por isso é indispensável dar atenção a todos os detalhes, alinhamentos, tamanhos de fontes, estrutura de blocos, etc.
Se você está começando, “nessa vida loka”, uma prática que pode ajudar, é criar um arquivo html vazio e aplicar background-image na tag body com um .jpg do layout de cada página, assim dá pra ir verificando ao alternar as abas no browser se existe diferenças entre o layout original e o seu front.
Para quase todos os problemas entre designer e front-end existe uma fórmula mágica chamada Grid. O grid é o ponto de encontro entre o designer e o dev front-end.
O papel fundamental do grid é organizar a informação. Partindo deste princípio, o uso de grids simplifica do processo de estruturação de conteúdo, flexibiliza a hierarquia, dá agilidade à produção e aumenta a precisão do layout, ou seja, grids dão dinamismo para o código HTML.
Todo designer e toda equipe que se preze deve SEMPRE utilizar algum sistema de grid para estruturar o layout. Geralmente em agencias os times têm um sistema de grid, queridinho, onde a estrutura dos projetos é desenvolvida com base nele.
Se você é designer facilite a vida do front-end usando grids, documentando o layout, não crie layouts impraticáveis, organize seu PSD de forma semântica. (Vale a pena ler o Photoshop etiquette.)
Se você é front-end valorize o trabalho do designer e dê total atenção aos detalhes do layout, seja “olho de pixel” para que seu trabalho dê vida e não mate o layout com fontes ou espaçamentos diferentes dos especificados, lembre-se que layouts são aprovados pelo cliente antes de serem montados, se você com seu desleixo altera a estrutura o produto que vai ser entregue não é o que foi aprovado e isso pode dar problemas futuros.
Quando o designer e o front-end andam em sinergia o trabalho da equipe de design vai fluir com muito mais facilidade, sem gargalos, e melhor ainda, sem retrabalho. Enfim, o que vale é o profissionalismo e a compreensão de somos parte de uma engrenagem que faz a linha de produção rodar.
