Whitespace Dalam Desain

Bagian Dari Seri Desain 101

Ditulis

Whitespace atau negative space adalah sebuah ruang kosong dalam desain UI entah itu ruang antara layout, baris, paragraf, atau elemen UI lainnya. Whitespace tidak secara harfiah berarti ruang kosong dengan background putih tetapi bisa dari warna apa saja, tekstur, pola atau bahkan gambar.

Meskipun ada yang beranggapan whitespace menyia-nyiakan real estate layar, kenyataannya hal ini adalah elemen penting dalam desain UI.

Berikut adalah beberapa poin tentang pentingnya whitespace dalam desain UI:

Menggunakan whitespace secara tepat bisa membuat konten yang disajikan mudah diamati juga meningkatkan legibilitas. Whitespace kecil diantara kata atau baris paragraf biasa disebut Micro White Space.

Close Circle

Oh no...

Tanpa whitespace, tulisan terasa padat dan tidak nyaman dibaca oleh pengguna.
Tanpa whitespace, tulisan terasa padat dan tidak nyaman dibaca oleh pengguna.
Tick Circle

Nice

Tulisan jadi lebih 'enak' dibaca dengan pengaturan line-height dan letter-spacing yang pas.
Tulisan jadi lebih 'enak' dibaca dengan pengaturan line-height dan letter-spacing yang pas.

Ruang kosong antara layout dan elemen layout biasa juga disebut Macro White Space sangat membantu untuk membimbing pengguna dan memprioritaskan area fokus seperti tombol CTA (call-to action).

Close Circle

Oh no ...

Tanpa whitespace, elemen berdempetan dan tidak jelas hirarki dan kelompoknya.
Tanpa whitespace, elemen berdempetan dan tidak jelas hirarki dan kelompoknya.
Tick Circle

Nice

Dengan white space, masing-masing elemen memiliki hirarkinya tersendiri dan memiliki pengelompokan yang jelas.
Dengan whitespace, masing-masing elemen memiliki hirarkinya tersendiri dan memiliki pengelompokan yang jelas.

Disaat suatu desain terisi dengan banyak elemen, pengguna biasanya akan merasa kelelahan dengan semua element visual yang ada di layar. Whitespace memberikan ruang untuk pengguna beristirahat agar tidak kewalahan.

Close Circle

Oh no ...

Lagi, konten kehilangan hirarkinya juga tanpa whitespace, pengguna tidak diberi kesempatan untuk 'istirahat'.
Lagi, konten kehilangan hirarkinya juga tanpa whitespace, pengguna tidak diberi kesempatan untuk 'istirahat'.
Tick Circle

Nice

Whitespace di antara elemen menjadikan ruang 'bernafas' saat pengguna meng-akses konten web kita.
Whitespace di antara elemen menjadikan ruang 'bernafas' saat pengguna meng-akses konten web kita.

Whitespace terkenal disebut ‘ruang terbuang’ karena orang merasa hal tersebut bisa digunakan untuk menyimpan elemen lain. Penting untuk desainer membuat klien paham tentang nilai dari whitespace.

Whitespace tidak hanya membuat harmoni dan keseimbangan desain, tapi juga membimbing pengguna melewati satu elemen ke elemen lainnya. Whitespace bukan ruang kosong semata, tetapi ruang untuk menyeimbangkan desain.

Kita tidak perlu membuat layout yang penuh sesak dengan teks dan gambar untuk menyampaikan pesan yang jelas.

Whitespace itu mirip Avatar, sang penyeimbang elemen