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:

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.
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.
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.
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:

Entrevista com stakeholders:
O objetivo desta etapa é entendermos as dores e necessidades dos stakeholders envolvidos no projeto, elencando suas dificuldades e objetivos no projeto.
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.
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.
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.
Design System:
O objetivo desta etapa é a criaçã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

Transformação digital para um dos maiores jornais do Brasil

Experimento: Mapeamento da jornada do usuário para melhoria do aplicativo

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

DS Envolve: Disseminação da cultura de Design System

Projeto de digitalização e integração de cardápios para maior eficiência operacional e redução de custos.

Forest Design System: Diminuição do tempo de prototipação de novos produtos e aumento da produtividade do time de desenvolvimento

Acelerando a presença digital da montadora, em todos os seus lançamentos

Martins Atacadista: Aplicação de pesquisas para melhoria contínua dos produtos digitais

Delivery: Entendimento do canal e melhoria da taxa de conversão

Mais Serviços

Conheça nossos serviços

CRO – Conversion Rate Optimization

Focus Group

UX Writing

Contato

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