Um guia abrangente para sistemas de design

Não é segredo que há uma enorme desconexão entre as equipes de design e desenvolvimento, muitas vezes chamada de "handoff" – o momento em que um protótipo de aplicativo é enviado para a equipe de desenvolvimento. Embora as transferências nos esportes geralmente sugiram um movimento suave e sem esforço - pensa-se em um quarterback aninhando a bola nas mãos de um running back -as transferências na criação de aplicativos são tudo menos suaves.

Isso ocorre porque o design e o desenvolvimento representam disciplinas funcionais essenciais dentro das equipes de produtos de software, e cada disciplina evoluiu rapidamente por conta própria. E embora existam soluções de ferramentas maduras voltadas exclusivamente para designers ou desenvolvedores, as soluções voltadas para uma história de design para código têm sido raras. Embora isso esteja mudando, como discutiremos em breve.

Em seu recente relatório ¹"Build Better Products Faster with Design Systems", o Gartner destaca 3 descobertas principais em sua análise de como as empresas criam software hoje:

• Os produtos digitais projetados do zero geralmente levam a usabilidade inferior, inconsistências visuais e comportamentais e ciclos de design mais longos.
• Muitas equipes de produto criam sistemas de design originais e personalizados, resultando em complexidade desnecessária que requer muito tempo e esforço para projetar, construir e manter.
• Os sistemas de design envelhecem rapidamente, corroendo sua capacidade de aumentar a usabilidade e a qualidade do produto e diminuir o tempo de lançamento no mercado.

Do ponto de vista do sucesso dos negócios, as empresas reconhecem a necessidade de fornecer UX atraente em aplicativos. No entanto, fornecer UX atraente requer um alto grau de colaboração entre design e desenvolvimento. E esse nível de colaboração tem sido desafiador há anos porque é difícil para:

• Desenvolvedores para duplicar com precisão o que os designers criaram ou imaginaram.
• Designers para comunicar a intenção do design e para transformar especificações visuais em código.
• Os desenvolvedores podem até mesmo encontrar os arquivos de recursos ou imagens que são mostrados em modelos, mas não foram entregues durante a entrega.

 Um sistema de design pode ajudar a unir os silos tradicionais entre designers e desenvolvedores.

Nos últimos anos, os sistemas de design surgiram como uma solução para melhorar a colaboração entre design e desenvolvimento. A abordagem do sistema de design foi adotada por organizações como Salesforce, IBM, Atlassian e muitas outras e serve como uma indicação de seu apelo.

O que é um sistema de design?

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.

Benefícios de usar um sistema de design

Com um sistema de design em vigor, designers e desenvolvedores podem trabalhar de forma independente em suas próprias ferramentas sem exigir verificações de baixo nível em torno da implementação do design. Em vez disso, eles podem se concentrar em interações de alto valor em torno dos resultados.  Os sistemas de design acordados incluem estes benefícios:

• Tempo reduzido para criar / construir protótipos usando controles de interface do usuário predefinidos aceitos e aprovados e padrões de interface do usuário.
• Consistência entre aplicativos e equipes em termos de modelo de interação, mas também requisitos de acessibilidade como conformidade com WCAG, ARIA e Seção 508.
• Redução de defeitos e testes, pois o sistema de design e os controles de interface do usuário são usados em escala em vários aplicativos e equipes por períodos mais longos.
• A consistência da marca como os principais componentes do sistema de design são aceitos e aprovados pela equipe de produtos digitais / centro de excelência em design.

Do ponto de vista do cliente, a consistência significativa entre os aplicativos oferecidos pela mesma organização permite que os usuários reutilizem o que aprenderam com interações anteriores com aplicativos.

Como Diana Mounter, do GitHub, coloca em sua palestra no YouTube:

• Os sistemas de design trazem ordem ao caos. Todos são mantidos na mesma página, para que todo o produto permaneça consistente e polido por toda parte.
• Os sistemas de design melhoram a experiência do usuário por meio do uso repetido de padrões familiares e comprovados. Projetar qualquer coisa do zero deixa espaço para erros, então tente usar o que já funciona.
• Os sistemas de design melhoram a eficiência do fluxo de trabalho. As equipes de produto sabem exatamente como os componentes dos novos recursos devem ser e como implementá-los."

Vocabulário compartilhado entre design e desenvolvimento

