Design System
por Wagner Souza
1. Branding
1.1. Documentação Design
1.1.1. Manual da marca
1.1.2. styleguide Sites institucionais
1.1.2.1. Componentes visuais
1.1.3. Manual de fotografia
2. Ferramentas
2.1. Sketch
2.2. Figma
2.3. Zeplin
2.4. Photoshop
3. Styleguide
3.1. Projeto de estilos
3.1.1. Framework CSS base
3.1.1.1. bootstrap
3.1.1.2. foundation
3.1.1.3. material design
3.1.1.4. Usar .scss ou .sass
3.1.2. Projeto com lib para build: ex webpack
3.2. Estilos da Marca Safra
3.2.1. iconografia
3.2.2. tipografia
3.2.3. grids
3.2.4. Paleta de cores
3.3. Distribuição
3.3.1. unpkg
3.3.2. npm package
4. Componentes
4.1. Documentação de componentes
4.1.1. storybook
4.2. Lista de componentes
4.2.1. breadcrumb
4.2.2. botões
4.2.3. modal
4.2.4. header
4.3. Projeto de construção de componentes
4.3.1. angular
4.3.2. React
4.3.3. Vue
4.3.4. Suportar angularJS com downgrade dos componentes para diretivas
5. Portal de documentação
5.1. Wiki
5.2. Agrupar/apontar para conteúdos do gitlab
5.3. Vídeos
6. Pesquisa de satisfação do designs system
6.1. Tempo médio gasto com o desenvolvimento de componentes visuais
6.2. Tela com complexidade: baixa, media, alta
6.3. Tela com formulários, serviços e interação do usuário
7. Institucionalizar
7.1. Criar sigla CCS
7.1.1. AQM
7.2. Esteira Jenkins
7.3. Repositórios Gitlab
7.3.1. /arquitetura-front