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

1. ATOMIC
DESIGN
Maurivan Luiz @ FEMUG CWB
whataf*ck is
ou basicamente, como fazer
interfaces sem perda de tempo.

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. THE F*C
PSD ER
Tudo é possí
photoshop vo
derretíveis na

4. THE F*C
PSD ER
Tudo é possí
photoshop vo
derretíveis na
THE F*CKING
WATERFALL

5. THE F*CKING
PSD ERA
Tudo é possível e incrível com
photoshop, você cria coisas
derretíveis na tela.

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. TOMA ESSA,
CHAMPS!

8. WHAAAAAT?
Isso é patético!

9. "We’re not designing pages,
we’re designing systems of
components”
- Stephen Hay, 2012 -
Autor do livro Responsive Design Workflow

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

12. ÁTOMOS MOLÉCULAS ORGANISMOS TEMPLATES PÁGINAS
Química Design

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. 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. ORGANISMOS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui no
Vale do Sílicio.

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. 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. 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. If I were a tech guyEu resumiria ATOMIC Design assim:

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. 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. Meus 4 centspara que isso tudo funcione melhor

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. 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. 3
Desenvolvedores que possuem bom
senso na hora de tomar decisões de
design.

26. 4 Projetos de grande e médio porte
…nada a ver usar ATOMIC em Landing Pages.

27. Don’t be xiita.
Meu último conselho

28. So long, and
thanks for all
the fish
@mrvanz
maurivan@maurivan.com