Embora a consistência seja uma grande vitória, algo tão simples quanto nomear componentes e padrões mutuamente acordados pode ajudar muito. Isso é útil para os usuários atuais do sistema de design e também para integrar futuros membros. Tornar a convenção de nomenclatura explícita e compartilhada torna mais fácil para desenvolvedores e designers encontrarem os componentes em seus respectivos ambientes de ferramentas.

Com o tempo, os nomes dos padrões de UX começarão a aparecer nas conversas, servindo como um substituto para os requisitos do usuário. Por exemplo, quando alguém menciona que devemos usar um componente de caixa de combinação, fica claro para designers e desenvolvedores que tipo de comportamento ele suporta e como ele pode ajudar na experiência de tarefa do usuário. Como um sistema de design documenta um componente como um padrão, ele geralmente explica quando usar um componente específico e como usá-lo da maneira certa — com exemplos. Então, nesse sentido, um sistema de design pode atender à necessidade de orientação de UX acessível, evangelizando assim as práticas de design.

Accelerate Design Process and Development

A velocidade de entrega é um benefício explícito da reutilização de componentes em um sistema de design. Do ponto de vista do design, as eficiências vêm de não precisar criar novos componentes ou padrões, pois eles já fazem parte dos kits de interface do usuário do sistema de design. Mesmo quando confrontados com a necessidade de criar um novo padrão complexo, os designers podem confiar nas diretrizes do sistema de design e construir algo usando os botões, rótulos ou menus suspensos já disponíveis.

Do ponto de vista de um desenvolvedor, ser capaz de gerar o código para esse componente ou padrão ajuda a evitar inconsistência entre as especificações de design e o código. A velocidade de aprendizado é um benefício não tão óbvio do uso de uma abordagem de sistema de design. Agora que os designers estão livres da criação de pixels, eles podem retornar ao verdadeiro processo de design, concentrando-se em projetar jornadas ou fluxos do usuário e avaliá-los com os usuários. A abordagem usada para criar entregas de design também pode ser usada para produzir protótipos provisórios para testes de usabilidade e obter feedback das partes interessadas.

É importante observar que um sistema de design não é apenas um conjunto de práticas recomendadas de UX e kits de interface do usuário. Você também precisa de componentes de interface do usuário correspondentes no lado do desenvolvimento. Embora o movimento de sistemas de design tenha sido tradicionalmente defendido por equipes de design em grandes organizações, para que seja realmente bem-sucedido, a equipe de desenvolvimento também precisa se tornar um coproprietário/colaborador do sistema de design.

É aqui que os sistemas de design geralmente falham – eles são defendidos pelo lado do design da equipe de produto digital; o lado do desenvolvimento não está incluído. A falta de comunicação e o tempo perdido em transferências mal administradas ainda existem nesses casos.

Por que usar um sistema de design?

Os sistemas de design forçam os designers a sistematizar seu trabalho, a pensar em componentes. Os desenvolvedores de front-end já estão fazendo isso. Eles têm feito isso. Quando as equipes de design criam sistemas de design, de repente elas começam a pensar como seus colegas de equipe desenvolvedores e a falar a mesma língua.

Embora possa parecer que um sistema de design está simplesmente adicionando outra camada ao seu trabalho, os sistemas de design podem ajudar a aumentar sua eficiência. Para entender melhor como isso se aplica a você, considere estas perguntas:

• Escala– Você está projetando um produto (ou produtos) que tem mais de 100 ou mais telas? O(s) seu(s) produto(s) crescerá(ão) significativamente?
• Consistência– Você quer que seus produtos tenham marca, aparência e experiência consistentes? Seu produto atualmente tem 20 estilos de botões diferentes?
• Eficiência– Você quer que seus designers visuais, designers de experiência do usuário e desenvolvedores front-end trabalhem mais rápido e economizem tempo?
• Trabalho em equipe– Você tem projetos em que há muita transferência entre designers ou muitos designers trabalham no mesmo projeto ao mesmo tempo?

Se você respondeu "sim" a uma das perguntas acima, provavelmente um sistema de design é adequado para você. Trabalhar em escala e aumentar a consistência e a eficiência são os maiores benefícios de criar e usar um sistema de design.

A anatomia de um sistema de design

Um sistema de design usa uma abordagem para construir elementos escaláveis que podem ser melhor ilustrados como átomos, moléculas e organismos. É geralmente referido como a Metodologia de Design Atômico criada por Brad Frost. Tornou-se uma abordagem popular para descrever a estrutura de um sistema de design.

