Designers, como colaborar com seus desenvolvedores?

Durante um projeto, designers e desenvolvedores trabalham juntos. O relacionamento deles é fundamental para o bom andamento.

Antes de mais nada, tenha em mente que os dois perfis são complementares e têm boas chances de ter o mesmo objetivo: completar e divulgar o projeto.

No entanto, eles têm prioridades diferentes e não abordam os problemas da mesma perspectiva: os designers estão ligados à aparência e à experiência perfeita do usuário, enquanto os desenvolvedores estão preocupados com desempenho, estabilidade e restrições técnicas.

A colaboração é, portanto, essencial. Possibilita contar com o conhecimento de todos para garantir uma implementação tranquila e projetar uma experiência única.

Embora existam processos, nós, designers e desenvolvedores, podemos somar uma dose de esforço para garantir que a corrente esteja fluindo e a informação esteja fluindo.

Já estive em ambos os casos: atualmente sou designer e envio meus modelos para os desenvolvedores. E durante minhas experiências anteriores, eu era um desenvolvedor que recebia modelos de designers.

Portanto, o conselho sobre o qual falaremos hoje não vem apenas de uma observação como designer, mas de uma compreensão das questões e problemas de ambas as partes.

São ações que, como designer, permitirão que você entre em contato com os desenvolvedores e colabore calmamente com as equipes técnicas, mas também coisas que os desenvolvedores apreciam e que colocamos em prática durante a colaboração.

#1 ENVOLVE

O que costumo notar nos processos em atribuição é esse momento específico em que o designer mostra seus modelos (vários modelos já bem acabados) e isso é uma grande descoberta para os desenvolvedores.

Isso não é bom para o projeto ou para o cliente, gerentes de projeto ou desenvolvedores. Estamos nos afastando da colaboração em equipe e acho que há uma verdadeira falta de consideração pelo desenvolvedor.

E eu acho que é mútuo, como designer, é chato ser expulso do projeto assim que as maquetes são entregues aos desenvolvedores.

Devemos, portanto, incluir os desenvolvedores desde o início do projeto e permanecer na corrida até o final do projeto.

Durante o projeto,

  • Inicie a conversa: os desenvolvedores se sentirão valorizados e isso permitirá, no momento do desenvolvimento, que eles tenham uma melhor compreensão do projeto e dos problemas encontrados.
  • Validar restrições técnicase ajudar uns aos outros a encontrar soluções ou compromissos.
  • Colete sua opinião: os desenvolvedores são inteligentes e, acima de tudo, certamente acumularam experiência em outros projetos e, portanto, podem trazer valor agregado.

Durante o desenvolvimento, mesmo que as telas já tenham sido transmitidas,

  • Mantenha contato: para verificar se os desenvolvimentos estão de acordo com as decisões tomadas no workshop e também se nos convém. Isso permite refinar, mas também mostrar que você está disponível se algo estiver faltando ou se houver alguma dúvida sobre um recurso.
  • Faça sugestões para microinterações​ guiar o usuário e aprofundar o vínculo entre máquina e humano.
  • Seja responsivo: às vezes o desenvolvedor nos pede para mudar alguma coisa. É possível que tecnicamente não seja viável ou que não corresponda à base técnica escolhida. Neste caso, devemos manter a mente aberta e dialogar para encontrar um compromisso.

Se designers e desenvolvedores colaborarem do início ao fim, é menos provável que os projetos sejam impraticáveis ​​ou inacabados.

#2 COMPREENDER

O que me ajuda muito durante minhas missões é conhecer algumas bases de código. Saber como meus modelos serão cortados e implementados, sabendo também antecipar as restrições técnicas que os desenvolvedores podem encontrar, isso me ajuda a adaptar meu design e propor soluções viáveis.

Antecipar estas questões permite não perder tempo mas também criar um diálogo construído com os programadores com quem trabalho.

#3 DOCUMENTO

Transição perfeita com ferramentas que me permitem compartilhar maquetes com desenvolvedores para que eles tenham tudo o que precisam. Por exemplo, Invision ou Zeplin.

