Entrega Designer-Desenvolvedor – Guia 2023

Quer você seja uma startup, um gigante da tecnologia estabelecido ou algo no meio do caminho, é praticamente impossível passar de uma ideia ao lançamento sem navegar por uma série de entregas, retornos e iterações.

Uma fonte importante de atrito é que designers e desenvolvedores tradicionalmente executam tarefas muito diferentes ao criar um produto. Portanto, uma entrega que frequentemente assola até mesmo os times de produto mais maduros é aquela entre o designer e o desenvolvedor.

Hoje vamos mergulhar na entrega de design-para-dev e explicar como usar algumas soluções como:

• Comunicação clara e melhorada entre times multifuncionais.
• Usar ferramentas de automação com kits de UI ricos e recursos de desenvolvimento.
• Esclarecer detalhes como onde todos os ativos de design vivem para que os times possam acompanhá-los rapidamente e mais facilmente.

Então, se você quer aprender tudo sobre as maneiras de lidar com essas entregas, este guia é para você.

Experimente App Builder Experimente App Builder Experimente App Builder

Solicitar Demo

O que é o Handoff de Desenvolvedor e Onde Ele Se Quebra?

O handoff do desenvolvedor é frequentemente o estágio mais crítico — ainda que frustrante — no processo de desenvolvimento de um produto digital: o estágio quando um design ou protótipo está pronto para os desenvolvedores implementarem.

Um dos problemas com o handoff designer-desenvolvedor pode estar na terminologia em si. “Handoff” sugere que o design é entregue ao desenvolvedor, e agora é responsabilidade do desenvolvedor trazer o produto à vida. No entanto, nenhum design está completo até que o produto seja usado pelos usuários. Portanto, é imperativo que designers e desenvolvedores se comuniquem ao longo das fases de design e desenvolvimento.

No fluxo de trabalho tradicional, designers trabalham em silos, entre a fase de descoberta e desenvolvimento, para criar mockups pixel-perfeitos com base em um briefing. Depois, após a aprovação do cliente, eles os lançavam por cima do muro para os desenvolvedores. Este processo está repleto de problemas. Porque mesmo que designers se dediquem muito a criar soluções digitais perfeitamente medidas e consistentemente elaboradas, designs e sistemas de design não se traduzem fluidamente em sistemas de desenvolvimento.

Parte do problema é que quanto mais o designer faz com uma UI, mais ele deve comunicar a um desenvolvedor. Portanto, não é suficiente entregar um arquivo de design Sketch, por exemplo, e deixar o desenvolvedor correr com isso. Designers devem fornecer especificações de design que expliquem como todas as peças móveis precisam ser dispostas, espaçadas, estilizadas, coloridas, envolvidas e assim por diante. Tem sido a única maneira de garantir que um app acabe pixel-perfeito no final. Mesmo assim, ainda requer muita implementação por parte do desenvolvedor uma vez que está dentro de seu IDE.

Desenvolvedores não têm típicamente o hábito de codificar com HTML e CSS, que é trabalho tedioso e representa apenas a UI. Há muito mais código nos bastidores que faz um app web funcionar e nem todos os desenvolvedores são competentes em ou interessados em aprender a escrever a marcação da UI. Quando forçados para esta posição, a curva de aprendizado íngreme adiciona mais tempo aos projetos e as retificações resultantes e debugging enviam custos subindo descontroladamente.

Melhore a Comunicação Designer-Desenvolvedor

Ao longo dos anos, examinamos de perto o colapso entre designers e desenvolvedores e identificamos áreas onde melhorias poderiam criar uma entrega mais rápida, menos contenciosa e mais otimizada. A boa comunicação é essencial em praticamente qualquer relacionamento, portanto faz sentido que seja uma exigência para uma entrega de design-para-dev suave. Os colapsos de comunicação podem resultar em todos os tipos de problemas e mal-entendidos — até mesmo em interpretações diferentes dos mesmos objetivos, que podem levar a UX confusa ou até ruins. E nenhum time de produto tem tempo para isso.

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

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

Use um Design System

