Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for DevTalks Bauru DevTalks Bauru
July 06, 2017
Design
110
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
260
Robôs para Mercado Financeiro com MQL
Avatar for DevTalks Bauru devtalksbauru
1
220
Introdução ao Universo React Native
Avatar for DevTalks Bauru devtalksbauru
0
390
Go, Goroutines, Concorrência e Outros Bichos
Avatar for DevTalks Bauru devtalksbauru
0
110
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
130
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
120
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
60
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
75
Home Office: Você e a sua empresa estão preparados?
Avatar for DevTalks Bauru devtalksbauru
0
170

Other Decks in Design

See All in Design
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
Avatar for インクルーシブデザインスタジオCULUMU culumu
0
190
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
Avatar for Ayumi Suzuki ayumidesign
0
300
クリエイティブディレクター 両角 高寛 の自己紹介
Avatar for GYRO両角 morogyro
0
270
インターンから2年 新卒フロントエンドエンジニアから見た サイボウズのアクセシビリティ
Avatar for tak taku10101
0
210
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
990
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
540
ひとりで作れる時代に、判断をみんなで持つには
Avatar for こぎそ / Shinichi Kogiso kgsi
1
170
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
Avatar for Takeru Mukai mukai_takeru
0
420
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
140
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
240
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
290
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
520

Featured

See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.4k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
470
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
121
130k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
4.2k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
570
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
6
55k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7.1k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
143
7.9k

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 "