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

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

DevTalks Bauru
July 06, 2017
Design
0
43

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

Talk do Matheus Costa

DevTalks Bauru

July 06, 2017
Tweet

More Decks by DevTalks Bauru

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

Other Decks in Design

See All in Design
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
セブンデックス カルチャーブック
sevendex
0
1.7k
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP！】
vivion
0
190
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Fireside Chat
paigeccino
34
3.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Embracing the Ebb and Flow
colly
84
4.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k

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 "