Componentes pra que?

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

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
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.
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.
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.
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.
29. Arquitetura de informação :
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.
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!
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.
48. Mude seu mindset: pense genericamente
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.
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.
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
83. obrigada @mjcoffeeholick alda.rocha@interaction-design.org