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
38

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
190
Robôs para Mercado Financeiro com MQL
devtalksbauru
1
180
Introdução ao Universo React Native
devtalksbauru
0
340
Go, Goroutines, Concorrência e Outros Bichos
devtalksbauru
0
62
Como Garantir a Qualidade da Sua Aplicação
devtalksbauru
0
77
BDD - Além da Automação
devtalksbauru
0
76
PHP7 - Not for kids
devtalksbauru
0
37
A verdade sobre Frameworks
devtalksbauru
0
40
Home Office: Você e a sua empresa estão preparados?
devtalksbauru
0
110

Other Decks in Design

See All in Design
ウェブディレクターを救うBacklog
wattlaa
0
290
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
420
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
100
1人歩きする営業資料作成
yutoshukuya
2
150
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
実務のための マイクロ インタラクション入門
shingo2000
0
360
「これをゲームにしたい！」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
850
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
610

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
18
1.6k
What's in a price? How to price your products and services
michaelherold
238
11k
A Tale of Four Properties
chriscoyier
152
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Faster Mobile Websites
deanohume
300
30k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
It's Worth the Effort
3n
180
27k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Designing for Performance
lara
602
67k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k

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 "