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
プレゼンテーション実践
takenawa
0
6.5k
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
ビジネスモデル理解
takenawa
0
6.5k
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
570
Linuxのよく使うコマンドを解説
mickey_kubo
1
150
SkimaTalk Teacher Guidelines
skimatalk
0
790k
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
110
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
330
AIの時代こそ、考える知的学習術
yum3
2
170
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
550
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Why Our Code Smells
bkeepers
PRO
336
57k
Bash Introduction
62gerente
613
210k
Faster Mobile Websites
deanohume
307
31k
KATA
mclloyd
30
14k
Designing for Performance
lara
610
69k
Practical Orchestrator
shlominoach
189
11k
The Cult of Friendly URLs
andyhume
79
6.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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/