• Design System trata-se de um conjunto de padrões de componentes de design, elaborados a fim de manter a consistência visual e funcional de um produto, sistema ou organização.
  • Ele facilita o designer a construir padrões para o ambiente, tendo a mesma consistência visual.
  • Design System são diversas pecinhas que você têm padronizadas, que servem para ter uma consistência, uma coerência dentro do seu projeto.
  • Isso evita que a cada página/frame que é construído, você tenha que recriar novos componentes.
  • Também ajuda a manter um padrão e uma organização do projeto.
  • O Design System é um organismo vivo. Ele pode ser definido no começo do projeto, mas pode sofrer modificações dos componentes de acordo com as necessidades do projeto.

Consistência do design

  • Quando estamos falando sobre Design System, estamos falando exatamente sobre consistência do design.
  • Um projeto precisa ter uma consistência. Quando estamos falando desta consistência, não estamos falando apenas da parte gráfica, visual. Mas também na consistência de animações, funcionalidades, ações que o usuário tenha que executar.

Composição do Design System

  • Botões, inputs, cores, calendários, fontes, tipografias, imagens, ícones, ilustrações, gráficos, animações (motions), tabelas, etc.

Guia de Estilo (Guideline)

  • É um conjunto de diretrizes da marca da empresa, que pode incluir elementos de interface do usuário. Esquema de cores, fontes e suas propriedades para auxiliar na
  • execução e uso.
  • No passado, antes da web, o Guia de Estilo, serviam para definir padrões e estilos de escrita e impressão.

Ul / Web Kits

  • Templates de layouts constrídos com os componentes do sistema.
  • Normalmente podem ser personalizados livremente, replicados e usados para uma prototipagem rápida.
  • Por exemplo o framework Bootstrap

Estados dos componentes

Padrão, ativo, selecionado, inativo, hover, alerta, confirmação, notificação.

Quais os benefícios do Design System?

  • Escalável;
  • Atualizando;
  • Dinâmico;
  • Repetível;
  • Padronizado;
  • Organizado;
  • Padronização da entregar;
  • Redução de custos e tempo;
  • Melhor previsibilidade;
  • Otimização de tarefas;
  • Otimização do esforço de trabalho