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

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

Matheus Costa
July 10, 2017
Design
1
260

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

Como uma metodologia tão simples pode resolver problemas na organização dos componentes de um produto?

Matheus Costa

July 10, 2017
Tweet

More Decks by Matheus Costa

See All by Matheus Costa
Camelias - Products & Services
matheusagcosta
0
35
Home Office - Você e a sua empresa estão preparados?
matheusagcosta
0
38
Pra mim tanto faz, se é Less, Stylus ou Sass
matheusagcosta
0
79
Gulp: O Automatizador de Todos
matheusagcosta
1
680
Bourbon: A dose certa para seu front-end
matheusagcosta
1
72
Rede Social com Layout Responsivo
matheusagcosta
0
140

Other Decks in Design

See All in Design
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
太田博三(@usagisan2020)
otanet
0
190
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.2k
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
310
エムスリー株式会社　デザイングループ紹介資料 / m3design-team-profile
m3designer
0
4.5k
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.3k
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
portfolio
amitnk
1
130

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
A better future with KSS
kneath
238
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Tale of Four Properties
chriscoyier
156
23k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Speed Design
sergeychernyshev
24
610
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Building Flexible Design Systems
yeseniaperezcruz
327
38k
We Have a Design System, Now What?
morganepeng
50
7.2k

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 "