6 etapas para construir um ótimo sistema de design

"Um sistema de design é um dos ativos estratégicos mais importantes para sua empresa. É um produto digital vivo que requer uma equipe, um plano e um conjunto de ferramentas especializadas."

— Brent Stewart, Senior Director Analyst, Gartner

Nós da Infragistics também acreditamos fortemente no valor de um sistema de design. Ele muda a maneira como as empresas inovam e acelera o ritmo de criação de aplicativos. Também gostaríamos de acrescentar que os sistemas de design estão evoluindo e são um investimento que compensa no futuro. No entanto, muitas empresas ainda ignoram os benefícios de um sistema de design, o que infelizmente resulta em interrupções comportamentais e visuais, discrepâncias de marca, usabilidade ruim, padrões de design mal comunicados e outras inconsistências no processo de design. Outras vezes, há o momento de falha que surge em algum lugar entre o momento de construir um sistema de design e implementá-lo adequadamente. O que novamente leva aos mesmos contratempos mencionados acima.

Para ajudá-lo a lidar com esses desafios, vamos nos aprofundar no como e no que é arquitetar um sistema de design eficaz e também mostraremos o que acontece nele e por que você deve usar um.

Se você já está familiarizado com o Design Systems, pode pular para as 6 etapas para construir um design system imediatamente.  Se não, continue lendo.

O que é um sistema de design?

Existe essa definição popular de que um sistema de design é uma coleção de ativos de design que você usa para criar interfaces com o usuário. Mas é realmente muito mais do que uma biblioteca de componentes de interface do usuário reutilizáveis. Os sistemas de design são "empoderamentos de design" artesanais que:

• Servir como uma única fonte de verdade para as equipes de produto.
• Sintonize um contexto de uso específico e um domínio de aplicativo.
• Trabalhe como um inventário de padrões de design de UX e orientação de estilo de marca.
• Acelere o processo de design e melhore significativamente a consistência.

Para nós da Infragistics, consistência significa permanecer consistente com estilo e comportamento em qualquer programa de design, IDE de desenvolvimento e tudo o que acontece no meio. Levando a consistência a um nível totalmente diferente, nosso objetivo é fornecer ferramentas consistentes não apenas para designers que usam diferentes programas de design com kits de interface do usuário para Sketch, Adobe e muito em breve Figma, mas também para desenvolvedores, independentemente da estrutura que preferirem, como Angular, Blazor ou qualquer outra coisa. Dessa forma, o processo de desenvolvimento do produto culmina em uma experiência consistente para os usuários do aplicativo no final.

O tipo de processo simplificado e consistência de que falamos pode ser alcançado por meio de automações e plug-ins que, por exemplo, permitem aplicar um tema abrangente à sua biblioteca de design de uma só vez. Isso também significa permitir abordagens inovadoras e muito mais eficientes para lidar com a transferência de designer-desenvolvedor, economizando tempo e energia tentando explicar ideias ou justificar animações e microinterações que geralmente não estão nos arquivos Sketch, Adobe XD e Figma.

Por que usar um sistema de design – os benefícios e seu valor?

Não é surpresa que empresas como IBM, Atlassian, Salesforce.com, NASA e outras tenham implementado um paradigma de sistema de design para gerenciar seu processo de design para desenvolvimento. Construir, usar e manter um sistema de design leva a experiências mais coerentes porque não há necessidade de reconstruir componentes ou padrões. Em vez disso, designers e desenvolvedores se beneficiam de um inventário unificado que:

• Promove a reutilização e fornece ativos de design flexíveis, economizando tempo e esforços ao projetá-los do zero.
• Controla padrões claros e conformidade com a marca por meio de tipografia, cores, voz e tom consistentes.
• Reduz os defeitos de produção, pois os controles da interface do usuário são usados em escala entre equipes e projetos diferentes.

Já exploramos todos os benefícios de usar um sistema de design em nosso Guia Completo. Então, se você quiser aprender sobre suas vantagens, o valor que ele traz, sua anatomia e alguns exemplos de sistemas de design – lá você encontrará tudo.

Como construir um bom sistema de design em 6 etapas?

O que constitui um bom sistema de design, então, para simplificar, algo que não é uma caixa preta para design, mas permite diferentes integrações, vem em uma forma flexível para o designer integrar em seus processos e DesignOps, ao mesmo tempo em que garante que eles projetem com o usuário final em mente, permitindo várias maneiras de coletar feedback das partes interessadas e facilitando a execução de testes com usuários reais. E, claro, um bom sistema de design não é caro de manter, fácil de evoluir e possui uma arquitetura de sistema de design limpa e transparente.

