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
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
320
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
280
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1k
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
720
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
170
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
470
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
210
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
230
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
1
1.3k
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.3k
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
580

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
210
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
490
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
600
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
330
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
400

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 "