White Space: Sederhana, Tetapi Berdampak Besar

Emma Sharah
3 min readSep 10, 2022

Pernah engga kalian melihat tulisan yang terlalu rapat, kecil dan padat? Bagaimana perasaan kalian saat membacanya? Apakah kalian pusing saat membacanya?

Hal itu bisa terjadi salah satunya karena kurangnya ruang putih (white space) pada tulisan tersebut. Sama seperti rumah, banyak ruang yang harus diisi oleh perabotan, tetapi apa jadinya jika semua ruangan diisi terlalu penuh? Ya, rumah akan terlihat lebih sempit, terasa sesak dan penghuni pun jadi kurang nyaman didalamnya.

Nah, dalam artikel ini saya mencoba sharing pentingnya white space dalam mendesain.

White space adalah ruang kosong tanpa adanya tanda dalam desain.

White space bisa berada diantara baris pada paragraf, antar paragraf, antara garis, antara gambar atau antara elemen UI yang berbeda lainnya.

Lalu, mengapa white space itu penting?

1. Memudahkan user membaca dan memahami informasi yang ditampilkan dengan cepat

Kiri: White space diimplementasi dengan baik. Kanan: Tidak ada white space.

Di dalam visual design dalam membuat sebuah copy ada acuan yaitu Readability dan Legibility. Anda harus mengoptimalisasi tulisan Anda untuk memenuhi standar Readability dan Legibility. Readability yaitu seberapa mudah tulisan Anda dibaca dan Legibility seberapa baik Anda membedakan karakter dan kata dalam bacaan Anda.

Berdasarkan contoh gambar diatas, halaman detail artikel dengan mengimplementasikan white space lebih mudah dibaca per kata dan per paragraf.

2. White space dapat memisahkan komponen yang berhubungan tanpa garis pemisah

Ketika membicarakan hubungan antar komponen dalam desain, Gestalt Principle menetapkan Law of Proximity yaitu mata akan menangkap objek yang berdekatan sebagai objek yang berhubungan.

Gestalt Principle — Law of Proximity

Dalam konteks desain, elemen-elemen yang berdekatan merupakan satu komponen. Sebagai contoh, halaman list Artikel dibawah ini, card artikel merupakan komponen yang terdiri dari gambar, judul, tagar, dan tanggal artikel dibuat. Sementara, Komponen list artikel terdiri dari lebih dari satu card artikel. White space berperan memisahkan antar komponen tersebut, agar lebih mudah dilihat dan dipahami pengguna.

Kiri: Antar komponen mudah dibedakan. Kanan: Antar komponen sulit dibedakan.

3. Struktur informasi menjadi lebih rapih

Berkaitan dengan poin nomor 2, halaman yang mengimplementasikan white space terlihat struktur informasi nya lebih rapih dan mudah dibedakan. Dilihat dari atas, ada Navigation bar, kemudian Tab, kemudian list artikel, dan yang paling bawah yaitu CTA (Call to Action) untuk menampilkan artikel lebih banyak lagi. Sementara, halaman yang tidak mengimplementasikan white space terlihat sulit dibedakan antar informasi nya.

4. Elemen penting langsung dapat terlihat

White space dapat digunakan untuk menarik perhatian pengguna. Berikan white space yang besar dan letakkan elemen yang ingin Anda tonjolkan ditengah. Seperti contoh halaman awal Google berikut, Google ingin menonjolkan fungsi dari search bar nya, oleh karenanya logo dan search bar Google diletakkan di tengah halaman dengan white space yang luas agar mata dari pengguna langsung tertuju pada elemen search bar tersebut.

Landing Page Google.com

Sebagai desainer, penggunaan white space perlu diperhatikan. Gunakan white space secara tidak berlebihan, dengan memperhatikan faktor konten, brand, desain, dan pengguna.

Jadi intinya, dalam mendesain kita perlu memperhatikan hal-hal sederhana seperti white space ini. Penggunaan white space yang semestinya dapat memberikan banyak manfaat untuk suatu konten, brand, desain dan juga pengguna. Sama seperti hidup, jika dianalogikan white space adalah ruang untuk istirahat sejenak dari aktivitas sehari-hari agar kita dapat menikmati hidup seutuhnya.

Semoga informasi ini berguna dan bermanfaat. Terima kasih!

--

--