Um guia completo para a transferência de designer-desenvolvedor

Seja você uma startup, um gigante da tecnologia estabelecido ou algo intermediário, é praticamente impossível levar um produto da ideia ao lançamento sem navegar por uma série de transferências, idas e vindas e iterações.

Uma fonte importante de atrito é que designers e desenvolvedores tradicionalmente executam tarefas muito diferentes ao criar um produto. Portanto, uma transferência que muitas vezes atormenta até mesmo as equipes de produto mais maduras é aquela entre o designer e o desenvolvedor.

Hoje vamos nos aprofundar na transferência do design para o desenvolvimento e explicar como usar algumas soluções como:

• Comunicação impecável e melhor entre equipes multifuncionais.
• Usando ferramentas de automação com kits de interface do usuário avançados e recursos de desenvolvimento.
• Esclarecendo detalhes como onde estão todos os ativos de design para que as equipes possam acompanhá-los de forma rápida e fácil.

Portanto, se você quiser aprender tudo sobre as maneiras de lidar com essas transferências, este guia é para você.

O que é o Developer Handoff e onde ele se divide?

A transferência do desenvolvedor costuma ser o estágio mais crítico – mas frustrante – no processo de desenvolvimento de um produto digital: o estágio em que um design ou protótipo está pronto para os desenvolvedores implementarem.

Um dos problemas com a transferência designer-desenvolvedor pode estar na própria terminologia. "Handoff" sugere que o design é entregue ao desenvolvedor, e agora é responsabilidade do desenvolvedor dar vida ao produto. No entanto, nenhum design está completo até que o produto seja usado pelos usuários. Portanto, é imperativo que designers e desenvolvedores se comuniquem durante as fases de design e desenvolvimento.

No fluxo de trabalho tradicional, os designers trabalham em silos, entre a fase de descoberta e desenvolvimento, para criar maquetes perfeitas com base em um briefing. Então, após a aprovação do cliente, eles os jogavam por cima do muro para os desenvolvedores. Este processo está repleto de problemas. Porque, embora os designers se esforcem muito para criar soluções digitais que sejam perfeitamente medidas e consistentemente elaboradas, os designs e os sistemas de design não se traduzem fluentemente em sistemas de desenvolvimento.

Parte do problema é que quanto mais o designer faz com uma interface do usuário, mais ele deve se comunicar com um desenvolvedor. Portanto, não basta entregar um arquivo de design Sketch, por exemplo, e deixar o desenvolvedor rodar com ele. Os designers devem fornecer especificações de design que expliquem como todas as peças móveis precisam ser dispostas, espaçadas, estilizadas, coloridas, engajadas e assim por diante. Tem sido a única maneira de garantir que um aplicativo termine perfeito em pixels no final. Mesmo assim, ainda requer muita implementação por parte do desenvolvedor, uma vez que ele está dentro de seu IDE.

Os desenvolvedores normalmente não têm o hábito de codificar com HTML e CSS, o que é um trabalho tedioso e representa apenas a interface do usuário. Há muito mais código nos bastidores que faz um aplicativo da web funcionar e nem todos os desenvolvedores são adeptos ou interessados em aprender a escrever a marcação da interface do usuário. Quando eles são forçados a essa posição, a curva de aprendizado íngreme adiciona mais tempo aos projetos e os retrabalhos e depuração resultantes fazem com que os custos fiquem fora de controle.

Melhore a comunicação entre designer e desenvolvedor

Ao longo dos anos, analisamos de perto a divisão entre designers e desenvolvedores e identificamos áreas em que as melhorias poderiam criar uma transferência mais rápida, menos controversa e mais simplificada. Uma boa comunicação é fundamental em praticamente qualquer relacionamento, por isso faz sentido que seja um requisito para uma transferência suave de design para desenvolvimento. Falhas de comunicação podem resultar em todos os tipos de problemas e mal-entendidos – mesmo em diferentes interpretações dos mesmos objetivos, o que pode levar a uma experiência do usuário confusa ou totalmente ruim. E nenhuma equipe de produto tem tempo para isso.

Problemas comuns causados por uma má comunicação designer-desenvolvedor são:

• Múltiplos ciclos de feedback desnecessários entre designers e desenvolvedores
• Problemas inesperados de garantia de qualidade ou problemas de controle de qualidade que consomem mais tempo do que o previsto
• Incapacidade de alavancar habilidades sobrepostas
• Falha em aproveitar adequadamente as novas ferramentas que provavelmente facilitariam a colaboração.

Use um sistema de design

"Os sistemas de design são um investimento. Muitas empresas não empregam pessoas para se concentrar em sistemas de design até que as ineficiências de não ter um se tornem muito dolorosas de suportar.

– Diana Mounter, GitHub