Ilustrando o conceito de átomo-molécula-organismo com exemplos.

Voltando à metáfora de átomos, moléculas e organismos, você começa projetando o menor componente (por exemplo, botão, avatar, rótulo, título, etc.). Este menor componente é chamado de átomo.

Indo um nível mais fundo, os átomos consistem em partículas como prótons e nêutrons. Para um sistema de design, isso pode ser mapeado para a paleta de cores e tipografia básicas, que definem a identidade da marca para a organização.

Subindo um nível dos átomos, você tem moléculas, que são compostas de átomos. As moléculas podem ser mapeadas para componentes e representam estruturas mais complexas, como item de menu, item de lista e item suspenso.

Então, combinando layouts e vários componentes, obtemos a próxima unidade hierárquica: padrões de UX. Se estamos nos apegando à nossa comparação biológica, isso nos leva aos organismos. Eles encapsulam as melhores práticas de UX seguindo "bons" princípios de design e são criados para as necessidades específicas de um produto.

O objetivo de ilustrar sistemas de design como átomos, moléculas e organismos é traçar paralelos com um sistema vivo. Um sistema de design não deve ser estático e imutável — ele deve refletir as necessidades de UX do produto e evoluir constantemente com o produto e as tecnologias usadas. Novos requisitos surgem devido aos novos requisitos de layout do dispositivo. Novos recursos de produtos e mudanças na identidade da marca são inevitáveis. Devemos ter certeza de que nosso sistema de design é flexível e pronto para mudar para que possamos nos adaptar a essas mudanças.

Como construir um sistema de design

Para começar, você pode usar um sistema de design existente como base para o que você cria. O benefício de usar um sistema existente é que ele pode economizar muito tempo – especialmente se for apoiado por controles e componentes de interface do usuário do mundo real. Nesse caso, você tem a definição do sistema de design e os controles para fazer backup quando fizer a entrega do design para as equipes de desenvolvimento. Este é o design para a transferência de código de que sempre falamos. Quando você começa com um sistema de design existente como base, você não está sacrificando suas próprias necessidades de design, você pode personalizar todos os aspectos dos kits de interface do usuário e definição do sistema de design para suas necessidades corporativas, mantendo os outros benefícios que destacamos neste artigo.

To start with the Indigo.Design System, grab the UI Kits and Sync tool from Indigo.Design, and then follow this doc –https://pt-br.infragistics.com/products/indigo-design/help/sync-themes-plugin – to customize to your own needs. 

Seja começando com um sistema de design existente ou começando do zero, aqui estão algumas das principais etapas para criar um sistema de design:

Realize uma auditoria visual

O primeiro passo na construção de um sistema de design é fazer uma auditoria visual do seu design atual, seja o design de um aplicativo, um site ou algum outro produto digital. Fazer um inventário do CSS que você está usando e das qualidades visuais dos elementos pode ajudá-lo a avaliar o quanto esse processo pode ser um empreendimento.

Create a Visual Design Language

A linguagem de design visual é o núcleo de um sistema de design. É composto de componentes discerníveis que você usará para construir seu produto digital. Sua linguagem de design visual é composta de quatro categorias principais, e você deve considerar o papel que cada um desses elementos de design desempenha em cada componente da tela.

• Cor– As cores comuns em um sistema de design incluem de 1 a 3 cores primárias que representam sua marca. Você pode incluir uma variedade de tonalidades - uma cor misturada com branco - e tons - uma cor misturada com preto - para dar aos seus designers mais algumas opções.
• Tipografia– A maioria dos sistemas de design inclui apenas 2 fontes: 1 fonte para títulos e corpo de texto e uma fonte monoespaçada para código. Mantenha-o simples para evitar sobrecarregar e confundir seu usuário. Mantenha o número de fontes baixo; Não é apenas uma prática recomendada de design tipográfico, mas também evita problemas de desempenho causados pelo uso excessivo de fontes da web.
• Dimensionamento e espaçamento– O sistema que você usa para espaçamento e dimensionamento fica melhor quando você tem ritmo e equilíbrio. Uma escala baseada em 4 está crescendo em popularidade como a escala recomendada devido ao seu uso em padrões iOS e Android, formatos de tamanho ICO e até mesmo o tamanho padrão da fonte do navegador.
• Imagens– A chave para o sucesso com imagens em sua linguagem de design visual é ter um plano e cumpri-lo. Defina diretrizes para ilustrações e ícones e use o melhor formato de imagem para a situação.