“Design systems são um investimento. Muitas empresas não empregam pessoas para focar em design systems até que as ineficiências de não ter um se tornem muito dolorosas de suportar.”

– Diana Mounter, GitHub

Um design system, em termos simples, representa um inventário deliberado de padrões de UX e guias de estilo de marca que são depois realizados como componentes de software correspondentes que podem ser reutilizados ou contextualizados para construir aplicações de software. Um design system também pode ser estendido para conter orientação de voz e tom para escrita de conteúdo, templates de página e até fluxos de usuário. É feito à mão para o domínio de aplicação específico e contexto de uso de cada organização. Acima de tudo, serve como uma única fonte de verdade para times de produto ao construir aplicações e representa um contrato de colaboração entre design e desenvolvimento.

Sem um design system, designers não têm parâmetros claros que constrangem seu trabalho. Eles podem ficar muito criativos e criar inconsistências que levam a más experiências de usuário e frustração para desenvolvedores. Tudo isso prejudica o processo de entrega.

Envolva Desenvolvedores Cedo

Como mencionado anteriormente, um erro comum que times cometem é esperar que os designers façam seu trabalho primeiro e depois passar o design do produto aos desenvolvedores. Não só isso pode ser confuso, como também é um pouco condescendente (“Aí está, terminei, tchau!”).

Para tornar a entrega mais bem-sucedida, uma melhor prática é trazer os desenvolvedores cedo com estes passos:

• Inclua o desenvolvedor-chave do projeto (ou no mínimo o desenvolvedor de UI) na discussão de ideação inicial
• Inclua desenvolvimento em cada reunião onde design de tela e design de interação são discutidos
• Se você está em uma agência, inclua desenvolvimento em chamadas com conferência com clientes
• Procure percepção de desenvolvedores sobre como elementos de design provavelmente se traduziriam em uma aplicação web ou uma aplicação móvel vs. uma aplicação de desktop
• Passando ideias iniciais de design para desenvolvedores, para que qualquer problema potencial de código possa ser identificado quando é mais fácil ajustar

Faça Almoço — Ou Encontros Remotos

Em vez de deixar todos trabalharem em silos, traga todos juntos pelo menos ocasionalmente. Encorajar seu time inteiro a almoçar junto é um passo significativo em direção ao compartilhamento espontâneo de ideias. Além disso, se fisicamente possível, considere colocar os membros do time trabalhando na mesma função na mesma sala.

Se você tem designers e desenvolvedores trabalhando em locais diferentes, configure reuniões virtuais de tempos em tempos e deixe-os discutir o progresso do trabalho deles. É 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 em breve como envolver designers e desenvolvedores mais cedo no processo pode ser dramaticamente aprimorado com um sistema design-para-código completo.

Forneça Arquivos de Design e Todos os Ativos Necessários

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

Uma das primeiras coisas que pode ajudá-lo a alcançar isso é fornecer aos desenvolvedores todos os arquivos de design e ativos necessários. Volte aos seus planos: vocês concordaram em fazer tudo via Dropbox, Google Drive ou alguma outra ferramenta? Comunique onde esses ativos vivem e mantenha as linhas de comunicação abertas para abordar peças faltantes, perguntas ou preocupações.

Tenha uma Reunião de Entrega

Ter uma reunião de entrega é uma das maneiras mais eficazes de executar uma entrega adequada entre os times de design e desenvolvimento. É uma ótima maneira de colocar tudo em aberto, abordar perguntas urgentes e motivar o time inteiro para o trabalho à frente. Esclarecedora qualquer peculiaridade e perguntas de ambos os lados, e prepare-se para o que virá nas fases de desenvolvimento, QA e lançamento. Defina cronogramas e expectativas claros, nomeando os indivíduos específicos responsáveis por garantir que cada fase chegue à linha de chegada.

Considere incentivar uma compreensão mútua de habilidades básicas e conceitos fornecendo novos recursos para aprender. Por exemplo, isso impulsiona os designers a aprender o básico de 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 Developer Handoff

