Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Back-end & Front-end em Harmonia com Atomic Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for DevTalks Bauru DevTalks Bauru
July 06, 2017
Design
100
0

Back-end & Front-end em Harmonia com Atomic Design

Talk do Matheus Costa

Avatar for DevTalks Bauru

DevTalks Bauru

July 06, 2017

More Decks by DevTalks Bauru

See All by DevTalks Bauru
Construindo Microsserviços a partir de um Monolito
Avatar for DevTalks Bauru devtalksbauru
0
250
Robôs para Mercado Financeiro com MQL
Avatar for DevTalks Bauru devtalksbauru
1
210
Introdução ao Universo React Native
Avatar for DevTalks Bauru devtalksbauru
0
370
Go, Goroutines, Concorrência e Outros Bichos
Avatar for DevTalks Bauru devtalksbauru
0
100
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
110
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
100
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
53
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
64
Home Office: Você e a sua empresa estão preparados?
Avatar for DevTalks Bauru devtalksbauru
0
150

Other Decks in Design

See All in Design
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.4k
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.6k
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
220
Debiasing Your Software Design Decision-Making @ Flowcon '26
Avatar for Kenny Baas-Schwegler baasie
1
120
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
820
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
240
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
2k
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
1
560
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
1
140
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
330
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
170
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
690

Featured

See All Featured
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
270
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
460
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
460
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
340
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
410
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
220
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
970

Transcript

  1. FRONT END BACK harmonia Atomic Design em com &

  2. SOU @matheusagcosta EU? QUEM @fintechdev #comunidade <3

  3. DESIGN OI? ATOMIC metodologia

  4. None
  5. None
  6. None
  7. None
  8. None

  9. átomos BOTÃO Parágrafo Título LINK #8ABE5E

  10. moléculas Título Estilizado AÇÃO 2 AÇÃO 1 Item 1 Item

    2 Item 3 Item 4

  11. organismos Alerta AÇÃO 2 Mensagem de confirmação AÇÃO 1 LOGO

    Link Ativo Link Link Link Link Texto de rodapé Link

  12. Modelos LOGO Link Ativo Link Link Link Link texto de

    rodapé Link IMAGEM

  13. páginas Dev T alks Contact About Blog Home Sitemap copyright

    © 2017 Terms
  14. None
  15. None

  16. Bootstraps tiny

  17. organizando química toda a

  18. None

  19. http://patternlab.io/

  20. http://demo.patternlab.io/

  21. MAS…

  22. https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/

  23. case fintechdev

  24. navegação detalhes código demonstração

  25. None

  26. demo time

  27. atomic design CSS? no

  28. “…atomic design has nothing to do with CSS or JavaScript

    architecture.” http://bradfrost.com/blog/post/atomic-design-is-for-user-interfaces/ - Brad Frost

  29. arquitetura CSS

  30. http://www.creativebloq.com/web-design/manage-large-css- projects-itcss-101517528

  31. None

  32. metodologia CSS

  33. BLOCK ELEMENT MODIFIER - .header - .header__title - .header__title--dark

  34. None

  35. ! atomicdesign.bradfrost.com tableless.com.br/o-que-é- design-atomic "