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
22
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
53
Seletores avançados, pseudo-classes e pseudo-elementos no CSS
julliasaad
0
27
Other Decks in Education
See All in Education
第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会
nagisa53
2
360
LightSail2324
cbtlibrary
0
130
@ngrx/signals
yannickbaron
0
180
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
【潔能講堂】永續環境、擁抱綠能 太陽能光電發展現況與產業製程解析
learnenergy2
0
120
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
3k
子どもたち創造的活動機会の必要性に関する提言/creativehub
codeforeveryone
0
240
5 занятие. Разбор метода "8 кубиков"бизнес-модели #ideaNN 16.02.2024.
karlov
0
180
インターアクトクラブについて:国際ロータリー第2720地区インターアクト委員会 委員長・大分東ロータリークラブ 阿部 克哉 氏
2720japanoke
0
670
AI教育の未来『おもしろい』を作れる人材の育て方 #東京AI祭
o_ob
1
360
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
200
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
It's Worth the Effort
3n
180
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Done Done
chrislema
178
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
How to train your dragon (web standard)
notwaldorf
73
5.2k
A better future with KSS
kneath
231
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
GitHub's CSS Performance
jonrohan
1025
450k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Language of Interfaces
destraynor
151
23k
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/