Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ATOMIC
DESIGN
Maurivan Luiz @ FEMUG CWB
whataf*ck is
ou basicamente, como fazer
interfaces sem perda de tempo.
Maurivan
Luiz
28yo, designer, Bob Dylan fan.
CM ✈ CWB ✈ SP ✈ CWB ✈ SFO ✈ CWB
iG former Designer
Lead UX/UI Designer @ GVT ...
THE F*C
PSD ER
Tudo é possí
photoshop vo
derretíveis na
THE F*C
PSD ER
Tudo é possí
photoshop vo
derretíveis na
THE F*CKING
WATERFALL
THE F*CKING

PSD ERA
Tudo é possível e incrível com
photoshop, você cria coisas
derretíveis na tela.
BE RECRUITED
PLAY COLLEGE SPORTSFOOTBALL
FOR ATHLETS AND COACHES
BASKETBALL BASEBALL SOCCER ICE HOCKEY
DOWNLOAD ON THE GET...
TOMA ESSA,
CHAMPS!
WHAAAAAT?
Isso é patético!
"We’re not designing pages,
we’re designing systems of
components”
- Stephen Hay, 2012 -
Autor do livro Responsive Design ...
ATOMIC DESIGN é uma
metodologia criada por
Brad Frost para construção
de sistemas de componentes
Muito utilizada em empres...
CHEMISTRY
TIME
ÁTOMOS MOLÉCULAS ORGANISMOS TEMPLATES PÁGINAS
Química Design
ÁTOMOS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
maurivan
...
MOLÉCULAS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
ORGANISMOS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
TEMPALTES
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
PÁGINAS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.
FEMUG 22%4 21 PM...
If I were a tech guyEu resumiria ATOMIC Design assim:
Átomos
Moléculas
Organismos
Templates
Pages
Variáveis
Funções
Classes
Library
Program
If I were a tech guyEu resumiria ATO...
Alguns benefícios
Promove consistência
e coesão na interface
Fácil para testar
Serve como
referência
para o time
Melhor
wo...
Meus 4 centspara que isso tudo funcione melhor
1
Confiança e sinergia do time, você está
deixando de lado a documentação.
Sem isto, a mágica não acontece.
2
Certo nível de experiência e
conhecimento de como a tecnologia
funciona entre as partes envolvidas.
Não recomendo nem a ...
3
Desenvolvedores que possuem bom
senso na hora de tomar decisões de
design.
4 Projetos de grande e médio porte
…nada a ver usar ATOMIC em Landing Pages.
Don’t be xiita.
Meu último conselho
So long, and
thanks for all
the fish
@mrvanz
maurivan@maurivan.com
Prochain SlideShare
Chargement dans…5
×

Whataf*ck is Atomic design

Whataf*ck is Atomic design ou basicamente, como fazer interfaces sem perda de tempo by Maurivan Luiz

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Identifiez-vous pour voir les commentaires

