Atomic Design - Developers circle facebook

Palestra feito no evento Developers circle facebook mês da mulher no dia 28/03/2018
Links:
- www.codamos.club
- (not secure url) http://articles.uie.com/components_vs_patterns/
- https://twitter.com/brad_frost
- https://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-architecture/
- https://medium.com/dropbox-design/getting-co-creative-with-research-356d4696d46f
- https://medium.com/@WeWorkUX/the-atomic-unit-of-research-insight-17d619583ba
- https://github.caom/airbnb/react-sketchapp
- https://react-styleguidist.js.org/
- https://medium.com/hubspot-product/people-over-pixels-b962c359a14d
- https://medium.com/sketch-app-sources/atomic-design-system-with-sketch-libraries-e06e3b1f8302
- https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676
- https://www.creativebloq.com/web-design/10-reasons-you-should-be-using-atomic-design-61620771
- https://css-tricks.com/consistent-design-systems-in-sketch-with-atomic-design-and-the-auto-layout-plugin/
Pesquisa: https://docs.google.com/document/d/1D9MABoaHt7EPrxaLPORlFqDUTsZHJXSvph5SSwnpnBs/edit?usp=sharing

Sobre o tema:
https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design

https://uxdesign.cc/psychology-design-4-gestalt-principles-to-use-as-your-next-design-solution-fcdec423a6bf

Transcript

