CODECON - Design System - Genoma

Transcript

1. CODECON GENOMA - O DESIGN SYSTEM DA UNICO
2. Aline Ayumi Matheus Scheunemann Vinicius Moisés Mobile Developer Mobile Developer Tech lead
3. DESIGN SYSTEM
4. O que é? Design System é um sistema unificado que contém elementos, componentes, regras e princípios que guiam o desenvolvimento das interfaces de uma empresa. A ideia desse sistema é facilitar o trabalho dos designers e desenvolvedores, além de criar uma identidade que pode ser facilmente reconhecida pelos usuários.
5. Criou uma padronização de seus uniformes de trabalho, definindo cores e tamanhos da Logomarca. Nasa 1976 Material Design é o Design System desenvolvido pela Google para ajudar os times e a comunidade de tecnologia a criar interfaces de alta qualidade para diferentes plataformas. Material Design 2014 Atlassian é uma empresa de software que desenvolve produtos de gerenciamento de projetos, como o Jira e o Trello. Atlassian
6. 1 2 3 4 5 Consistência Qualidade Consistência e padronização levam a maior qualidade da interface. Erros se tornam raros e a experiência do usuário é aprimorada; Comunicação Rapidez no processo de design Maior foco em UX Design Permite a escalabilidade do processo de design. Dessa forma, o desenvolvimento de interfaces se torna bem mais ágil e fácil; Permitem que os desenvolvedores criem interfaces mais consistentes, uma vez que os elementos de UI estão padronizados e sob as corretas diretrizes de uso; Design System é a “fonte da verdade”, portanto as discussões entre desenvolvedores e designers tendem a se amenizar uma vez que todas as diretrizes e elementos estão oficializados; Uma vez que os elementos estão padronizados, os designers conseguem dar mais foco para a experiência ao invés da criação dos componentes. Quais são os benefícios do Design System?
7. Atomic Design O Atomic Design é uma metodologia que auxilia na criação do Design System, ajudando a criar um design sistemático. O conceito nos permite criar projetos com consistência e escalabilidade, entendendo cada etapa da construção. A metodologia nos permite ver o design de interface dividido em seus elementos atômicos e também nos permite ver como esses elementos se unem para formar nossas UIs finais.
8. Átomos Moléculas Junção desses elementos em um padrão de interação que faça sentido para a pessoa que está usando Ex: Botões Organismos Template Page Objetos no nível de página, onde colocamos componentes em um layout formando a estrutura de página. Elementos mínimos presentes em uma página. Ex: Icons Agrupamentos dessas moléculas em elementos que norteiam a navegação e a leitura do conteúdo nessa interface. Ex: Header, Cards Resultado final, exatamente como o template, só que completo de informações reais. Atomic Design
9. GENOMA O DESIGN SYSTEM DA UNICO
10. Abordagem utilizada Organisms Molecules Atoms Foundations Widgets
11. Repositório SKELETON GENOMA APP WIDGETBOOK Estrutura do Projeto COMPONENTE PRETO E BRANCO Biblioteca para criar os componentes e seus estilos COMPONENTE ESTILIZADO Biblioteca estilizar os componentes do skeleton APP MOBILE Aplicativo com contendo todos os componentes desenvolvidos APP WEB Aplicativo web para documentação dos componentes
12. Repositório SKELETON GENOMA APP WIDGETBOOK Estrutura do Projeto COMPONENTE PRETO E BRANCO Biblioteca para criar os componentes e seus estilos COMPONENTE ESTILIZADO Biblioteca estilizar os componentes do skeleton APP MOBILE Aplicativo com contendo todos os componentes desenvolvidos APP WEB Aplicativo web para documentação dos componentes
13. Contrato Component STATE Um componente pode ter vários estados. De acordo com o estado o componente pode ser renderizado de uma maneira diferente STYLE Para cada estado é configurado o estilo do componente. Ex: cores, tamanhos, font style etc Um componente é renderizado baseado em seu estado e seu style
14. Exemplo de implementação do contrato
15. Repositório SKELETON GENOMA APP WIDGETBOOK Estrutura do Projeto COMPONENTE PRETO E BRANCO Biblioteca para criar os componentes e seus estilos COMPONENTE ESTILIZADO Biblioteca estilizar os componentes do skeleton APP MOBILE Aplicativo com contendo todos os componentes desenvolvidos APP WEB Aplicativo web para documentação dos componentes
16. Ex de implementação do componente no genoma CODE-CODE: VEMSERUNICO
17. Estrutura de abstração Organisms Molecules Atoms Foundations A ideia por trás dessa estrutura foi alcançar o seguinte formato de utilização dos componentes: - Formato desejado: GenButton.primary.sm() - Esse formato traduz de maneira mais clara as variações disponíveis no Genoma - Reduz a quantidade de parâmetros nos construtores, e tira a necessidade de parâmetros opcionais que só seriam usados em outras variações. GenButton
18. Exemplo de implementação das factories
19. DISCOVERY E DESENVOLVIMENTO Especificação dos componentes, com variações e comportamentos Fluxo de Trabalho DESENVOLVIMENTO Desenvolvimento dos componentes da biblioteca do Design System TESTES E APP Testes de UI e adição dos componentes desenvolvidos no aplicativo exemplo. WIDGETBOOK E ZEROHEIGHT Adição dos componentes no widgetbook e documentação de como usar no zeroheight DESIGN ENGENHARIA TESTES DOCUMENTAÇÃO
20. WIDGETBOOK
21. O que é o widgetbook? Organisms Atoms Foundations • Widgetbook é o storybook do Flutter; • Torna visível em tempo real os componentes existentes em código e permite a realização de testes de UI; • Pode ser entendido como um modelo de documentação viva.
22. PRÓXIMOS PASSOS
23. Próximos passos Organisms Molecules Atoms Foundations - Integração Design x Code - Qualidade - Golden Tests - Suporte a outras plataformas
24. INTEGRAÇÃO DESIGN x CODE
25. Integração Design x Code hoje
26. Style Dictionary Organisms Molecules Atoms Foundations - Build system - Style once, run everywhere
27. Integração Design x Code
28. GOLDEN TESTS
29. Golden Tests Organisms Molecules Atoms Foundations testWidgets('Golden test', (WidgetTester tester) async { await tester.pumpWidget(Button()); await expectLater(find.byType( Button), matchesGoldenFile( button.png')); });
30. SUPORTE A OUTRAS PLATAFORMAS
31. Suporte a outras plataformas Organisms Molecules Atoms Foundations - Stacks diferentes - React
32. Perguntas? Aline Ayumi Matheus Scheunemann Vinicius Moisés TEMOS VAGAS! :) alineayumi matheus-scheunemann viniciusmo