Criar uma biblioteca de interface do usuário/padrão

Ao contrário da auditoria visual que você já realizou (que analisou as qualidades visuais de seus elementos de design), esta etapa do processo examina os componentes reais da interface do usuário. Colete todas as partes da interface do usuário atualmente em produção. Isso significa cada botão, formulário, modal e imagem. Mescle e remova o que você não precisa.

Documente cada componente e use

Esta etapa é importante. Certifique-se de documentar o que é cada componente e quando usá-lo. Documentação e padrões são o que separam uma biblioteca de padrões de um verdadeiro sistema de design.

Trate seu sistema de design como um produto

Como qualquer produto, seu sistema de design precisa de um gerente de produto (geralmente um líder de design ou líder de UX em sua organização), precisa de um backlog, um roteiro e precisa ser mantido.  Os sistemas de design que não são tratados como um produto acabarão como os produtos da sua empresa que são ignorados. Eles se tornarão obsoletos, desatualizados, não incluirão as melhores práticas e padrões mais recentes e não acompanharão os padrões corporativos. É fundamental tratar seu sistema de design como qualquer outro produto – isso dará confiança aos usuários de que há um futuro e que eles têm um lugar para obter suporte.

Exemplos de sistemas de design

Sistemas de Design Comercial

• Quickbooks Design System
• GEL – Linguagem de Experiência Global da BBC
• Material from Google
• Lightning from Salesforce
• Airbnb’s Visual Language
• Joystick from EA
• Fluent from Microsoft
• Plasma from WeWork
• Polaris from Shopify
• Planeta Solitário
• Enxame do Meetup
• Tela da Hubspot

Sistemas de design governamental

• S. Web Design Standards
• USPTO UI Design Library
• USA Jobs Design System
• Estado da Califórnia
• Bristol City Council
• City of Philadelphia
• Australian Government

Sistema de design Indigo

O Indigo Design System capacita seu fluxo de trabalho de design com 60+ componentes de interface do usuário que também são mapeados para controles Ignite UI for Angular. Cada componente é otimizado para desenvolvimento web responsivo e fornece vários recursos de modelagem por meio de layout inteligente e regras de redimensionamento definidas na biblioteca. Além disso, adicionamos modos claros/escuros e vários estados de interação para escolher ao projetar experiências dinâmicas. Tudo isso agiliza o design e o desenvolvimento de aplicativos, permitindo que qualquer interface de usuário criada com a biblioteca em Sketch seja construída Angular com Ignite UI.

A biblioteca Sketch tem uma página Componentes contendo todos os Componentes e símbolos relacionados a eles. Abaixo está uma pequena parte de um sistema de design na forma do "lado do design" – um UI Kit em Sketch, com todas as áreas principais do sistema de design que mencionamos neste artigo.  Isso não mostra apenas alguns dos artefatos mais simples, como os vários tipos de Buttons, Button Group e elementos de formulário como Checkbox, Switch e Radio Group, mas mostra um controle de interface do usuário avançado como uma grade de dados, que é obrigatório em qualquer sistema de design corporativo.

Para saber mais:

• Ícones de materiais– uma coleção de 150+ ícones de materiais estendidos com mais 250+ ícones criados por nós de acordo com as diretrizes de design de ícones de materiais, que você pode facilmente estender ainda mais
• Cores– paletas com variantes de cores primárias, secundárias e cinza, bem como cores especiais e algumas paletas projetadas especificamente para visualizações de dados, incluindo um conjunto otimizado para diferentes tipos de daltonismo
• Tipografia– uma coleção de estilos de texto genéricos e específicos de componentes
• Elevação– o conjunto de 24 sombras com as quais estamos familiarizados no Material Design baseado em umbra, penumbra e cores de sombra ambiente.
• Ilustrações– um conjunto de 17 ilustrações personalizáveis e estilizáveis para tornar seus designs mais divertidos e completos

Visite Indigo.Design para saber mais sobre este sistema completo de design para código que não apenas inclui um sistema de design, mas também integra prototipagem, teste de usuário, criação de aplicativos e geração de código com App Builder.

¹ Gartner 'Crie produtos melhores e mais rápidos com sistemas de design", 2 de março de 2021, Brent Stewart, Van Baker