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.
Oh no...
Tanpa whitespace, tulisan terasa padat dan tidak nyaman dibaca oleh pengguna.
Nice
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).
Oh no ...
Tanpa whitespace, elemen berdempetan dan tidak jelas hirarki dan kelompoknya.
Nice
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.
Oh no ...
Lagi, konten kehilangan hirarkinya juga tanpa whitespace, pengguna tidak diberi kesempatan untuk 'istirahat'.
Nice
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