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

Componentes pra que?

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

Componentes pra que?

Aprendendo as vantagens do Atomic design. Palestra dada no evento React SP.

07ac697bcff40050a82cb4503de9eb68?s=128

Alda Rocha

March 10, 2018
Tweet

Transcript

  1. Componentes Componentes pra que?

  2. Alda Rocha ux researcher, ux designer & webbed

  3. IS IN THE <CODE> A WOMAN’S PLACE www.awomensplaceisinthecode.com #MulheresEmTI #WomenInTech

    #Codamos
  4. www.codamos.club

  5. None
  6. Os produt os digitais devem poder existir em t odos

    e quaisquer dispositivos, tamanhos de tela e meios ao mesmo tempo. Devemos criar um acesso bonito e fácil ao conteúdo, independentemente do dispositivo, tamanho da tela ou contexto.
  7. None
  8. Padrões Padrões O que são padrões?

  9. Um padrão é uma solução global para um problema de

    design comum de modo que você possa usar a solução muitas vezes e nunca o use da mesma maneira duas vezes.
  10. Componentes Componentes O que são componentes?

  11. Por outro lado, os componentes são um pedaço reutilizável, específico

    do sistema de design de uma página.
  12. Componentes Componentes Para que servem?

  13. Os componentes são fáceis de reutilizar, editar e combinar para

    que as evoluções do produto sejam mais simples.
  14. UX UX E onde tudo isso ajuda na experiência?

  15. Consistência, padrão e sequência. Firmar identidade do produt o e

    marca. As Leis Básicas da Gestalt são: Semelhança, Proximidade, Continuidade, Pregnância, Fechamento e Unidade..
  16. Componentes x padrões Componentes x padrões https:/ /articles.uie.com/components_vs_patterns/

  17. A t omic A t omic O que é Atomic

    Design?
  18. tudo começa com o menor element o da interface: o

    át omo. Essa metáfora nos permite entender o que estamos criando e especialmente como vamos criá-lo.
  19. None
  20. None
  21. None
  22. Esta abordagem nos faz finalmente pensar sobre a par te

    e a t otalidade ao mesmo tempo, nos da uma visão global de um produto ou uma marca, e também se aproxima da forma como os desenvolvedores codificam.
  23. None
  24. None
  25. A t omic A t omic O que vem antes

    de começar a usar?
  26. Você vai precisar de um Estudo e pesquisa compor tamental

    sobre o que seu produt o faz, que problemas ele resolve e quem são (pra onde vão) as pessoas que vão usar.
  27. Vai precisar de um Trabalho robust o de pesquisa, entendiment

    o, arquitetura de informação e estudo de interações. Provavelmente você vai precisar de um ux designer! Você precisa definir onde é possível "descomponentizar" para poder ter a opção segura de montar várias versões de componentes.
  28. None
  29. Arquitetura de informação :

  30. None
  31. Diferente Diferente O que muda pra gente?

  32. A té recentemente, 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. Mais ou menos assim que fazemos quando não usamos átomos.
  33. None
  34. Um dos problemas é que os componentes criados dessa forma

    não são genéricos e não dependem um do outro. A reutilização de componentes é muito limitada: nosso sistema de design assim é restritivo.
  35. 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: Temos, portanto, não apenas um "air de famille" entre todas as telas, mas também um sistema que oferece infinitas possibilidades de design!
  36. None
  37. Começando Começando Como começo com Atomic?

  38. Identidade visual

  39. A identidade visual deve ser for te, fácil de construir

    e liber tar -se do meio no qual ele será exibido; tem que ser capaz de trabalhar em todos os lugares!
  40. Identidade visual Netflix: Forte, marcante e fácil de passear em

    ambientes diversos
  41. Melhorias de componentes

  42. Os primeiros componentes estarão intimamente ligados ao produt o ou

    aos objetivos da marca. Agora podemos criar nossos primeiros componentes de acordo com os objetivos do produto e o fluxo inicial de usuários que já teremos identificado.
  43. E, mais uma vez, devemos focar em se livrar dessa

    noção de "página". Insisto no fato de que vamos nos concentrar em recursos ou fluxo de usuários, não em telas ...
  44. Foco na interação e não na tela!

  45. Melhorias de interações

  46. Em seguida, para enriquecer o sistema, vamos validar os componentes

    já existentes e os novos recursos: Os primeiros componentes ajudarão a criar as primeiras telas e as primeiras telas ajudarão a criar novos componentes no sistema ou a mudar os existentes.
  47. None
  48. Mude seu mindset: pense genericamente

  49. None
  50. Quando projetamos com at ômicos, sempre devemos ter em mente

    que o mesmo componente será usado e reutilizado em contextos muito diferentes.
  51. Transformando algo específico em genérico:

  52. 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.
  53. Possíveis variações de um componente genérico:

  54. Ter antecipado essas variações vai permitir então usar esse componente

    para criar outros. Prever variações, status e possibilidades. Mapear jornadas e cenários ajuda muito nisso!
  55. Pense em fluidez

  56. 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. Temos de antecipar o comportamento fluido de nossos componentes
  57. Precisamos antecipar a fluidez dos comportamentos:

  58. Par te do t odo

  59. 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. É assim que refinamos a identidade da marca, desenvolvemos componentes e verificamos se o sistema funciona.
  60. None
  61. Interligado

  62. Podemos, finalmente, como desenvolvedores, ter nossos próprios guias de estilo

    e construir sistemas inteiros em t orno deles. Uma modificação em um átomo do nosso sistema reverberará automaticamente em todos os componentes que usam esse átomo.
  63. Todos os componentes estando ligados ao Átomo:

  64. Bibliotecas para compar tilhar

  65. Todos sabemos que podemos perder muit o rapidamente esta consistência,

    quando trabalhamos sozinhos em um projet o, mas é ainda mais difícil quando trabalhamos com outros designers, o que está acontecendo cada vez mais frequentemente.
  66. Tudo atualizado e compartilhado:

  67. As bibliotecas compar tilhadas permitem que vários designers e devs

    trabalhem com a mesma base para começar seus projet os. Nos permitem agilizar o trabalho porque, se atualizarmos um componente na biblioteca compartilhada, a modificação ocorrerá automaticamente em todos os arquivos.
  68. Mudou um, mudam todos:

  69. React Sketch app plugin: coded components pra usar direto no

    Sketch.
  70. library react-styleguidist :

  71. Eu fiz pesquisa! https:/ /docs.google.com/document/d/ 1D9MABoaHt7EPrxaLPORlFqDUTsZHJXSvph5SSwnpnBs/ edit?usp=sharing

  72. reflexões e futuro

  73. 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.
  74. None
  75. 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.
  76. revisando

  77. Sua matéria prima : átomos

  78. Elementos simples ou complexos (moléculas e organismos)

  79. Um dos resultados possíveis

  80. The Style guide : O armazenamento e as instruções de

    construção, essencial para usar o sistema corretamente
  81. https:/ /medium.com/hubspot-product/people-over-pixels-b962c359a14d

  82. None
  83. obrigada @mjcoffeeholick alda.rocha@interaction-design.org