Sistemas de design: trabalhando com desenvolvedores

No artigo anterior, vimos porque é importante não negligenciar os desenvolvedores, mas sim associá-los à criação do seu sistema de design. Agora é hora de ver como!

Se você quiser se aprofundar, também pode ler o artigo de Leslie Pochat:
O Design System em 10 passos !

Etapa 1: co-design

O co-design é uma abordagem que permite ao utilizador final envolver-se na reflexão e desenvolvimento de um serviço ou produto.
Essa abordagem pode ser amplamente usada com desenvolvedores, pois eles são os usuários do seu sistema de design.

Você pode se surpreender com suas ideias.

Etapa 2: Documentação

Um sistema de design construído sem documentação adequada não vai sobreviver. É simples assim. Se você não tiver documentação ou se for difícil de usar ou acessar, você corre o risco de que a equipe de desenvolvimento vá para a coisa mais simples… e fique sem o seu trabalho.

Para garantir o seu sucesso, uma boa documentação deve, na minha opinião, cumprir os seguintes requisitos:

1. Seja facilmente acessível

É simples como tudo, mas dê um nome ao seu sistema de design e crie um endereço da web (facilmente memorável). Isso fornecerá um ponto de encontro e tornará o projeto mais tangível. Aliás, evite se puder o software que o desenvolvedor terá que instalar, isso geraria um ponto de atrito desnecessário principalmente se a necessidade dele se resumir a consulta.
Por fim, estruture seu site da maneira mais precisa possível, de acordo com suas necessidades. Na maioria das vezes, a documentação assume a seguinte forma: * Diretrizes gerais (cores, fontes, métricas, etc.) * Componentes * Recursos (ilustrações, carta gráfica, logotipo, etc.)

Mas você também pode estruturar sua documentação por uso, negócios etc. Cabe a você ver de acordo com os problemas da empresa e sua organização interna.

2. Seja fácil de usar

Dê acesso direto ao código explorável, ao visual e às regras e proibições de uso de cada componente. Se você não for responsável pela integração, trabalhe em estreita colaboração com os integradores para tornar as atualizações o mais suaves e rápidas possível.

3. Gerenciar casos especiais

Gerencie todos os casos especiais, especialmente para seus menores componentes (e, portanto, frequentemente os mais usados) como botões, links, pop-ups, títulos ou menus... Indique claramente o comportamento que você espera e as regras a serem seguidas. Gerencie-os desde a primeira implantação e não depois. Esses são os casos que levam o desenvolvedor a se libertar do seu design.

4. Apresentar exemplos e cenários

Se você quiser deixar mais liberdade para o desenvolvedor e permitir que ele mesmo componha as telas do seu design system, não se esqueça de fornecer muitos exemplos e cenários práticos. Tais como: Formulários, Barras de Ação, Painéis de Expansão, Pop-ups, Transições de Páginas, Carregamento de Dados, etc.

5. Incentive retornos rápidos

Sua documentação pode ser a mais perfeita possível, mas não se esqueça de fornecer uma maneira para os desenvolvedores se comunicarem rapidamente com você para esclarecer quaisquer pequenos mal-entendidos.

6. Informar de forma rápida e clara as mudanças realizadas e seus possíveis impactos

Uma das vantagens do sistema de design é poder modificar um elemento de forma rápida e global. Também é um risco porque a menor alteração pode ter um grande impacto (como uma alteração no tamanho da fonte). Notifique seus usuários sobre quaisquer alterações gerais ou limitadas a um único componente. E não se esqueça de listar os impactos potenciais.

Passo #3: Mantenha-se informado

Diariamente, fim de sprints ou até máquina de café, não faltam oportunidades para mantê-lo informado sobre os problemas encontrados pelos desenvolvedores. Não negligencie esses momentos, pois é onde você obterá o melhor feedback e informações sobre os problemas encontrados.

Etapa 4: Validação

Para medir se o seu design é entendido pelos usuários, se é apreciado, em suma, se funciona, há toda uma gama de serviços para medir, quantificar, rastrear, alertar. E para avaliar se o seu design está sendo implantado corretamente pelos desenvolvedores? É mais complicado.
Mas ainda existem ferramentas para ajudá-lo em sua tarefa.

Alguns entre outros: pastel Caixa de brinquedo CSSPeeperGenericName Aplicativo impecável

Etapa 5: A Reunião de Revisão do Projeto

Seu sistema de design está começando a girar? É um bom momento para marcar reuniões de revisão de design! O princípio ? Estabeleça um momento pontuando os sprints para validar as telas já desenvolvidas, mas também para identificar os problemas nas que estão em desenvolvimento. Ao formalizar esses momentos de compartilhamento, você acostumará cada equipe a discutir as questões da outra e os desenvolvedores a exercitarem seu olhar crítico sobre a ergonomia e o cumprimento de suas diretrizes.

Para ir mais longe no controle de qualidade para design: A “Revisão de Design” entre Designers e Desenvolvedores

Hugo, UX-Designer @UX-Republic