Modularidade e Sistemas de Design

Talk apresentada durante o evento interno da Cheesecake Labs para troca de conhecimento entre a equipe. Aborda conceitos de modularidade e sistemas aplicados a interfaces digitais.

Transcript

1. Modularidade e Sistemas de Design Thiago Felipe Victorino UI Developer @ ckl.io
2. O que é modularidade? Modularidade trata-se do uso de unidades funcionais individualmente distintas na montagem de um sistema mecânico ou eletrônico.
3. O que é um sistema? Um sistema é um conjunto de componentes interativos ou interdependentes entre si que forma uma unidade complexa.
4. Design Modular Uma abordagem de projeto que subdivide um sistema em pequenas partes – chamadas de módulos –, que podem ser criadas e usadas independentemente.
8. Sistemas e Design Gráfico
9. Sistema de Identidade Visual Composto de elementos (logotipo, símbolo, cores e tipografia institucionais…) e suas aplicações (material de papelaria, uniforme, sinalização…).
16. Projeto Gráfico Editorial Constituído de estruturas que definem aspecto visual (cores, tipografia, alinhamentos, grid…) e posicionamento (como uma página deve ser construída).
21. Propósito de um sistema: • Definir diretrizes fundamentais • Definir os elementos e suas relações • Fornecer instruções para a construção do sistema
22. Mas no meio digital?
23. Início da Web • Tela = Canvas • Foco na interatividade • Conceito de páginas
24. Evolução da Web • Maior complexidade nas interfaces ◦ Design responsivo ◦ Flexibilidade e escalabilidade ◦ Forma estruturada de lidar com o CSS
25. Pensar em componentes, não páginas!
26. Movimento • Inspiração em modelos de arquitetura de software ◦ OOP • Criação de Frameworks/UI Kits ◦ Bootstrap, Foundation • Modularidade no CSS ◦ Pré-processadores ◦ Metodologias para solucionar problemas de arquitetura, organização, padronização, escalabilidade… ◦ Promover reaproveitamento
27. Resumindo: sistemas de design!
28. Sistema de Design O que é É um método: como pensar, planejar e construir interfaces digitais de forma modular e sistêmica. Ponto de contato entre o Designer e UI Developer.
29. Sistema de Design O que é É um produto: extensão da aplicação em si.
30. Sistema de Design Propósito • Definir diretrizes fundamentais. • Definir os elementos e suas relações. • Fornecer instruções para a construção do sistema.
31. Sistema de Design Vantanges • Linguagem unificada e padronizada: mantém todos na mesma página. • Reaproveitamento e fácil extensão. • Clareza e transparência. • Código estruturado, melhor manutenção.
32. Exemplos • https://www.lightningdesignsystem.com/ • https://material.google.com/ • http://getbootstrap.com/
33. Qual é a diferença entre sistemas de design, frameworks e guias de estilo?
34. Frameworks e Guias de estilo • Frameworks são uma base, serve como estrutura inicial. • Guias de estilo são um reflexo dos componentes do sistema. • Um Sistema de Design é a soma dos dois, mas em constante evolução e construção. Não só uma base ou reflexo, mas o produto em si.
35. Níveis de maturidade Nível 1 • Arquitetura Modular (CSS) Nível 2 • Nível 1 + • Documentação / Biblioteca (O QUÊ) Nível 3 • Nível 1 + Nível 2 + • Diretrizes / Guidelines (COMO) • Lorem ipsum dolor sit amet • Sed do eiusmod tempor incididunt ut labore
36. Exemplos • SingularityU Global Webapp
37. Obrigado!