$30 off During Our Annual Pro Sale. View Details »

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

Avatar for DevTalks Bauru DevTalks Bauru
July 06, 2017
Design
0
48

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

Talk do Matheus Costa

Avatar for DevTalks Bauru

DevTalks Bauru

July 06, 2017
Tweet

More Decks by DevTalks Bauru

See All by DevTalks Bauru
Construindo Microsserviços a partir de um Monolito
Avatar for DevTalks Bauru devtalksbauru
0
220
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
360
Go, Goroutines, Concorrência e Outros Bichos
Avatar for DevTalks Bauru devtalksbauru
0
86
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
99
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
93
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
49
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
51
Home Office: Você e a sua empresa estão preparados?
Avatar for DevTalks Bauru devtalksbauru
0
140

Other Decks in Design

See All in Design
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
12k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1k
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
3k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
260
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
Avatar for kinomi kinomidesign
0
140
What makes a great Director?
Avatar for _Limex_ _limex_
0
350
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
310
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
520
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
150
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜（Scrum Fest Mikawa 2025）
Avatar for Tadashi Inoue tadashiinoue
0
970
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
330
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
150

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
240
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
540
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
91
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
0
180
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
550
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k

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 "