Como facilitar a comunicação entre designer e programador?

Quando falamos de relações entre setores de uma empresa, sabemos o quão desgastante é estabelecer uma boa conversa. Esse artigo fala sobre minha visão como designer e minha experiência como programador, para tentar mapear as etapas desse conflito. E claro, ao final citarei pontos que podem melhorar a convivência dentro dos projetos.

Começo este artigo falando que atualmente sou muito mais programador do que designer, mas o motivo que me levou a migrar para o lado negro da força não foi só salarial.

De um modo geral passei a ver que o designer não tinha seu valor. Além da pressão faltava pouca conversa para saber das possibilidades quanto a tecnologia. Pular etapas básicas na criação de um layout era só um detalhe do que estava por vir. Vi a área de programação muito mais concentrada em documentação, estrutura, conceito de expansão e isso me despertou um 'ar' de que era possível seguir um processo.

Passei então a lidar menos com designers, logo percebi que programadores eram inseridos em um projeto somente nas últimas etapas. Um novo desgaste e novos problemas, passei então a perder preciosos minutos formulando e-mails justificativos. Afinal, eu agora precisava informar por que diabos o 'carrossel' que o designer desenhou não funcionava no maldito Internet Explore 7.

Dediquei grandes conversas com amigos de faculdade, colegas de trabalho e passei a entender que a falta de conversa já se tornou uma disputa para saber quem tem o maior ego. Sem mais explicações, adentro em pontos onde a conversa entre designers e programadores pode ser a chave para um futuro colaborativo.

Aproveitem as documentações

Nem todo designer sabe, mas é fundamental para os desenvolvedores entenderem o público alvo da aplicação. Dessa forma ele poderá avaliar também como esse target utiliza determinada tecnologia. Em alguns casos os desenvolvedores criam uma espécie de documentação chamada 'caso de uso'. Nela uma história é contada para entender o que o usuário realiza dentro da aplicação. Normalmente são bem feios e poderiam ter uma ótima apresentação se mesclados com definição de público elaborada pelos designers.

Fluxograma é mais essencial que um protótipo com visual atraente!

É extremamente comum designers não considerarem que um sistema realiza ações no back. Isso acaba gerando grandes problemas na fase de validação de uma aplicação. Um ótimo exemplo é o processo de compra. É natural que um designer só considere que o cliente da loja visualiza o produto, realiza a compra, recebe a confirmação de pagamento e fim. Por ele desconsiderar diversas fases do sistema é comum alguma tela não ser construída e feita ás pressas.

Programação não é um software da Adobe com pré set's

Quando um designer cria uma interface o maior desafio dele é preencher uma página em branco, dessa forma ele acaba buscando referências de outros aplicativos. Durante essa etapa, grande parte dos designers esquece que está criando uma interface para um cliente e seus gostos pessoais falam mais altos. Ele acaba olhando um menu com animações incríveis e usando em sua interface sem consultar um desenvolvedor Front.

O que para ele demorou alguns minutos para ganhar vida em um artboard do Photoshop, para o programador demorou 2 semanas para ser desenvolvido, nem estou considerando os testes responsivos. É claro que o designer não vai ter ideia do que pode ou não pode, mas ele deve consultar nos casos mais mirabolantes a viabilidade de um desenho. Já ouvi de muito designer que programador gosta de limitar a criatividade, mas garanto que não faz sentido e de certa forma é até ofensivo falar isso para um programador.

Perceba que um projeto tem um começo, meio e fim. O programador normalmente cuida do processo meio e fim, portanto se a batata ficar quente vai estourar muito mais na mão dele do que para um designer. Por isso é fundamental gerar uma discussão sobre os desenhos mais complexos de uma interface, pois se nada der certo um plano B já será encaixado.

Entregue um guia visual básico

Como eu já perdi horas alterando cores, tamanhos de fonte, valor de border-radius e espaçamento. O mais curioso é que em 99% dos casos, sem sacanagem, o designer nem sequer enviou o hexadecimal por e-mail. Designer, sempre que criar uma interface crie um novo artboard e jogue lá de qualquer jeito botões, linhas, componentes e cores que você criar. Defina os títulos como H1,H2...H6 e explique que eles possuem font-sizes, line-height's e espaçamentos para determinadas situações. Isso vai facilitar o trabalho do front-end e o seu, ao avaliar o quão próximo do desenho o layout está.

Utilize um grid de colunas, mas por favor use um software adequado!

Existem inúmeros formatos de grids, porém os mais usados são os de 12 colunas com espaçamento (gutter) de 15px. Sempre que criar um layout tenha em mente que é muito provável a utilização de um Bootstrap ou Foundation para estrutura do front. Ambos são Frameworks que já possuem um sistema padrão de 12 colunas, pois facilitam a adaptação da interface para as quebras de tela (Large, Medium, Small, Mobile).

Um designer digital que se preze sabe que o pacote Adobe possuí um software para cada necessidade. Ainda sim já presenciei layout's desenvolvidos no After Effects e no InDesign. Os únicos softwares que você deve usar basicamente são Adobe Photoshop e o Adobe Illustrator, pois possuem unidades de medida próprias e ferramentas que ajudam na hora da criação.

Gere um pacote de ícones padronizado

É comum um programador pedir ícone como imagem, mas você como designer deve impedir que continue dessa forma. O motivo é simples, quando falamos de ícones devemos gerar um pacote SVG padronizado e assim converter para um font-icon. Eu gosto muito de um site que um grande amigo - Salve Vitor Almeida compartilhamos horas de tristeza ao receber layout's - me apresentou, a ferramenta IcoMoon. A única informação que você deve saber é que o artboard no Illustrator deve possuir um formato igual, como : 30x30 pixels e o vetor deve ocupar os limites do artboard.

______

O objetivo é sempre ceder a nível que o trabalho de todos tenha um ótimo resultado. Evite gerar conflitos desnecessários e esteja sempre disposto a colaborar, compartilhe seus resultados para com os outros envolvidos. Dessa maneira o ambiente de trabalho com toda a certeza será mais produtivo.

Claro que o problema também impacta em outros fatores, mas falei deles nesse outro artigo aqui :Uma má gestão reflete em todo o processo do produto!