Um sistema de design, em termos simples, representa um inventário deliberado de padrões de UX e guias de estilo de marca que são então realizados como componentes de software correspondentes que podem ser reutilizados ou contextualizados para a criação de aplicativos de software. Um sistema de design também pode ser estendido para conter orientação de voz e tom para escrever conteúdo, modelos de página e até mesmo fluxos de usuário. Ele é feito à mão para o domínio de aplicativo específico e o contexto de uso de cada organização. Acima de tudo, ele serve como uma única fonte de verdade para as equipes de produto ao criar aplicativos e representa um contrato de colaboração entre design e desenvolvimento.

Sem um sistema de design, os designers não têm parâmetros claros que restrinjam seu trabalho. Eles podem ser muito criativos e criar inconsistências que levam a experiências ruins do usuário e frustração para os desenvolvedores. Tudo isso dificulta o processo de transferência.

Envolva os desenvolvedores desde o início

Como mencionado anteriormente, um erro comum que as equipes cometem é esperar que os designers façam seu trabalho primeiro e depois passar o design do produto para os desenvolvedores. Isso não só pode ser confuso, mas também um pouco condescendente ("Aqui está, terminei, tchau!").

Para tornar a transferência mais bem-sucedida, uma prática recomendada é trazer os desenvolvedores antecipadamente com estas etapas:

• Inclua o desenvolvedor líder no projeto (ou o desenvolvedor da interface do usuário, no mínimo) na discussão inicial de ideação
• Inclua o desenvolvimento em todas as reuniões em que o design da tela e o design de interação são discutidos
• Se você estiver em uma agência, inclua o desenvolvimento em teleconferências com clientes
• Buscar informações dos desenvolvedores sobre como os elementos de design provavelmente se traduziriam em um aplicativo da Web ou um aplicativo móvel versus um aplicativo de desktop
• Executar ideias de design iniciais para desenvolvedores anteriores, para que quaisquer problemas potenciais com o código possam ser identificados quando for mais fácil de ajustar

Almoce - ou encontros remotos

Em vez de deixar todos trabalharem em silos, reúna todos pelo menos ocasionalmente. Incentivar toda a sua equipe a almoçar juntos é um passo significativo para o compartilhamento espontâneo de ideias. Além disso, se for fisicamente possível, considere colocar os membros da equipe trabalhando na mesma função juntos na mesma sala.

Se você tiver designers e desenvolvedores trabalhando em locais diferentes, marque reuniões virtuais de tempos em tempos e deixe-os discutir o progresso do trabalho. É incrível o que um pouco de interação humana pode fazer pelo seu ambiente de trabalho e pelos resultados do seu produto.

Também discutiremos brevemente como o envolvimento de designers e desenvolvedores no início do processo pode ser drasticamente aprimorado com um sistema completo de design para código.

Forneça arquivos de design e todos os ativos necessários

Uma parte da responsabilidade de cada designer é preparar os desenvolvedores para o sucesso.

Uma das primeiras coisas que podem ajudá-lo a conseguir isso é fornecer aos desenvolvedores todos os arquivos e ativos de design necessários. Volte aos seus planos: você concordou em fazer tudo via Dropbox, Google Drive ou alguma outra ferramenta? Comunique onde esses ativos estão e mantenha as linhas de comunicação abertas para resolver quaisquer peças, dúvidas ou preocupações que faltam.

Ter uma reunião de transferência

Ter uma reunião de transferência é uma das maneiras mais eficazes de executar uma transferência adequada entre as equipes de design e desenvolvimento. É uma ótima maneira de expor tudo, abordar questões candentes e deixar toda a equipe animada e motivada para o trabalho que tem pela frente. Discuta quaisquer peculiaridades e perguntas de ambos os lados e prepare-se para o que está por vir nas fases de desenvolvimento, controle de qualidade e lançamento. Defina cronogramas e expectativas claros, nomeando os indivíduos específicos encarregados de garantir que cada fase cruze a linha de chegada.

Considere incentivar uma compreensão mútua de habilidades e conceitos básicos, fornecendo novos recursos para aprender. Por exemplo, estimula os designers a aprender o básico da codificação para entender melhor por que alguns designs não podem ser traduzidos em código funcional. Ao mesmo tempo, ajuda os desenvolvedores a aprender mais sobre design e como diferentes elementos de design são usados.

Figma Entrega do desenvolvedor

Embora ferramentas como Figma prometam uma transferência simplificada para desenvolvedores, não é realmente o caso. O problema com a transferência de desenvolvedor Figma ou Sketch transferência de desenvolvedor é que eles estão fazendo a parte menos complexa do que realmente importa para os desenvolvedores. Em uma ferramenta de transferência de desenvolvedor, o objetivo do desenvolvedor é minimizar o tempo de desenvolvimento, reduzir o tempo de codificação de interface do usuário complexa e acelerar a produtividade da equipe. A maioria desses esquemas de transferência de desenvolvedor em Figma ou Sketch são puramente uma cópia/colagem de HTML ou CSS (ou "Markup") para um elemento específico da interface do usuário em uma tela. O desenvolvedor ainda precisa escrever o código de tela complexo, incluindo layout, posicionamento dos elementos da interface do usuário e garantir que o código do elemento da interface do usuário "entregue" da ferramenta de design esteja correto.

