Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomic Design
Search
Jullia Saad
March 29, 2017
Education
0
23
Atomic Design
Uma breve introdução sobre a metodologia Atomic Design e seus conceitos.
Jullia Saad
March 29, 2017
Tweet
Share
More Decks by Jullia Saad
See All by Jullia Saad
Além dos retângulos ou quadrados: CSS Shapes
julliasaad
0
47
Curso HTML e CSS - Semana de Tecnologia Fatec 2018
julliasaad
0
31
PWA, a web virando app
julliasaad
0
54
Seletores avançados, pseudo-classes e pseudo-elementos no CSS
julliasaad
0
27
Other Decks in Education
See All in Education
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
130
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.4k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
550
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
130
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
230
2025年度春学期 統計学 第2回 統計資料の収集と読み方(講義前配付用) (2025. 4. 17)
akiraasano
PRO
0
150
より良い学振申請書(DC)を作ろう 2025
luiyoshida
1
3.3k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.3k
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Fireside Chat
paigeccino
37
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Speed Design
sergeychernyshev
32
1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
Atomic Design Metodologia para criação de interfaces
Quem sou eu? Jullia Saad, 20 anos. Estagiária na Tegra.
Estudante de ADS - Fatec Sorocaba Github: https://github.com/julliasaad
Ideias iniciais • Apresentado por Brad Frost, em 2013 •
É um modelo mental • Possui 5 estágios não lineares • Analogia para explicar como os diferentes componentes de uma página podem interagir • Páginas na internet são sistemas
SE TODA MATÉRIA DO UNIVERSO PODE SER QUEBRADA EM FINITOS
ELEMENTOS… NOSSAS INTERFACES TAMBÉM PODEM!
ÁTOMOS • Blocos básicos de construção de toda matéria •
Elementos básicos do HTML : tags • Possuem propriedades ◦ <h1> - font-size • Elementos isolados que não precisam de um contexto para existir
Moléculas • Dois ou + átomos mantidos juntos por ligações
químicas • Os átomos reunidos em moléculas assumem novas propriedades Descreve o input Envia a informação • Funcionam com um propósito único
organismos • Conjunto de moléculas que funcionam juntas como uma
unidade • Seções distintas de uma interface ◦ header ◦ footer
templates • Fornece contexto para as moléculas e organismos que
estão “abstratos” • Sistema esquelético da página
páginas • Template com textos e imagens • Objetivo: mostrar
o conteúdo real em ação • Fase + concreta • Testar a eficácia do design
Por que usar? Algumas vantagens 1. Reusabilidade
2. Padroniza componentes 3. Possui uma biblioteca aberta, flexível e
que te dá espaço para criar seus próprios componentes. 4. A idéia é ser um facilitador para a criação do SEU design.
Pattern Lab • Repositório no GitHub • Biblioteca em duas
versões: Node e PHP • Tudo dividido e organizado entre átomos, moléculas e organismos • Propositalmente incompleto • Acrescentar seu próprio CSS
links Livro do Brad Frost: http://atomicdesign.bradfrost.com/table-of-contents/ Conferência: https://vimeo.com/channels/beyondtellerrand/67476280 Pattern Lab:
http://patternlab.io/ Repositório no GitHub: https://github.com/pattern-lab Artigo: https://tableless.com.br/o-que-e-design-atomic/