Um design system pode ser definido como “um conjunto de padrões de design consistentes através de diferentes sistemas” e, pela adoção desses padrões, é possível simplificar discussões e acelerar o desenvolvimento de produtos.
Na grande maioria dos casos, um site ou aplicativo é composto por mais de uma página e, cada página, geralmente tem uma estrutura visual e interações diferentes. No entanto, é natural que muitas das características dessas interfaces se repitam, como, por exemplo, cores, formas, dimensões e até mesmo o modo do usuário interagir com elas.
Garantir essa consistência nos designs das interfaces e no código que é produzido não é uma tarefa fácil. Especialmente quando não se tem uma fonte única de referência para recorrer e discutir soluções aos diversos problemas que uma aplicação irá resolver.
É exatamente nesse ponto que um design system pode ajudar!
O que compõe um design system?
Na sua forma mais simples, um design system pode ser composto por apenas uma coleção de componentes e um guia de estilo. Esses componentes são utilizados como blocos básicos para compor interfaces inteiras. Exemplos de componentes são: botões, caixas de seleção, alertas, etc.
Designers podem compor experiências completas utilizando esses componentes e desenvolvedores podem codificar esses componentes e utilizá-los na criação das diferentes telas do aplicativo.
Apenas com a definição e padronização de componentes, já é possível:
- Remover a redundância no trabalho dos designers na definição das interfaces;
- Estabelecer uma linguagem única entre pessoas de áreas de atuação distintas, simplificando discussões;
- Reduzir o tempo gasto na codificação das interfaces;
- Prover consistência visual e interativa;
- Simplificar eventuais alterações ou refinamentos nos componentes.
Mas onde se concentra a definição desses componentes e demais elementos de uma interface? Por exemplo:
- Qual deve ser o tamanho da fonte do texto de um parágrafo?
- Qual deve ser a família da fonte, a cor do texto, a altura das linhas?
- Quão distante um botão deve estar de um parágrafo?
- Como e quando utilizar cada um dos componentes?
Todas essas definições e muitas outras podem ser concentradas em um só lugar, no que é conhecido como style guide — guia de estilo.
Style Guide
Um style guide é um ponto de referência que contém diversas especificações, regras e boas práticas para guiar designers e desenvolvedores na garantia da consistência entre as telas e experiência de uso de uma mesma aplicação (ou entre diferentes aplicações).
Ele pode conter definições para, por exemplo:
- Logotipagem;
- Tipografia;
- Iconografia;
- Cores;
- Tom de voz a ser usado em textos;
- Animações.
Ter esse ponto de referência faz com que discussões sobre como os elementos da interface devem se parecer sejam menos frequentes e os designers possam focar mais na experiência do usuário.
Além disso, um story guide reduz o atrito no onboarding de novos designers no time e auxilia na garantia da coesão das entregas, independente de qual designer tenha realizado.
Do mesmo modo, desenvolvedores podem consultar o style guide a qualquer momento para obter valores exatos — como dimensões e cores — para codificar os componentes e interfaces seguindo fielmente as especificações já estabelecidas.
A especificação desses valores também pode ser padronizada e ter suas próprias definições. É nesse exato ponto que entram estruturas conhecidas como design tokens.
O que são Design Tokens
Um design token é a representação de um valor dentro de um design. Um “valor” pode ser o tamanho em pixels da fonte de um título, a cor de fundo de um botão, o tempo de duração de uma animação etc.
Normalmente, é vantajoso transformar em um token todo valor que se repete através de um design. Desse modo, esse valor deixa de ser apenas um número avulso na interface e passa a ter significado próprio.
Através da aplicação e uso de tokens, podemos aumentar a confiabilidade de que a especificação do design e a codificação seguirão estritamente os mesmos valores, dado que ambos estiverem usando o token correto.
Ainda que não seja uma prática indispensável dentro de um design system, seu uso facilita a manutenção e eventuais alterações nos valores do design, uma vez que uma mudança em um token se propaga por todo o design e aplicações automaticamente.
Como adotar o uso de um design system?
Existem muitos design systems prontos e bem estabelecidos que podem ser encontrados na internet e utilizados gratuitamente como estão.
A grande maioria deles também provê meios de customização para adequá-los às características da sua marca. São soluções completas com guidelines, bibliotecas de componentes e extensa documentação.
Alguns exemplos bem conhecidos e amplamente adotados são:
Outra possibilidade é criar um design system completamente do zero, porém, esta abordagem demanda mais esforço e tempo, além de equipes especificamente dedicadas para criação e manutenção dele.
Ganhos com um Design System
A adoção de um design system traz inúmeros benefícios através da padronização nos designs das interfaces.
Os design systems já se tornaram parte fundamental de qualquer produto, especialmente em casos de projetos multiplataforma executado por grandes equipes.
Quer saber mais sobre o desenvolvimento e aplicação de um design system para o seu produto? Entre em contato com um de nossos especialistas!
