Scribd
Unggah
83 tayangan16 halaman

Metode Atomic Design untuk Desain Sistem

Metode Atomic Design digunakan untuk membuat sistem desain dengan 5 tingkatan yaitu Atom, Molekul, Organisme, Template, dan Halaman. Metode ini diciptakan oleh Brad Frost untuk membuat desain yang lebih konsisten, mudah, dan cepat serta mempermudah pengembangan aplikasi. Atomic Design dapat diterapkan pada berbagai perangkat desain seperti Sketch, Abstract, Figma, dan Adobe XD.

Diunggah oleh

Santos Eduardo
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
83 tayangan16 halaman

Metode Atomic Design untuk Desain Sistem

Metode Atomic Design digunakan untuk membuat sistem desain dengan 5 tingkatan yaitu Atom, Molekul, Organisme, Template, dan Halaman. Metode ini diciptakan oleh Brad Frost untuk membuat desain yang lebih konsisten, mudah, dan cepat serta mempermudah pengembangan aplikasi. Atomic Design dapat diterapkan pada berbagai perangkat desain seperti Sketch, Abstract, Figma, dan Adobe XD.

Diunggah oleh

Santos Eduardo
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

W

Atomic
Design
Metode untuk pembuatan desain sistem
dengan 5 tingkatan : Atoms, Molecules,
Organisms, Templates, Pages.

Fyi, diciptakan oleh Brad Frost, seorang desainer web,


seniman, pembicara, konsultan, sekaligus musisi.
Why? Lebih konsisten
Desainer jadi tidak bisa suka-suka sendiri.

Lebih gampang
Desainer jadi tidak perlu terlalu mikirin UI.

Lebih cepat
Desainer jadi tidak perlu apa-apa bikin baru.

Bikin Develop lebih mudah


Mempermudah hidup developer dengan
UI yang lebih terbatas.
Saya kasih analogi untuk tingkatannya dulu ya ..

LV 01 KECAMATAN Satuan terkecil (Gambir, Cideng, dsbnya).

LV 02 KOTA Gabungan beberapa Kecamatan.

LV 03 PROVINSI Gabungan beberapa Kota.

LV 02 PULAU Gabungan beberapa Provinsi.

LV 05 NEGARA Gabungan beberapa Pulau.

* Contoh yang dipakai, adalah Kecamatan di Kota Jakarta Pusat,


di Provinsi DKI Jakarta, di Pulau Jawa & di Negara Indonesia.
Kalau di Atomic Design, begini tingkatannya ..

LV 01 ATOMS Satuan terkecil (warna, bentuk, dsbnya).

LV 02 MOLECULS Gabungan dari Atoms.

LV 03 ORGANISMS Gabungan dari Moleculs.

LV 04 TEMPLATES Gabungan dari Organisms.

LV 05 PAGES Template dengan konten sebenarnya.


LV 01

ATOMS
Colors

Shapes

Typography ABCDEFGHIJKLMNEOQRSTUVWXYZ

abcdefghijklmneoqrstuvwxyz

1234567890

Icons

Images
LV 02

MOLECULS
Shapes

Images

Product name
Typography

Icons (00)

Rp 00
Location
LEVEL 03

ORGANISMS
Dummy title View All
LEVEL 04

TEMPLATES
LEVEL 05

PAGES
Atomic Design bisa diterapkan di beberapa
tools berikut, dengan menerapkan tingkatan
Sistem Library.

Sketch Abstract Figma Adobe XD

Selamat mencoba!
Thank you,
& may the force
be with you
Special thanks to Takeshi Ugajin - Design Manager &
Dai Torri - VP of Design at Quipper ..

Jeremy Benedictus
UI & UX Designer

Anda mungkin juga menyukai