Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design - Developers circle facebook

07ac697bcff40050a82cb4503de9eb68?s=47 Alda Rocha
March 30, 2018

Atomic Design - Developers circle facebook

07ac697bcff40050a82cb4503de9eb68?s=128

Alda Rocha

March 30, 2018
Tweet

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.
  6. None
  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

  9. None
  10. None
  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.
  26. None
  27. None
  28. None
  29. None
  30. None
  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.
  33. None
  34. None
  35. None
  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.
  42. None
  43. Arquitetura de informação :

  44. None
  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.
  49. None
  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!
  54. None
  55. None
  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.
  70. None
  71. mude seu mindset: pense genericamente

  72. None
  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.
  87. None
  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/

  115. None
  116. None
  117. @mjcoffeeholick alda.rocha@interaction-design.org