PT
ENFluxo de trabalho colaborativo entre designers e desenvolvedores
A colaboração entre designers e desenvolvedores é fundamental para o sucesso de qualquer projeto. A forma como configuramos nosso fluxo de trabalho nos permite atender às demandas dos clientes, responder rapidamente às mudanças e ter um bom fluxo de comunicação entre as diferentes equipes.
Neste artigo veremos da perspectiva de um desenvolvedor as ferramentas e a metodologia que adotamos para um fluxo de trabalho colaborativo entre as equipes de design e desenvolvimento.
Problemas que surgem ao trabalhar em projetos
Começar a desenvolver um projeto do zero pode ser complicado, principalmente se não há um bom fluxo de trabalho entre as equipes de design e desenvolvimento. Às vezes, como desenvolvedores, não se entende o design UX proposto ou o comportamento de uma funcionalidade quando implementada em estruturas de layout.
Muitas vezes é preciso verificar e reverificar o projeto, observando cada componente individualmente para manter a consistência. Às vezes é preciso adivinhar o comportamento de certos elementos (como o comportamento de pairar dos links) porque nada foi definido no design sobre o comportamento de elementos específicos.
O fluxo de trabalho entre design e desenvolvimento
Ter uma boa base e estrutura definida para os projetos é muito importante. Facilita o desenvolvimento, pois é sabido exatamente onde ir para revisar determinadas informações. Como em geral usa-se sempre a mesma estrutura, é possível alternar facilmente entre projetos. Não importa em qual projeto se está trabalhando, sabemos onde encontrar as informações de estilo definidas de que precisamos. Como definimos o melhor processo para que nosso fluxo de trabalho se alinhe entre design e desenvolvimento?
Reuniões de validação – alinhamento entre designers, desenvolvedores e clientes
Uma boa comunicação entre as equipes é importante. É por isso que realizamos reuniões regulares de validação para garantir que designers e desenvolvedores estejam alinhados com as necessidades dos clientes. Esta é uma parte crucial do processo onde podemos levantar a mão quando algo não está claro ou verificar as últimas alterações para garantir que estão bem implementadas (especialmente no meio ou perto do final de um projeto).
Estrutura consistente para facilitar a alternância entre projetos
Utilizamos sempre a mesma estrutura para os templates, o que significa que é fácil de adaptar a qualquer projeto, pois você sabe onde encontrar todos os elementos principais. O modelo funciona como uma ponte entre o designer e o desenvolvedor.
Melhorias contínuas para desempenho máximo
Seguimos um processo de revisão/controle de qualidade. Os desenvolvedores estão envolvidos nos projetos do início ao fim. Isso significa que se encontrarmos um novo recurso que possamos usar em outros projetos, nós o implementaremos no tema base e então poderemos implementá-lo em todos os projetos.
As ferramentas para fluxo de trabalho colaborativo em equipe
Para equipe de design:
Os projetos são documentados em Figma que é a ferramenta que usamos para gerenciar o fluxo de trabalho entre designers e desenvolvedores. Uma vez configurado um projeto, é fácil replicá-lo e adaptá-lo graças à definição de tokens de design (fundações), padrões e componentes.
Para equipe de desenvolvimento:
•Lit para Atomic Design baseado em componentes web.
•Storybook para ver e mostrar as mudanças, aparência e funcionalidade dos componentes da web.
•Talwind para estilizar.
•Drupal e Twig são usados para integrar componentes com dados reais.
Adaptando o novo design ao novo projeto
Assim que tivermos um novo projeto, a primeira coisa que fazemos é definir o tema base e o sistema de design.
No design system temos um design atômico, o que significa criar um sistema de peças que podem ser unidas para criar elementos e templates. Podemos reutilizá-los para criar sistemas de design de interface eficazes e reutilizáveis.
Com esta metodologia em mente, temos um checklist básico dos elementos que os designers precisam para estilizar. Podemos fazer atualizações com base no template, reduzindo os esforços iniciais resultando em maior consistência para todo o projeto.
Depois de atualizarmos o sistema de design com os estilos do novo projeto (cores da marca, estilo da fonte, espaçamento etc...), passamos para a próxima etapa: aplicar as soluções e integrar com Drupal para usar com os dados reais.
Soluções aplicadas e integração em projetos
No início do projeto precisamos entender os requisitos do cliente, depois adaptamos o design, atualizamos os componentes e em seguida integramos ao Drupal.
Aqui está um exemplo para entender como aplicamos esta solução e a integramos:
Por exemplo, se tivermos um card (componente web) que queremos integrar ao Drupal, precisamos descobrir quais informações queremos mostrar. Vamos imaginar que queremos exibir algumas informações curtas sobre um tipo de conteúdo de blog.
Podemos ter diferentes “tipos” de cards, por exemplo, com imagem, link, data e/ou com todos os dados que se pretende mostrar. Neste caso, queremos utilizar um card onde tenhamos um título, um autor e um link para ler todo o conteúdo. No tipo de conteúdo blog, usaremos esses “campos” para chamar dentro do cartão, então no caso do título do cartão, usaremos, por exemplo, o “rótulo”, e chamaremos dentro do template. E assim por diante com todas as informações que queremos mostrar.
Desenvolvemos esta metodologia de trabalho para permitir um fluxo colaborativo dentro da nossa equipe para construir projetos da forma mais eficiente. Adotamos um processo de design colaborativo que promove a comunicação e a colaboração entre designers e desenvolvedores durante todo o ciclo de vida do projeto. Com esta abordagem comprovada, somos capazes de alcançar:
•Boa comunicação: ter um bom trabalho em equipe é a base para ter um projeto executado com sucesso.
•Estabilidade: designer e desenvolvedor trabalham juntos em sincronia.
•Estrutura: com uma boa estrutura baseada em templates podemos alterar, atualizar e descobrir o que precisamos, isso significa que nosso código é sustentável e reutilizável.
Neste artigo veremos da perspectiva de um desenvolvedor as ferramentas e a metodologia que adotamos para um fluxo de trabalho colaborativo entre as equipes de design e desenvolvimento.
Problemas que surgem ao trabalhar em projetos
Começar a desenvolver um projeto do zero pode ser complicado, principalmente se não há um bom fluxo de trabalho entre as equipes de design e desenvolvimento. Às vezes, como desenvolvedores, não se entende o design UX proposto ou o comportamento de uma funcionalidade quando implementada em estruturas de layout.
Muitas vezes é preciso verificar e reverificar o projeto, observando cada componente individualmente para manter a consistência. Às vezes é preciso adivinhar o comportamento de certos elementos (como o comportamento de pairar dos links) porque nada foi definido no design sobre o comportamento de elementos específicos.
O fluxo de trabalho entre design e desenvolvimento
Ter uma boa base e estrutura definida para os projetos é muito importante. Facilita o desenvolvimento, pois é sabido exatamente onde ir para revisar determinadas informações. Como em geral usa-se sempre a mesma estrutura, é possível alternar facilmente entre projetos. Não importa em qual projeto se está trabalhando, sabemos onde encontrar as informações de estilo definidas de que precisamos. Como definimos o melhor processo para que nosso fluxo de trabalho se alinhe entre design e desenvolvimento?
Reuniões de validação – alinhamento entre designers, desenvolvedores e clientes
Uma boa comunicação entre as equipes é importante. É por isso que realizamos reuniões regulares de validação para garantir que designers e desenvolvedores estejam alinhados com as necessidades dos clientes. Esta é uma parte crucial do processo onde podemos levantar a mão quando algo não está claro ou verificar as últimas alterações para garantir que estão bem implementadas (especialmente no meio ou perto do final de um projeto).
Estrutura consistente para facilitar a alternância entre projetos
Utilizamos sempre a mesma estrutura para os templates, o que significa que é fácil de adaptar a qualquer projeto, pois você sabe onde encontrar todos os elementos principais. O modelo funciona como uma ponte entre o designer e o desenvolvedor.
Melhorias contínuas para desempenho máximo
Seguimos um processo de revisão/controle de qualidade. Os desenvolvedores estão envolvidos nos projetos do início ao fim. Isso significa que se encontrarmos um novo recurso que possamos usar em outros projetos, nós o implementaremos no tema base e então poderemos implementá-lo em todos os projetos.
As ferramentas para fluxo de trabalho colaborativo em equipe
Para equipe de design:
Os projetos são documentados em Figma que é a ferramenta que usamos para gerenciar o fluxo de trabalho entre designers e desenvolvedores. Uma vez configurado um projeto, é fácil replicá-lo e adaptá-lo graças à definição de tokens de design (fundações), padrões e componentes.
Para equipe de desenvolvimento:
•Lit para Atomic Design baseado em componentes web.
•Storybook para ver e mostrar as mudanças, aparência e funcionalidade dos componentes da web.
•Talwind para estilizar.
•Drupal e Twig são usados para integrar componentes com dados reais.
Adaptando o novo design ao novo projeto
Assim que tivermos um novo projeto, a primeira coisa que fazemos é definir o tema base e o sistema de design.
No design system temos um design atômico, o que significa criar um sistema de peças que podem ser unidas para criar elementos e templates. Podemos reutilizá-los para criar sistemas de design de interface eficazes e reutilizáveis.
Com esta metodologia em mente, temos um checklist básico dos elementos que os designers precisam para estilizar. Podemos fazer atualizações com base no template, reduzindo os esforços iniciais resultando em maior consistência para todo o projeto.
Depois de atualizarmos o sistema de design com os estilos do novo projeto (cores da marca, estilo da fonte, espaçamento etc...), passamos para a próxima etapa: aplicar as soluções e integrar com Drupal para usar com os dados reais.
Soluções aplicadas e integração em projetos
No início do projeto precisamos entender os requisitos do cliente, depois adaptamos o design, atualizamos os componentes e em seguida integramos ao Drupal.
Aqui está um exemplo para entender como aplicamos esta solução e a integramos:
Por exemplo, se tivermos um card (componente web) que queremos integrar ao Drupal, precisamos descobrir quais informações queremos mostrar. Vamos imaginar que queremos exibir algumas informações curtas sobre um tipo de conteúdo de blog.
Podemos ter diferentes “tipos” de cards, por exemplo, com imagem, link, data e/ou com todos os dados que se pretende mostrar. Neste caso, queremos utilizar um card onde tenhamos um título, um autor e um link para ler todo o conteúdo. No tipo de conteúdo blog, usaremos esses “campos” para chamar dentro do cartão, então no caso do título do cartão, usaremos, por exemplo, o “rótulo”, e chamaremos dentro do template. E assim por diante com todas as informações que queremos mostrar.
Desenvolvemos esta metodologia de trabalho para permitir um fluxo colaborativo dentro da nossa equipe para construir projetos da forma mais eficiente. Adotamos um processo de design colaborativo que promove a comunicação e a colaboração entre designers e desenvolvedores durante todo o ciclo de vida do projeto. Com esta abordagem comprovada, somos capazes de alcançar:
•Boa comunicação: ter um bom trabalho em equipe é a base para ter um projeto executado com sucesso.
•Estabilidade: designer e desenvolvedor trabalham juntos em sincronia.
•Estrutura: com uma boa estrutura baseada em templates podemos alterar, atualizar e descobrir o que precisamos, isso significa que nosso código é sustentável e reutilizável.