Design System

O que é?

Design System é um produto vivo que consiste em conjuntos de bibliotecas reutilizáveis e codificadas de design e conteúdo de uma empresa, geralmente criado e mantido pelas equipes de Design e Tecnologia.

Quando aplicar?

Antes do início de um projeto de Design System, é importante ter claro a importância de um Design System, qual será o objetivo do projeto e se há estrutura para gerir e manter futuramente.

O objetivo pode ser desde diminuir o retrabalho dos desenvolvedores e designers, até melhorar a padronização dos produtos.

Definir o objetivo é importante porque um projeto inicial de Design System pode durar entre 4 a 6 meses e envolve vários profissionais.

Objetivos do projeto

Antes do início de um projeto de Design System, é importante ter claro qual será o objetivo do projeto.

O objetivo do projeto pode ser desde diminuir o retrabalho dos desenvolvedores e designers até melhorar a padronização dos produtos.

A definição do objetivo é importante porque um projeto inicial de Design System pode durar entre 4 a 6 meses e envolve muitos profissionais.

Os elementos de um Design System

Cada empresa pode construir a estrutura do seu Design System de acordo com as suas necessidades. De forma geral, um Design System é formado por 4 partes principais:

  1. Design Principles:
    Conhecidos em português como Princípios de Design, são um conjunto de definições de um projeto que deve refletir a filosofia de design da empresa e guiar como os produtos devem ser concebidos. Eles servem como base para melhoria dos produtos, ajudando a equipe na tomada de decisões e aumentando a eficácia e a evolução do ecossistema de produtos.
  2. Design Tokens:
    São variáveis que armazenam atributos visuais, como cores, unidades de dimensionamento, grids, entre outros. Eles servem para criar e manter um sistema visual consistente, independente da plataforma, como sites e aplicativos.
  3. Componentes:
    Os componentes incluem uma variedade de elementos comuns da interface do usuário para criar experiências de forma ágil garantindo interação e estilo consistentes, além de otimizações de acessibilidade. Geralmente, estes componentes ficam disponíveis nas linguagens de código aplicadas nos sites ou aplicativos da empresa.
  4. Conteúdo da marca:
    Além dos componentes de design, um Design System pode contemplar conteúdos da marca, como Manual de Tom de Voz, Branding e recursos para download, como os arquivos de componentes do Design System.

Quais são as etapas?

Um projeto de Design System contempla 5 etapas:

  1. Entrevista com stakeholders:
    O objetivo desta etapa é entendermos as dores e necessidades dos stakeholders envolvidos no projeto, elencando suas dificuldades e objetivos no projeto.
  2. Definições:
    O objetivo desta etapa é definirmos os fluxos de atualização e manutenção do Design System, assim como as ferramentas a serem utilizadas tanto para design como para desenvolvimento e o formato e a equipe de manutenção.
  3. Design Principles:
    O objetivo desta etapa é alinharmos o conhecimento e a expectativa de todos os stakeholders envolvidos no projeto e criarmos os Design Principles da empresa.
  4. Inventário de Componentes:
    O objetivo desta etapa é um mapeamento de todos os componentes e styleguides já produzidos pelas equipes da empresa para entendimento aprofundado do contexto e identificação de padrões.
  5. Design System:
    O objetivo desta etapa é a criação do Design System em si. Geralmente, as empresas começam com uma versão inicial do projeto, chamada de MVP ou v1, focada nas principais necessidades.

Manutenção e Adoção

Tão importante quanto a criação de um projeto de Design System, é a sua manutenção e a adoção pelas diferentes equipes da empresa.

Para que o projeto tenha essa continuidade, é importante a participação de todos os stakeholders desde o início do projeto e uma ampla divulgação para toda a empresa.

Benefícios

  • Mais velocidade de criação, do protótipo até o resultado final;
  • Agilidade para realizar modificações em features já existentes;
  • Consistência de identidade em interface dos produtos;
  • Melhor alinhamento da equipe e colaboração entre as áreas de produto e desenvolvimento.

Clientes

Confira a opinião de nossos parceiros

Eu definiria (o projeto) como uma parceria muito eficiente, porque a Tuia teve esse processo de entender o contexto e por isso ela atendeu muito bem a gente como cliente. A Tuia tem uma boa referência de boas práticas de Design System e de outras matérias também, e isso é muito importante. Isso somado com o contexto da empresa, com as necessidades, foi a fórmula vencedora que deixou a gente muito satisfeito e gerou uma confiança muito grande.

Laís Wada
DesignOps na FTD Educação

Webinar

Saiba mais sobre este tema no webinar Design System: o que é, e como pode ajudar a sua empresa?

Veja outros cases

Acelerando a presença digital da montadora, em todos os seus lançamentos
Glossário Regional: Mais de 3.000 expressões faladas nos quatro cantos do Brasil para maior efetividade e engajamento nas peças de mídia
Forest Design System: Diminuição do tempo de prototipação de novos produtos e aumento da produtividade do time de desenvolvimento
Martins Atacadista: Aplicação de pesquisas para melhoria contínua dos produtos digitais
Experimento: Mapeamento da jornada do usuário para melhoria do aplicativo
Transformação digital para um dos maiores jornais do Brasil
DS Envolve: Disseminação da cultura de Design System
Delivery: Entendimento do canal e melhoria da taxa de conversão

Contato

Quer melhorar seu produto ou serviço? Escreva para a gente!