GRID DESIGN

WEBSITE LAYOUT
FIGMA LAYOUT

KOMPOSISI
Pengertian
Komposisi desain adalah cara
menyusun mengatur teks, gambar, dan
elemen UI lainnya pada halaman. Ketika
komposisi dilakukan dengan baik,
desain akan menyenangkan secara
estetika dan sangat efektif. Desainer
juga menyebut komposisi sebagai tata
letak, desain, atau karya seni.
Jenis-jenis
 Komposisi 2D
terletak pada satu bidang —memiliki
panjang dan lebar tetapi tidak memiliki
kedalaman.
 Komposisi 3D
memiliki tiga dimensi: tinggi, lebar, dan
kedalaman.
 Komposisi naratif
Komposisi naratif bercerita.Seperti sebuah
novel, ia memiliki latar, karakter, dan plot
yang terungkap saat pengguna
menguraikannya.
 Komposisi visual
Tidak seperti komposisi formal yang dapat
dengan mudah dipecah menjadi elemen
dasarnya, komposisi visual harus tampak
utuh dan tak terpisahkan.
 Formal Komposisi
bentuk geometris dasar - kotak,
lingkaran, segitiga, dll. - disusun
sedemikian rupa sehingga
menyampaikan makna atau pesan
Komposisi desain web
Ini memungkinkan Anda untuk melibatkan
pengguna, membantu mereka menemukan
informasi yang mereka butuhkan, dan
menyampaikan pesan Anda
Komposisi Bagus untuk website
1. Pilih format
2. Gunakan grid
3. Elemen grup
4. Tentukan interaksi antar elemen
Tujuan komposisi
 Pikirkan tentang bagaimana pengguna akan
berinteraksi dengan desain Anda — elemen mana
yang Anda ingin mereka perhatikan secara cepat dan
mana yang kurang penting. Skala dan hirarki visual
adalah teman terbaik Anda untuk mengatur elemen
untuk menandakan titik fokus.
Grid system
Grid adalah salah garis bantu untuk desain yang
terstruktur dengan baik dan terorganisir. Membantu
meletakkan setiap elemen dan panduan untuk
mengorganisirnya.
Tipe Grid
Manuscript Grids : untuk buku, ebook atau teks yang
banyak.
Column Grids : untuk majalah ,
Baseline Grids : untuk memudahkan membaca.
Modular grids : seperti papan catur
Hierarchical grids : paling sering digunakan untuk
design website.
Manuscript
grid
Colum
Grid Symetri Non Symetri
 Symetri 3 kolom

Colum
Grid
Baseline
Grid
Modular
Grid
Hierarchical
grids
 Layout
anatomy
12 column
desain
website
Figma column