Design e Desenvolvimento de interfaces em escala

Transcript

1. Jair Junior Design e Desenvolvimento de interfaces em escala.
2. @gstudioapp
3. Beta launched: July 20, 2019. +600 users from 24 countries
4. - Contexto - Informações úteis - Futuro
5. - Contexto - Informações úteis - Futuro
6. Desenvolvimento de software se tornou muito mais complexo nos últimos anos, e trabalhar em escala é uma dor frequente de times de produto.
7. Para tentar resolver esse problema, times de design e engenharia estão utilizando Design Systems para construir aplicativos como uma linha de produção, montando legos.
8. Sistemas de Design não foram inventados hoje. Temos muitas aplicações ao longo da história para resolver problemas de escalar operações.
13. Empresas utilizando Design Systems.
14. - Contexto - Informações úteis - Futuro
15. Design Tokens? Design tokens são pequenas especificações do seu Design System levando em consideração a semântica de uso.
16. #1B75FF #3FFCD1 #FF95FF #000000 #FEF778 #FF95FF Just colors specs
17. Color Brand Primary Color Brand Secondary Brand Color Support Success Color Support Warning Support Color Support Dangers Design Tokens / Colors Color Neutral Darkest Color Neutral Dark Neutral Color Neutral White Color Neutral Light Color Neutral Medium
18. Color Brand Primary Color Brand Secondary Brand Color Support Success Color Support Warning Support Color Support Dangers Design Tokens / Colors
19. Color Brand Primary Color Brand Secondary Brand Color Support Success Color Support Warning Support Color Support Dangers Design Tokens / Colors (update)
20. Aa Aa Montserrat Baskerville Design Tokens / Typography / Family
21. Montserrat + 01 = Text Family 01 Family Baskerville + 02 = Text Family 02 64px + X-Big = Text Size X-Big Size 48px + Big = Text Size Big 32px + Medium = Text Size Medium 24px + Small = Text Size Small 16px + X-Small = Text Size X-Small 12px + XX-Small = Text Size XX-Small Bold = Text Weight Bold Text weight Medium = Text Weight Medium Line height Regular = Text Weight Regular Design Tokens / Typography / <Types> Text Size = Line Height Rule 01 Text Size + 8 = Line Height Rule 02
22. Montserrat + 01 = Text Family 01 Family Baskerville + 02 = Text Family 02 64px + X-Big = Text Size X-Big Size 48px + Big = Text Size Big 32px + Medium = Text Size Medium 24px + Small = Text Size Small 16px + X-Small = Text Size X-Small 12px + XX-Small = Text Size XX-Small Bold = Text Weight Bold Text weight Medium = Text Weight Medium Line height Regular = Text Weight Regular Design Tokens / Typography / <Types> Text Size = Line Height Rule 01 Text Size + 8 = Line Height Rule 02
23. Heading big Text Family 01 Text Size X-Big Text Weight Bold Line Height Rule 01 Text component
24. Design Tokens / Spacing 4px 8px 16px 24px 32px 48px 64px Spacing Stack X-Small Spacing Stack Small Spacing Stack Medium Spacing Stack Large Spacing Stack X-Large Spacing Stack XX-Large Spacing Stack XX-Small 4px 8px 16px 24px 32px 64px 2. Spacing Inline X-Small 3. Spacing Inline Small 4. Spacing Inline Medium 5. Spacing Inline Large 6. Spacing Inline X-Large 7. Spacing Inline XX-Large 1. Spacing Inline XX-Small 1 2 3 4 5 6
25. Design Tokens / Spacing / Inset 4px 8px 16px 32px Spacing Inset X-Small Spacing Inset Small Spacing Inset Medium Spacing Inset Big Spacing Inset Squish Small Spacing Inset Squish Big 4px 8px 16px 8px
26. Design Tokens / Shapes / Shadow Shadow Level 01 Shadow Level 02 Shadow Level 03 Shadow Level 04 Y: 4 Blur: 8 Y: 8 Blur: 16 Y: 16 Blur: 32 Y: 32 Blur: 64
27. Design Tokens / Shapes / Border Radius Border Radius None Border Radius Small Border Radius Medium Border Radius Large Border Radius Circle Border Radius Pill 0px 4px 8px 16px ≥ 500px = 50%
28. Design Tokens / Shapes/ Border Width Design Tokens / Shapes / Opacity 1px 2px 4px Border Width Small Border Width Medium Border Width Large 0.40 0.24 Opacity Opaque Opacity Medium Opacity Light 0.80
29. Componentes Design Tokens são constraints para construir componentes.
30. Shape Radius Small Spacing Inset Squish Big Color Brand Primary Text Text Family 02 Text Size X-Small Text Weight Bold Line Height Rule 01 Color Neutral White Button component
31. Card Image Heading big Components
32. Card Image Card Image + =
33. Card Image Card Image Highlight Components
34. Image Title Text Button Box Card Content
35. Spacing Inset S Spacing Stack M Spacing Stack S Spacing Stack L
36. Mouse :hover + shadow 3
42. Design Tokens - Open Source
43. Optimistic UI
44. Optimistic UI Fornece uma maneira simples para UI responder muito mais rápido, enquanto se certifica que os dados são consistentes quando a resposta do servidor chega . É um padrão que pode ser utilizado para simular uma atualização mesmo antes de receber uma resposta do servidor.
47. - Contexto - Informações úteis - Futuro
53. Design & Development tools Times de Design e Desenvolvimento front-end se esforçam muito para compatibilizar a falta de consistência entre seus ambientes de trabalho. Ferramentas de design atuais não encorajam designers a pensarem em aspectos funcionais, apenas definir interfaces por aspectos visuais.
55. Interface Design Interface Coding Business Logic Usual Workflow
56. Components Design Business Logic gStudio Workflow
59. gStudio Demo
60. Após 6 meses, nós ajudamos times de produtos digitais na adoção de metodologias para trabalhar de forma 30% mais eficiente, seguindo as melhores práticas das maiores empresas de tecnologia do mundo. Economia de tempo/esforço
61. DSCONF - Kari Saarinen, Principal Designer at Airbnb. https://vimeo.com/262959714 Old way
62. DSCONF - Kari Saarinen, Principal Designer at Airbnb. https://vimeo.com/262959714 New way
63. DSCONF - Kari Saarinen, Principal Designer at Airbnb. https://vimeo.com/262959714 Context Personalization
65. Jair Junior jj@gstudioapp.com