Alignment — Kunci Layout yang Rapi

Alignment (perataan) mungkin terdengar sederhana, tapi perbedaan antara desain amatir dan profesional sering kali terlihat dari seberapa rapi alignment-nya.

Jenis Alignment

1. Left-aligned — paling umum dan natural untuk bahasa yang dibaca kiri-ke-kanan
2. Center-aligned — baik untuk heading, hero section, CTA
3. Right-aligned — untuk angka dalam tabel, harga, tanggal

Invisible Lines

Desain yang rapi memiliki garis-garis tak terlihat yang menghubungkan elemen:

┌─────────────────────────┐
│ Logo        Navigation  │  ← Tepi kiri Logo dan tepi kiri
│                         │    konten di bawah harus sejajar
│ Heading                 │
│ Subheading              │  ← "Invisible line" vertikal
│                         │
│ Card  Card  Card        │  ← Semua card sejajar di top
└─────────────────────────┘

Optics vs Math — Perataan Optik

Kadang alignment yang secara matematis benar terlihat secara visual salah. Ini disebut optical alignment.

Contoh umum:

• Ikon segitiga (play button) dalam lingkaran — secara matematis di tengah, tapi secara visual terlihat terlalu ke kiri. Solusi: geser sedikit ke kanan
• Teks di samping ikon — align-items: center kadang terlihat tidak center secara visual karena tinggi huruf dan ikon berbeda
• Padding di button — padding kiri-kanan sering perlu lebih besar dari atas-bawah untuk terlihat seimbang

Tips Alignment

1. Batasi titik alignment — semakin sedikit posisi unik, semakin rapi layout
2. Gunakan grid — grid secara natural menciptakan alignment
3. Zoom out — lihat halaman dari jauh untuk menemukan misalignment
4. Squint test — kedipkan mata, apakah layout terlihat teratur?

Perhatikan halaman produk di Apple.com — setiap elemen aligned dengan presisi. Teks, gambar, dan tombol semuanya mengikuti grid yang konsisten.