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

Componentes pra que?

Alda Rocha
March 10, 2018

Componentes pra que?

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

Alda Rocha

March 10, 2018
Tweet

More Decks by Alda Rocha

Other Decks in Design

Transcript

  1. Componentes
    Componentes
    pra que?

    View full-size slide

  2. Alda Rocha
    ux researcher, ux designer & webbed

    View full-size slide

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

    View full-size slide

  4. www.codamos.club

    View full-size slide

  5. 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.

    View full-size slide

  6. Padrões
    Padrões
    O que são padrões?

    View full-size slide

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

    View full-size slide

  8. Componentes
    Componentes
    O que são componentes?

    View full-size slide

  9. Por outro lado, os
    componentes são um
    pedaço reutilizável,
    específico do sistema de design de uma página.

    View full-size slide

  10. Componentes
    Componentes
    Para que servem?

    View full-size slide

  11. Os componentes são
    fáceis de reutilizar,
    editar e combinar
    para que as evoluções do produto sejam mais simples.

    View full-size slide

  12. UX
    UX
    E onde tudo isso ajuda na experiência?

    View full-size slide

  13. 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..

    View full-size slide

  14. Componentes x padrões
    Componentes x padrões
    https:/
    /articles.uie.com/components_vs_patterns/

    View full-size slide

  15. A
    t
    omic
    A
    t
    omic
    O que é Atomic Design?

    View full-size slide

  16. 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.

    View full-size slide

  17. 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.

    View full-size slide

  18. A
    t
    omic
    A
    t
    omic
    O que vem antes de começar a usar?

    View full-size slide

  19. 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.

    View full-size slide

  20. 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.

    View full-size slide

  21. Arquitetura de informação :

    View full-size slide

  22. Diferente
    Diferente
    O que muda pra gente?

    View full-size slide

  23. 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.

    View full-size slide

  24. 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.

    View full-size slide

  25. 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!

    View full-size slide

  26. Começando
    Começando
    Como começo com Atomic?

    View full-size slide

  27. Identidade visual

    View full-size slide

  28. 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!

    View full-size slide

  29. Identidade visual Netflix:
    Forte, marcante e fácil de passear em ambientes diversos

    View full-size slide

  30. Melhorias de
    componentes

    View full-size slide

  31. 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.

    View full-size slide

  32. 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 ...

    View full-size slide

  33. Foco na interação e não na tela!

    View full-size slide

  34. Melhorias de
    interações

    View full-size slide

  35. 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.

    View full-size slide

  36. Mude seu mindset:
    pense genericamente

    View full-size slide

  37. Quando projetamos
    com at
    ômicos, sempre
    devemos ter em mente
    que o mesmo componente será usado e reutilizado em
    contextos muito diferentes.

    View full-size slide

  38. Transformando algo específico em genérico:

    View full-size slide

  39. 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.

    View full-size slide

  40. Possíveis variações de um componente genérico:

    View full-size slide

  41. 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!

    View full-size slide

  42. Pense em fluidez

    View full-size slide

  43. 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

    View full-size slide

  44. Precisamos antecipar a fluidez dos comportamentos:

    View full-size slide

  45. Par
    te do t
    odo

    View full-size slide

  46. 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.

    View full-size slide

  47. 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.

    View full-size slide

  48. Todos os componentes estando ligados ao Átomo:

    View full-size slide

  49. Bibliotecas para
    compar
    tilhar

    View full-size slide

  50. 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.

    View full-size slide

  51. Tudo atualizado e compartilhado:

    View full-size slide

  52. 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.

    View full-size slide

  53. Mudou um, mudam todos:

    View full-size slide

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

    View full-size slide

  55. library react-styleguidist :

    View full-size slide

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

    View full-size slide

  57. reflexões e futuro

    View full-size slide

  58. 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.

    View full-size slide

  59. 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.

    View full-size slide

  60. Sua matéria prima : átomos

    View full-size slide

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

    View full-size slide

  62. Um dos resultados possíveis

    View full-size slide

  63. The Style guide :
    O armazenamento e as instruções de construção,
    essencial para usar o sistema corretamente

    View full-size slide

  64. https:/
    /medium.com/hubspot-product/people-over-pixels-b962c359a14d

    View full-size slide