Exemplo típico de como é uma transferência de desenvolvedor no Figma ou Sketch

Com o low-code App Builder ™, você obtém o mesmo conceito de transferência de desenvolvedor de Figma ou transferência de desenvolvedor Sketch, mas se continuar lendo, verá que nossa ferramenta leva essa transferência de desenvolvedor a outro nível.

Exemplo de como é uma ferramenta de marcação de código/linha vermelha no App Builder.

App Builder Entrega do desenvolvedor

Como mencionado anteriormente, uma parte fundamental da melhoria da transferência de design para desenvolvimento é transformar designs em código HTML com eficiência. Muitas plataformas de design se concentram quase exclusivamente na parte de design e, em seguida, usam plug-ins e outras soluções alternativas para preparar arquivos de design para o desenvolvedor.

Mas e se você tivesse uma plataforma inteira focada em design para código - uma única plataforma de desenvolvimento digital que permite design e prototipagem, mas também gera código Angular completo e perfeito em pixels com apenas um clique.

Como seria isso usando Sketch como exemplo?

Com App Builder e nosso UI Kit para Sketch, tudo o que você cria no Sketch (disponível para Figma também) usa um sistema de design, para que todas as especificações de estilo e temas correspondam aos componentes do Angular real. Com o clique de um botão, você pode gerar HTML, CSS e código Angular de alta qualidade, diretamente do seu design.

App Builder oferece 2 opções para ir do design ao código:

1. Use o plug-in do Visual Studio Code para selecionar componentes ou telas e permitir que o serviço baseado em nuvem gere código e injete-o em seu aplicativo Angular existente.
2. Arraste seu arquivo Sketch diretamente para sua área de trabalho no App Builder e use o designer WYSIWYG para continuar editando seu design ou simplesmente obter seu código com 1 clique.

O que um desenvolvedor realmente quer – código pronto para produção que pode ser usado imediatamente em seu aplicativo.

Aqui estão partes de uma exportação de código Sketch:

• Todos os ativos Sketch são importados de um arquivo de projeto
• Nem todos os designs têm camadas estruturadas para saída HTML, por isso é importante usar uma ferramenta que analise e reestruture os elementos de design conforme necessário para uma saída HTML de alta qualidade.
• Você pode converter elementos de design em elementos HTML como botão, entrada ou seleção conforme necessário, e editar visualmente elementos, agrupá-los e organizá-los manualmente.
• Você pode publicar seu design e compartilhar com outras pessoas, permitindo que todos baixem a saída HTML/CSS.
• Ele se baseia apenas em HTML e CSS, não usa ou assume nenhum Javascript na saída. Um desenvolvedor pode usar o HTML de saída com Angular, React, VueJS ou qualquer outra biblioteca de front-end.

App Builder se destaca pela qualidade do nosso código. A Infragistics não é um Johnny-come-lately para o desafio de produzir componentes de interface do usuário da melhor qualidade; Estamos nisso há 30+ anos. Construímos componentes para empresas da Fortune 500 que dependem de nossas grades e gráficos todos os dias para lidar com transações financeiras em tempo real, conversão de energia para infraestrutura em grande escala ou streaming de dados de IoT.

Geramos código limpo pronto para produção que é utilizável, depurável e pode resistir ao teste do tempo. E você obtém o pacote completo, compatibilidade de ferramentas de design, sistemas de design, kits de interface do usuário, prototipagem, testes de usuário e geração de código 100% pronta para produção.

Quebrando as barreiras

Muita atividade está acontecendo à medida que as empresas reconhecem que lançar aplicativos melhores e mais rápido significa reduzir as barreiras de transferência. Novas abordagens devem se concentrar em banir a ideia de "transferência" e fazer com que designers e desenvolvedores comecem a trabalhar juntos mais cedo e com mais frequência. Faça reuniões presenciais ou remotas, comunique-se mais, resolva problemas juntos e use ferramentas como sistemas de design e software de design para código que reduzem drasticamente o tempo de envio. O software de design para código, em particular, ajuda a reduzir falhas de comunicação, reduzir erros e diminuir os níveis de frustração, fornecendo um local para designers e desenvolvedores consultarem. E permite que todos no processo de design de produtos digitais, incluindo partes interessadas, testadores e usuários, contribuam de forma mais fácil e eficaz para um produto final com o qual todos possam ficar satisfeitos.

Para ver como nosso App Builder WYSIWYG ajuda a acelerar o design para o código e cumpre a promessa de design real para a transferência do desenvolvedor, assista a este vídeo rápido e inscreva-se para uma avaliação, ou você pode assistir a esta visão geral abrangente do produto App Builder e tutorial abaixo para saber tudo sobre seus recursos e capacidades e começar a usá-lo.

Se você tiver alguma dúvida, envie-me um e-mail para jasonb@infragistics.com e vamos discutir.