Design System

Imagem com fundo azul turquesa com ícone de celular e tela representando o 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

Cipreste

Para mostrar de forma didática um projeto de Design System, o Cipreste foi criado pela nossa equipe com base em nosso último website, lançado em janeiro de 2020.

Contato

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

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

Conheça mais sobre um projeto de Mapeamento da Jornada neste webinar ministrado por nosso Fundador Gilmar Gumier

Outros serviços

Conheça outros dos nossos serviços

Rua Estados Unidos, 1570

Jardim América - São Paulo / SP

gabriela@tuia.me

Facebook-f Instagram Linkedin
Entre em contato

Contato

Quer melhorar seu produto ou serviço? Entre em contato e agende uma conversa com a gente.

Você também pode entrar em contato por e-mail ola@tuia.me ou pelo whatsapp (11) 94011-5017.