O que é Um Design System?
- 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