Enquanto ferramentas como Figma prometem uma entrega de desenvolvedor otimizada, na verdade não é bem assim. O problema com a entrega de desenvolvedor Figma ou entrega de desenvolvedor Sketch, é que eles estão fazendo a parte menos complexa do que realmente importa para desenvolvedores. Em uma ferramenta de entrega de desenvolvedor, o objetivo do desenvolvedor é minimizar o tempo de desenvolvimento, reduzir o tempo de codificação da UI complexa e acelerar a produtividade do time. A maioria desses esquemas de entrega de desenvolvedores no Figma ou Sketch é puramente cópia/cola de HTML ou CSS (ou “Markup”) para um elemento de UI específico em uma tela. O desenvolvedor ainda precisa escrever o código de tela complexo, incluindo layout, posicionamento de elementos de UI e garantir que o código de elemento de UI “entregue” da ferramenta de design esteja correto.

Exemplo típico de como se parece uma entrega de desenvolvedor no Figma ou Sketch

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

Exemplo de como se parece uma ferramenta Code Markup / Red Line em App Builder.

App Builder Developer Handoff

Como brevemente mencionado anteriormente, uma parte chave para melhorar a entrega design-para-dev é converter eficientemente designs em código HTML. Muitas plataformas de design focam quase exclusivamente na parte de design e depois usam plug-ins e outros workarounds para preparar arquivos de design para o desenvolvedor.

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

Como isso seria usando Sketch como exemplo?

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

App Builder oferece-lhe 2 opções para ir de design para código:

1. Use o plugin Visual Studio Code para selecionar componentes ou telas e deixar o serviço baseado em nuvem gerar código e injetá-lo em seu app Angular existente.
2. Arraste seu arquivo Sketch diretamente para seu workspace em 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 app.

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, portanto é importante usar uma ferramenta que analisa e reestrutura os elementos de design conforme necessário para saída HTML de alta qualidade.
• Você pode converter elementos de design em elementos HTML como button, input ou select conforme necessário, e editar visualmente elementos, agrupá-los e organizá-los manualmente.
• Você pode publicar seu design e compartilhar com outros, permitindo que todos baixem a saída HTML/CSS.
• Ele se baseia em HTML e CSS apenas, não usa ou assume nenhum Javascript na saída. Um desenvolvedor pode usar a saída HTML com Angular, React, VueJS ou qualquer outra biblioteca frontend.

App Builder se destaca pela qualidade do nosso código. Infragistics não é um recém-chegado ao desafio de produzir os melhores componentes de UI; estamos nisso há 30+ anos. Construímos componentes para empresas da Fortune 500 que confiam em nossas grids e gráficos todos os dias para lidar com transações financeiras em tempo real, potência de conversão para grandes infraestruturas ou dados de IoT em streaming.

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 ferramenta de design, design systems, UI kits, prototipagem, teste de usuário e geração de código 100% pronto para produção.

Derrubando as Barreiras

Muita atividade está acontecendo conforme as empresas reconhecem que lançar apps melhores, mais rápido significa reduzir as barreiras de entrega. Novas abordagens devem focar em banir a ideia da “entrega” e ter designers e desenvolvedores começar a trabalhar juntos mais cedo e com mais frequência. Tenha encontros presenciais ou remotos, comunique-se mais, resolva problemas juntos e use ferramentas como design systems e software design-para-código que dramaticamente reduzem o tempo para envio. O software design-para-código, em particular, ajuda a reduzir a comunicação errada, reduzir erros e diminuir os níveis de frustração fornecendo um único lugar para designers e desenvolvedores referenciarem. E permite que todos no processo de design de produto digital, incluindo stakeholders, testadores e usuários, contribuam mais facilmente e efetivamente para um produto final que todos possam ficar felizes.

Para ver como nosso App Builder WYSIWYG ajuda a acelerar design para código e cumpre a promessa de verdadeira entrega de designer-para-desenvolvedor, assista a este vídeo rápido e se inscreva para um teste, ou você pode assistir a esta visão geral abrangente do produto App Builder e tutorial abaixo para aprender tudo sobre seus recursos e capacidades e começar com ele.

Se você tiver alguma pergunta, envie-me um e-mail em jasonb@infragistics.com e vamos discutir.

Desenvolvimento Web