Whataf*ck is Atomic design
Transcript of Whataf*ck is Atomic design
ATOMIC DESIGN
Maurivan Luiz @ FEMUG CWB
whataf*ck is
ou basicamente, como fazer interfaces sem perda de tempo.
Maurivan Luiz28yo, 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
THE F*CKINGPSD ERA
Tudo é possível e incrível com photoshop você cria coisas derretíveis na tela
THE F*CKINGPSD ERA
Tudo é possível e incrível com photoshop você cria coisas derretíveis na tela
THE F*CKING
WATERFALL
THE F*CKINGPSD ERA
Tudo é possível e incrível com photoshop, você cria coisas derretíveis na tela.
BE RECRUITEDPLAY COLLEGE SPORTS
FOOTBALL
FOR ATHLETS AND COACHES
BASKETBALL BASEBALL SOCCER ICE HOCKEY
DOWNLOAD ON THE GET IT ONAPP STORE GOOGLE PLAY
PLAYERSCONNECTION
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 ONAPP 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
PLAYERSCONNECTION
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:10PMMelhorou, agora acho que temos problemas
com as cores, tem como inverter a cor do
destaque de basquete?
Maurivan Luiz 7:29PMFeito.
freaking client 7:58PMNão gostei, a primeira versão ficou melhor.
Vamos com ela :)
Maurivan Luiz 6:59PMPô claro, o sr. é o Sr dono do Planeta e como
cliente o seu desejo é uma ordem Sir.
freaking client 6:09PMEu 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?
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 Workflow
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…
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 noVale do Sílicio.
maurivan
2h
likesXXX
PHOTO
Aguardando o pessoal chegar aqui no Femug CWB :)
MOLÉCULAS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui noVale do Sílicio.
ORGANISMOS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
TEMPALTES
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
PÁGINAS
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245maurivan Mais um dia normal e comum aqui noVale do Sílicio.
FEMUG 22%4 21 PM:
PHOTO
maurivan 2s
likes245
maurivan Mais um dia normal e comum aqui noVale 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
If I were a tech guy Eu resumiria ATOMIC Design assim:
Átomos
Moléculas
Organismos
Templates
Pages
Variáveis
Funções
Classes
Library
Program
If I were a tech guy Eu resumiria ATOMIC Design assim:
Alguns benefíciosPromove consistência
e coesão na interfaceFá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
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.
2Certo 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.
3Desenvolvedores 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 [email protected]