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 maurivan@maurivan.com