Step 1 – Run an inventory

Se você está começando a criar ou usar um sistema de design de terceiros, o primeiro passo é executar um inventário de seus produtos ou wireframes. Isso ajudará você a restringir os componentes que são críticos para o seu projeto, pois eles aparecerão repetidamente de uma tela para a outra enquanto você explora o produto. Com o estoque em mãos, você pode entender mais facilmente como essas peças são produzidas a partir de elementos menores – um botão vem com um determinado formato, uma combinação de cores e não vamos esquecer, o tipo de letra de seu rótulo. O que você também entenderá ao se aprofundar é que um botão sozinho não está nem perto do que você precisa e tem seu papel especial em uma navegação de menu ou em um formulário que os usuários devem preencher.

Passo 2 – Defina as peças subatômicas

Isso nos leva ao segundo passo, que é definir as peças subatômicas ou a base subjacente de como as coisas ficarão para que possam moldar um produto consistente e agradável aos olhos.  Nossa experiência com Indigo.Design nos levou a acreditar que os elementos que se encaixam nessa categoria e que devem ser visíveis para o designer que usa o sistema são:

• Cores
• Tipografia
• Sombras
• Ícones
• Gráficos visuais, como ilustrações

No entanto, pode haver coisas igualmente cruciais, mas mais sutilmente visíveis, como o tamanho da grade de layout, que geralmente determina os tamanhos do preenchimento e o raio da borda para o arredondamento dos componentes. Por exemplo, se usarmos uma grade de 4px, nossos preenchimentos no componente provavelmente serão 4px, 8px, 16px ou combinações deles, digamos, 8px + 16px = 24px. Como resultado, isso definirá um arredondamento de 8px de um botão, por exemplo, e uma margem de 24px entre dois botões adjacentes.

Passo 3 – Restrinja os componentes reais da interface do usuário

A terceira etapa inclui os componentes reais que você identificou ao fazer um inventário. Sempre comece com aqueles que podem ser vistos com mais frequência na interface do usuário do produto. Geralmente são botões, ícones, campos de entrada, bem como parágrafos de texto e imagens que geralmente não têm a forma de componentes, mas existem como elementos nativos. É importante pensar nos diferentes tipos de componentes, como se um campo de entrada será usado para entrada de texto, inserção de um número ou até mesmo seleção de uma data. Você pode querer considerar estilos diferentes, ou seja, você pode ter 10 botões em uma página, mas geralmente há um que é mais proeminente do que os outros – o CTA.

Step 4 – Design validation states

Você pode pensar que a quarta etapa é criar os padrões e layouts da interface do usuário com esses componentes, o que nos levaria um passo mais perto de projetar as telas do produto. Mas não. Antes disso, devemos voltar aos componentes novamente.

Uma coisa a lembrar é que uma interface do usuário nunca é estática. Ele flui para o usuário com resposta às interações que ele faz. Um componente que não define um estado de foco, foco ou desativado é tão bom quanto um martelo de vidro. No entanto, também não podemos esperar que nossos usuários estejam sempre no caminho certo. Portanto, projetar estados de validação e mensagens de erro é importante neste estágio intermediário da arquitetura do sistema de design.

Além disso, ao criar os intrincados modelos de conteúdo do layout de um componente, não se esqueça de verificar se ele é:

• Fluid
• Behaving as expected when resized
• Responder corretamente aos elementos de composição que estão sendo movidos e removidos

Todas as três ferramentas de design para as quais construímos Indigo.Design-Sketch, Adobe XD e Figma- oferecem mais do que um grau decente de layouts inteligentes / automáticos. Assim que sua conquista por componentes inteligentes estiver concluída, você colherá todos os benefícios aplicando a mesma estratégia ao layout de seus padrões.

Step 5 – Build design patterns

Agora, o quinto passo é construir esses padrões. Como esse é um processo bastante simples, gostaria de dar alguns exemplos dos padrões de interface do usuário que criamos em Indigo.Design. Se você estiver criando um produto que reproduz mídia, pode ser útil ter um reprodutor de mídia pré-criado e layouts de controle de volume. Se você estiver criando interfaces de usuário de conversação, os padrões de bate-papo e feed social serão úteis. Movendo-se em direção a um contexto mais formal, você pode precisar de uma variedade de formulários para um produto no setor de seguros e conformidade. E, finalmente, quase todas as empresas acabarão precisando de páginas de detalhes do produto, tabelas de comparação de preços, integração ou perfil de usuário.