Whataf*ck is Atomic design

  1. 1. ATOMIC DESIGN Maurivan Luiz @ FEMUG CWB whataf*ck is ou basicamente, como fazer interfaces sem perda de tempo.
  2. 2. Maurivan Luiz 28yo, designer, Bob Dylan fan. CM ✈ CWB ✈ SP ✈ CWB ✈ SFO ✈ CWB iG former Designer Lead UX/UI Designer @ GVT Telefônica Now, breaking things at Pipefy
  3. 3. THE F*C PSD ER Tudo é possí photoshop vo derretíveis na
  4. 4. THE F*C PSD ER Tudo é possí photoshop vo derretíveis na THE F*CKING WATERFALL
  5. 5. THE F*CKING
 PSD ERA Tudo é possível e incrível com photoshop, você cria coisas derretíveis na tela.
  6. 6. BE RECRUITED PLAY COLLEGE SPORTSFOOTBALL FOR ATHLETS AND COACHES BASKETBALL BASEBALL SOCCER ICE HOCKEY DOWNLOAD ON THE GET IT ON APP STORE GOOGLE PLAY PLAYERS CONNECTION Connect with talented athlete directly, you can watch their skills through video showreels directly from Surface 1. Work with recruiter to increase your chances of finding talented athlete. Save your time, recruit proper athlets for your team. COLLABORATION GROWTH 01 02 03 DOWNLOAD ON THE GET IT ON APP STORE GOOGLE PLAY Contact Us | Terms & Conditions DOWNLOAD APPSHOW EVERYONE WHAT YOU CAN DO! ATHLETS CONNECTION Connect with coaches directly, you can ping coaches to view profile. Work with other student athletes to  increase visability. When you share and like other players videos it will increase your visability as a player. This is the team work aspect to Surface 1. Resources and tools for you to get better as a student Athelte. Access to training classes, tutor sessions, etc  COLLABORATION GROWTH 01 02 03 PLAYERS CONNECTION Connect with talented athlete directly, you can watch their skills through video showreels directly from Surface 1. Work with recruiter to increase your chances of finding talented athlete. Save your time, recruit proper athlets for your team. COLLABORATION GROWTH 01 02 03 freaking client 7:10PM Melhorou, agora acho que temos problemas com as cores, tem como inverter a cor do destaque de basquete? Maurivan Luiz 7:29PM Feito. freaking client 7:58PM Não gostei, a primeira versão ficou melhor. Vamos com ela :) Maurivan Luiz 6:59PM Pô claro, o sr. é o Sr dono do Planeta e como cliente o seu desejo é uma ordem Sir. freaking client 6:09PM Eu tinha visto no layout e tinha gostado, mas agora que ví a interface já moldada não gostei muito, acho que é ordem!, tem como inverter o primeiro e o segundo bloco?
  7. 7. TOMA ESSA, CHAMPS!
  8. 8. WHAAAAAT? Isso é patético!
  9. 9. "We’re not designing pages, we’re designing systems of components” - Stephen Hay, 2012 - Autor do livro Responsive Design Workflow
  10. 10. ATOMIC DESIGN é uma metodologia criada por Brad Frost para construção de sistemas de componentes Muito utilizada em empresas como Dropbox, Salesforce, Mailchimp, Pipefy Yelp…
  11. 11. CHEMISTRY TIME
  12. 12. ÁTOMOS MOLÉCULAS ORGANISMOS TEMPLATES PÁGINAS Química Design
  13. 13. ÁTOMOS FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio. maurivan 2h likesXXX PHOTO Aguardando o pessoal chegar aqui no Femug CWB :)
  14. 14. MOLÉCULAS FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio.
  15. 15. ORGANISMOS FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio.
  16. 16. TEMPALTES FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio.
  17. 17. PÁGINAS FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio.
  18. 18. FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio. FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio. FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio. FEMUG 22%4 21 PM: PHOTO maurivan 2s likes245 maurivan Mais um dia normal e comum aqui no Vale do Sílicio. maurivan 2h likesXXX PHOTO Aguardando o pessoal chegar aqui no Femug CWB :) ÁTOMOS MOLÉCULAS ORGANISMOS TEMPLATES PÁGINAS Construção ValidaçãoReferência
  19. 19. If I were a tech guyEu resumiria ATOMIC Design assim:
  20. 20. Átomos Moléculas Organismos Templates Pages Variáveis Funções Classes Library Program If I were a tech guyEu resumiria ATOMIC Design assim:
  21. 21. Alguns benefícios Promove consistência e coesão na interface Fácil para testar Serve como referência para o time Melhor workflow Cria um vocabulário compartilhado entre o time Style guide first Rapidez de prototipagem
  22. 22. Meus 4 centspara que isso tudo funcione melhor
  23. 23. 1 Confiança e sinergia do time, você está deixando de lado a documentação. Sem isto, a mágica não acontece.
  24. 24. 2 Certo nível de experiência e conhecimento de como a tecnologia funciona entre as partes envolvidas. Não recomendo nem a pau para designers que não entendem como o Frontend responsivo é implementado.
  25. 25. 3 Desenvolvedores que possuem bom senso na hora de tomar decisões de design.
  26. 26. 4 Projetos de grande e médio porte …nada a ver usar ATOMIC em Landing Pages.
  27. 27. Don’t be xiita. Meu último conselho
  28. 28. So long, and thanks for all the fish @mrvanz maurivan@maurivan.com

×