Graças a essas ferramentas, o desenvolvedor não perde tempo abrindo e entendendo o software do designer. Assim, ele pode analisar os modelos (margens, cores, estilos de texto, localizar-se em relação à grade, etc.). Há também a possibilidade de adicionar comentários e assim ter uma troca permanente sobre as dúvidas ou questões de cada um.

Se nenhuma dessas ferramentas puder ser usada, aconselho a criar um guia de estilo. Este documento reúne códigos de cores, tipografias e estilos de texto, ícones, espaçamento e grade, interações e estilos de botão/link.

Ao enviar os modelos, também é importante lembrar de exportar todos os elementos gráficos (logotipos, ilustrações, ícones, padrões, etc.) utilizados para o design da interface. O bom de ferramentas como o Z​eplin​,​ é que com 2 cliques na ferramenta de design, os ativos ficam disponíveis para os desenvolvedores no Z​eplin.​

O ideal é discutir todos esses processos e ferramentas no início do projeto e chegar a um acordo sobre uma metodologia de intercâmbio adequada a todos. Em geral, sou força de propostas: dou exemplos de ferramentas que poderiam ser utilizadas e pontos de intercâmbio a serem planejados. Então eu vejo e ajusto com base no feedback da equipe.

Se existir um Design System, o designer irá projetar usando seus elementos. Portanto, é importante descobrir se um Design System está em vigor e se comunicar com a equipe de desenvolvimento sobre isso. Se não houver, pode ser interessante questionar o interesse de estabelecer um Design System. No entanto, não é necessário para nenhum tipo de projeto e não deve ser um obstáculo para as discussões com a equipe de desenvolvimento se não for o caso.

#4 MOSTRAR

Construir um protótipo e ver o panorama geral do projeto pode beneficiar o designer e a experiência que está construindo.

Mas essa visão também é benéfica para o desenvolvedor. Isso permite que ele absorva o curso e entenda as diferentes etapas.

  • Ele será assim capaz de detectar elementos semelhantes, dificuldades potenciais (futuras) que possa encontrar ou elementos existentes.
  • Ele poderia ter ideias em particular sobre as animações e ter tempo para antecipar e pensar na otimização do código.
  • Além disso, também pode ser interessante mostrar exemplos ou inspirações para desenvolvedores.
    Aconteceu comigo durante certas missões, não ter tempo de fazer um protótipo avançado com as animações que eu imaginava. Mas conversar com a equipe de desenvolvimento sobre algumas animações encontradas em outros sites me permitiu comunicar a ideia e permitir que os desenvolvedores tivessem um exemplo do que eu tinha em mente e conseguissem reproduzi-lo.

#5 CENTRALIZE

Ser organizado ! Uma das chaves na hora de colaborar é centralizar documentos, modelos, notas e não espalhar. Caso contrário é um inferno navegar e saber onde obter esta ou aquela informação.

Mas isso também implica ser rigoroso, por exemplo, com a nomenclatura dos elementos, espaçamento, tamanho do bloco, etc. Os desenvolvedores precisam dessa estrutura para não se fazerem muitas perguntas e se perderem.

Podemos sentir que estamos perdendo tempo. Mas o fato de montar uma organização e uma metodologia desde o início do projeto nos poupa dinheiro depois. Criamos automação que nos torna mais eficientes e melhora a colaboração. E isso aparecerá no produto final.

CONCLUSÃO

Durante minhas missões, notei que os desenvolvedores apreciam que estamos interessados ​​na parte técnica e que damos o máximo de detalhes possível sobre nosso trabalho. O fato de falar a mesma língua ou pelo menos ter algumas palavras do vocabulário em comum, permite resolver um problema e oferecer uma solução que cada um de nós entenda.

É por isso que encorajo designers e desenvolvedores a entrar em contato e trocar – por meio de reuniões, mensagens e/ou ferramentas.

Deve ser lembrado que a colaboração entre cada um dos atores será benéfica em todos os níveis do projeto, desde a concepção até a produção.

 

Fonte da imagem: https://undraw.co/illustrations

 

 

Alexa CUELLAR UX-UI Designer @UX-Republic

 


Nossos próximos treinamentos