A melhor coisa sobre os padrões é que você pode construí-los à medida que avança. Um certo tipo de forma pode existir inicialmente no design, pois é usado apenas em um único contexto. Mas, à medida que seu uso no produto cresce, ele naturalmente se tornará um padrão que será a única fonte de verdade para todas as instâncias desse layout na variedade de contextos em que está sendo usado.

Step 6 – Prepare design documentation

A etapa final é documentar seu sistema de design. O objetivo aqui é reduzir o esforço nisso o máximo possível. Se a arquitetura do seu sistema de design for estável e flexível o suficiente, o número de coisas que você precisará documentar será mínimo. Então, podemos dizer brincando que o objetivo da arquitetura é escrever o mínimo de documentação possível assim que o sistema de design estiver completo. No entanto, isso não exclui ter uma seção com notas de versão no arquivo do kit de interface do usuário. Ou ter uma seção com exemplos de integração e até mesmo documentação on-line fornecendo exemplos de sistemas de design com o que fazer e o que não fazer quando se trata de usar e configurar componentes ou renomear o sistema de design. Para tornar as coisas um pouco mais simples, tudo isso também pode ser resolvido aproveitando um gerenciador de sistema de design.

Outro objetivo da arquitetura do sistema de design é ter que fazer o mínimo de manutenção possível e expandir os cenários que um sistema de design pode cobrir, adicionando novos componentes e padrões sem quebrar os existentes. E como muitos consideram três um número da sorte, adicionarei um terceiro objetivo para uma arquitetura de sistema de design bem-sucedida. É quando o novo Head de Marketing ou Design decide que a marca de uma determinada empresa precisa de uma reformulação completa. Bem, o sistema de design pode agilizar o redesenho, adaptando-se a ele em questão de minutos, em vez de semanas.

Seguir essas etapas e pensar no sistema de design de forma agnóstica a partir da marca, caso de uso e produto à medida que você o constrói, ajudará você a reduzir os desafios de design e desenvolvimento de produtos no futuro. Uma vez que a base esteja estável, você pode voltar e aplicar todas essas especificidades em cima dela.

No entanto, é natural entender que sempre há certos desafios na implementação de novos processos. Mas tudo bem. É por isso que queremos compartilhar o nosso enquanto partimos para criar Indigo.Design. Muitos deles estavam relacionados a certas mudanças de paradigma nos programas de design que queríamos apoiar. Então, houve o desafio contínuo de garantir que os componentes que usamos no tempo de design e os componentes que os desenvolvedores usam para codificar estejam sincronizados o tempo todo. Para garantir que tudo isso funcione sem problemas, estabelecemos certos processos e fazemos revisões regulares porque é algo em que vale a pena gastar tempo, sabendo que melhora a qualidade, o fluxo de trabalho e a consistência.

Com tantos riscos potenciais, você pode começar a se perguntar se deseja estar no negócio de manutenção do sistema de design ou prefere se concentrar em seu produto e deixar isso para alguém como nós e Indigo.Design.

Why Choose Indigo.Design For Your Design System?

Para colocar em prática uma arquitetura sólida e preparada para o futuro de um sistema de design, é claro que aconselho você a baixar e explorar Indigo.Design por dentro e por fora. Isso economiza tempo e esforços e permite que você se concentre no design real.

Algumas coisas rápidas para manter em mente:

1. Indigo.Design é uma biblioteca nativa para Sketch e Figma em um futuro próximo, em vez de uma tela cheia de elementos para copiar e colar.
2. Indigo.Design não tem apenas componentes com estados, mas também modelos e variantes que se ajustam automaticamente à medida que o usuário do sistema de projeto altera a configuração de um componente.
3. Indigo.Design também trabalha com o WYSIWYG App Builder para criar componentes reais na web.

4. Indigo.Design possui mecanismos poderosos de tematização para que você possa aplicar as cores e tipografias da sua marca e torná-la sua.
5. Indigo.Design lançará variantes distintas para Material, Bootstrap e Fluent que se parecem com essas estruturas.

Sources:

[1] Gartner, Construa produtos melhores e mais rápidos com sistemas de design, Brent Stewart, Van Baker, 2 de março de 2021