parts forming a complex whole, in particular. 2. a set of principles or procedures according to which something is done; an organized scheme or method.
System para otimizar o desempenho do desenvolvimento e alcançar alto nível de qualidade na produção de interface do usuário. ➔ Documentação ◆ Manualmente escrita em Markdown; ◆ Gerada automaticamente do código; ➔ Fluxo de utilização ◆ Gráficos e explicações de cenários comportamentais; ➔ Casos de uso ◆ Exemplos de composições de componentes visuais; ◆ Exemplo de casos de uso de componentes visuais; ➔ Ferramentas de desenvolvimento ◆ A plataforma fornece meios de construção de componentes visuais e a aplicação das composições isoladas da lógica do negócio;
para qualidade do código! ➔ Dados ◆ Produto principal do projeto ◆ Requer estrutura para ter interoperabilidade ◆ Pode passar por transformações em diversas camadas usando diferentes tecnologias ➔ HTML ◆ Marcação dos padrões de conteúdo ◆ Marcação da apresentação ◆ Declarado em hierarquia ◆ Pode ser construído com template engines ➔ CSS ◆ Aplica padrões visuais ao HTML ◆ Declarado em cascata ◆ Ganha super-poderes com pré/pós-processadores ➔ JS (no browser) ◆ Cria comportamentos e experiências ricas ◆ Pode gerenciar rotas e controlar processos ◆ Pode ser utilizado para gerar HTML e CSS!
ativos compartilhados, que trabalham juntos em um ciclo iterativo para unificar produtos, negociar e alinhar a comunicação entre equipes, e aumentar a eficiência na criação de produtos desde o design até a implementação.
do usuário, desenvolvimento, gerência e consenso. Produto: Requer um time com um claro e mensurável caminho para o sucesso. Ecossistema: Apenas existe se os produtos fazem uso dele e as pessoas o adotam. Ideal: Um time independente do design system pode fazer uso do mesmo sem precisar de orientação. @paulfarino
agirem com confiança. Eficiência: Agiliza e otimiza o fluxo de trabalho. Antecipa as necessidades as pessoas a trabalharem melhor, mais rápido, e de modo mais inteligente. Consistência: Cria familiaridade, fortalece a intuição aplicando a mesma solução para o mesmo problema. Beleza: Demonstra respeito pela atenção e tempo das pessoas através de habilidades elegantes e bem elaboradas. @jina
os estilos, padrões, práticas, e princípios de um Design System e ensina como usá-lo. Pattern Library: Um conjunto organizado de componentes relacionados e reutilizáveis. Geralmente contendo exemplos de código, diretrizes de design, e casos de uso. @uxcellence_com
de usuário completa pronta pra usar; - Se você não é bom em design ou front-end; - Fantástico para prototipagem; - Não é muito compatível com design feito sob medida; Esclarecendo umas coisinhas... Framework CSS - Ótimo se você precisa de ajuda com escalabilidade e arquitetura; - Se você não é particularmente bom em CSS mas possui um design feito sob medida; - Ajuda a guiar e direcionar decisões; @csswizardry
- Menos tempo adaptando código - Mais consistência nas implementações Empresários, publicitários, gerentes de produto, consumidores... - Fazer dinheiro - Economizar dinheiro - Melhorar a experiência do consumidor
equipes e empresas que mudam muito rápido. - Útil quando surgem ineficiências em organizações maiores. - Evita isolamento de conhecimento. - Reduz riscos no desenvolvimento. - Reduz interpretações de decisões. - Reduz desperdício e repetições.
na construção do design system? - Adoção do sistema não acontece da noite para o dia. - Precisa ser adotado de cima para baixo e de baixo para cima na organização: - Suporte aos colegas; - Demonstração e educação dos valores do design; - Entendimento das necessidades do negócio, produto e utilizadores; - Modelos de times para escalar um design system: - Solitário: uma equipe desenvolve o sistema para suas próprias necessidades; - Centralizado: uma equipe dedicada desenvolve o sistema para as necessidades do ecossistema; - Distribuído: vários membros de várias equipes colaboram no desenvolvimento do sistema para o ecossistema; - Requer processos bem definidos no fluxo de trabalho, para favorecer a colaboração...
o guia de estilo como ponto focal para todas as tarefas de desenvolvimento de interface do usuário. @bitovi Descobrir funcionalidades Abstrair em componentes Implementar e Documentar Componentes Plug & Play
for possível! E se não for automático, é muito importante haverem processos bem definidos, acessíveis e transparentes para todos os colaboradores. Em melhoria contínua, revisões constantes das definições que são manuais podem progredir para processos automatizados. Os padrões de qualidade são relativos ao contexto e investimento.
qualidade do código; • Testes ◦ Teste de unidades, snapshots, eventos, comportamento, regressão visual, performance; ◦ Evite testes desnecessários! • Tipagem ◦ Ajuda a evitar bugs potenciais relacionados à utilização errada das variáveis e parâmetros; • Hooks ◦ Git hooks para verificar sintaxe, testes e tipagem na hora do commit evita desperdício de tempo com code review; ◦ Integrações com Slack nos deploys para comunicação mais efetiva; Ferramentas de automatização
Possibilita retrocompatibilidade; • Integração contínua ◦ Verifica integridade da build no momento da entrega; ◦ Toda entrega verificada representa uma distribuição em potencial; • Documentação ◦ Automatizar documentação reduz riscos de defasagem e informações incoerentes; ◦ A documentação automatizada costuma ajudar a estruturar o código, aumentando sua qualidade em geral; • Geradores ◦ Agiliza o trabalho do desenvolvedor em escalar com padrões repetitivos; Ferramentas de automatização
The full stack design system • Team Models for Scaling a Design System • Design Systems, Style Guides, and Pattern Libraries: Oh My! • Style Guide Driven Development: A How To Guide To Improve your Development Workflow Listagens: • Design Systems Repo • Adele • Website Style Guide Resources • Awesome Design Systems Ferramentas: • Storybook • React Styleguidist • Fractal • Docz Vídeos: • Designing a Design System • Design Systems - Zero to one • What Is A CSS Framework Anyway?
malarkey
rocio
nonsquared
tammyeverts
vanstee
productmarketing
bluesmoon
bryan
smashingmag
addyosmani
kastner