1. A t omic design A t omic design pra que?
2. Alda Rocha ux Researcher, Jr. ux writer, Senior ux Designer & Webdev.
3. www.codamos.club
4. IS IN THE <CODE> A WOMAN’S PLACE www.awomensplaceisinthecode.com #MulheresEmTI #WomenInTech #Codamos
5. Os produt os digitais devem poder existir em t odos e quaisquer dispositivos, tamanhos de tela e meios ao mesmo tempo.
7. Devemos criar um acesso bonit o e fácil ao conteúdo independente do device e context o.
8. “be consistent, not uniform!” gov. uk design principles
11. Padrões Padrões O que são padrões?
12. Um padrão é uma solução global para um problema (design interface) que vai ser usado muitas vezes, mas de maneiras diferentes.
13. Quando seguimos um padrão, seguimos uma ideia/conceit o que implementamos em element os específicos do layout.
14. Componentes Componentes O que são componentes?
15. Por outro lado, os componentes são um pedaço reutilizável específico do sistema de design de uma página.
16. Componentes Componentes Para que servem?
17. Os componentes são fáceis de reutilizar, editar e combinar
18. exatamente Para que as evoluções do produt o sejam mais simples.
19. UX UX E onde tudo isso ajuda na experiência?
20. Consistência, padrão e sequência. Firmar identidade do produt o e marca.
21. As leis básicas da gestal t são: Semelhança, proximidade, continuidade, pregnância, fechament o e unidade.
22. Componentes x padrões http:/ /articles.uie.com/components_vs_patterns/
23. A t omic A t omic O que é Atomic Design?
24. tudo começa com o menor element o da interface: o át omo.
25. Essa metáfora do át omo nos permite entender o que estamos criando e como vamos criar.
31. Essa abordagem nos faz finalmente pensar sobre um pedaço específico e na t otalidade ao mesmo tempo.
32. Nos da uma visão global de um produt o ou uma marca e também se aproxima da forma como devs codificam.
36. A t omic A t omic O que vem antes de começar a usar?
37. Você vai precisar de um Estudo e uma pesquisa compor tamental sobre o que seu produt o faz
38. Que problemas seu produt o resolve e quem são e pra onde vão as pessoas que vão usar.
39. Vai precisar de um Trabalho robust o de pesquisa, entendiment o, arquitetura de informação e estudo de interações.
40. Provavelmente você vai precisar de um UX designer!
41. Você precisa definir onde é possível “descomponentizar” para poder ter a opção segura de montar várias versões de componentes.
43. Arquitetura de informação :
45. https:/ /medium.com/dropbox-design/getting-co-creative-with- research-356d4696d46f
46. https:/ /medium.com/@WeWorkUX/the-atomic-unit-of-research- insight-17d619583ba
47. Diferente Diferente O que muda pra gente?
48. A tualmente, sem át omo, nós criamos t odas as telas de um produt o, em seguida, cor tamos em pequenos componentes para fazer especificações ou Kits UI.
50. Um dos problemas é que os componentes criados dessa forma não são genéricos e não dependem um do outro.
51. A reutilização de componentes é muit o limitada: nosso sistema de design assim é restritivo.
52. Hoje, a idéia de A t omic Design é começar com matéria-prima comum (át omos) com a qual podemos construir o rest o do projet o.
53. Temos uma continuidade em t odas as telas, mas também um sistema que oferece infinitas possibilidades de design!
56. Começando Começando Como começo com Atomic?
57. Identidade visual
58. A identidade visual deve ser for te, fácil de construir e liber tar -se do meio no qual ele será exibido.
59. Tem que ser capaz de trabalhar em todos os lugares!
60. Identidade visual Netflix: Forte, marcante e fácil de passear em ambientes diversos
61. melhorias de componentes
62. Os primeiros componentes estarão intimamente ligados ao produt o ou aos objetivos da marca.
63. Agora podemos criar nossos primeiros componentes de acordo com os objetivos do produt o e o fluxo inicial de usuários que já teremos identificado.
64. E, mais uma vez, devemos focar em se livrar dessa noção de "página".
65. Insisto no fato de que vamos nos concentrar em recursos ou fluxo de usuários, não em telas ...
66. Foco na interação e não na tela!
67. melhorias de interação
68. Em seguida, para enriquecer o sistema, vamos validar os componentes já existentes e os novos recursos.
69. Os primeiros componentes ajudarão a criar as primeiras telas e as primeiras telas ajudarão a criar novos componentes no sistema ou mudar os existentes.
71. mude seu mindset: pense genericamente
73. Quando projetamos com at omic design, sempre devemos ter em mente que o mesmo componente será usado e reutilizado em context os muit o diferentes
74. Transformando algo específico em genérico:
75. E se eu adicionar ou remover um element o? E se o text o é executado em 2 linhas? Qual será o compor tament o responsivo desse componente? Lembre que o mesmo componente será usado e reutilizado em contextos extremos.
76. Possíveis variações de um componente genérico:
77. Possíveis variações de um componente genérico:
78. Ter antecipado essas variações vai permitir então usar esse componente para criar outros.
79. Prever variações, status e possibilidades. Mapear jornadas e cenários ajuda muit o nisso!
80. pense em fluidez
81. Nós ainda tendemos a pensar em um projet o responsivo como uma reorganização de blocos em pont os de interrupção específicos (breakpoints).
82. Precisamos antecipar a fluidez dos comportamentos:
83. Precisamos antecipar a fluidez dos comportamentos:
84. par te do t odo
85. Uma das coisas realmente interessantes de criar um sistema de componentes com o A t omic Design é que criamos um conjunt o de element os que dependem uns dos outros.
86. É assim que refinamos a identidade da marca, desenvolvemos componentes e verificamos se o sistema funciona.
88. Interligado
89. Podemos, finalmente, como desenvolvedores, ter nossos próprios guias de estilo e construir sistemas inteiros em t orno deles.
90. Uma modificação em um át omo do nosso sistema reverberará aut omaticamente em t odos os componentes que usam esse át omo.
91. Todos os componentes estando ligados ao Átomo:
92. Bibliotecas para compar tilhar
93. Todos sabemos que podemos perder muit o rapidamente esta consistência, quando trabalhamos sozinhos em um projet o.
94. é ainda mais difícil quando quando trabalhamos com outros designers, o que está acontecendo cada vez mais frequentemente.
95. Tudo atualizado e compartilhado:
96. As bibliotecas compar tilhadas permitem que vários designers e devs trabalhem com a mesma base para começar seus projet os.
97. Nos permitem agilizar o trabalho porque, se atualizarmos um componente na biblioteca compar tilhada, a modificação ocorrerá aut omaticamente em t odos os arquivos.
98. Mudou um, mudam todos:
99. React Sketch app plugin: coded components pra usar direto no Sketch.
100. library react-styleguidist :
101. Eu fiz pesquisa! https:/ /docs.google.com/document/d/ 1D9MABoaHt7EPrxaLPORlFqDUTsZHJXSvph5SSwnpnBs/ edit?usp=sharing
102. reflexões e futuro
103. O problema: Precisar de novas funcionalidades ou interação que ainda não é suportada pelo componente. Muitas vezes, percebemos isso muito tarde, quando a equipe estava tentando usá-lo, causando dor de integração.
104. Coisa boa: Mas o futuro pensando atomicamente pode garantir que o crescimento do projeto e suas atualizações sejam menos traumáticas, e entendendo melhor o impacto de interações em todas as camadas. Sem falar na liberdade de criação de novas funcionalidades e aprendizado sobre o legado de um produto.
105. revisando
106. Sua matéria prima : átomos
107. Elementos simples ou complexos (moléculas e organismos)
108. Um dos resultados possíveis
109. The Style guide : O armazenamento e as instruções de construção, essencial para usar o sistema corretamente
110. https:/ /medium.com/hubspot-product/people-over-pixels-b962c359a14d
111. https:/ /medium.com/sketch-app-sources/atomic-design-system-with- sketch-libraries-e06e3b1f8302
112. https:/ /medium.muz.li/building-design-systems-with-atomic- design-93a13286f676
113. https:/ /www.creativebloq.com/web-design/10-reasons-you- should-be-using-atomic-design-61620771
114. https:/ /css-tricks.com/consistent-design-systems-in-sketch-with- atomic-design-and-the-auto-layout-plugin/
117. @mjcoffeeholick alda.rocha@interaction-design.org