Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Space (ruang) memiliki peran penting di web design. Space layaknya “arena” bagi designer untuk menempatkan dan mengatur elemen-elemen design, seperti teks, image, tekstur, button, link. Ada space yang diisi dengan elemen design, namun ada juga space yang dibiarkan kosong yang disebut negative space/whitespace

Pada artikel ini saya akan membahas seputar negative space, implementasi serta bagaimana memanfaatkannya untuk mendapatkan hasil design yang diharapkan. Design yang seimbang (balanced) adalah kombinasi yang pas antara elemen-elemen design dengan negative space/whitespace. Keberhasilan membuat kombinasi yang pas antara elemen – elemen design dan negative space akan menghasilkan design yang efisien, efektif namun tetap menarik.

 

Illustration by Intraktive

 

Apa itu Negative Space

Negative space adalah ruang kosong yang ada di sekitar elemen design. Sebaliknya positive space adalah space yang diisi oleh elemen – elemen design. Namun pengertian negative space tidak selalu space kosong dengan background putih, tapi bisa dengan background warna apa saja.

 

Macro Negative Space

Space yang berada di antara elemen – elemen design yang besar, sebagai contoh space antara header, sidebar, footer, main content.

 

Micro Negative Space

Space yang berada di antara elemen – elemen design ukuran kecil, sebagai contoh space :

  • di antara baris-baris kalimat pada body text
  • di antara paragraf pada body text
  • di sekeliling image/foto pada web
  • di sekeliling icon/ logo pada web

 

Dribbble

 

Stellarworks

 

Arti Penting Negative Space di Web Design

Tentu kita semua pernah ke pasar tradisional untuk sekedar melihat-lihat atau berbelanja, lantas bagaimana suasananya? Suasananya crowded, riuh, saling bersenggolan hal yang biasa, becek, untuk mendapatkani sesuatu yang kita cari membutuhkan waktu lama baik disebabkan oleh sesaknya pengunjung maupun karena lokasi yang tidak tertata rapi. Begitu telah menemukan apa yang kita cari kemudian membelinya maka kita akan segera keluar dari pasar ini tanpa ingin berlama-lama lagi. Mengapa? karena memang tidak ada yang bisa membuat kita betah berlama-lama disitu.

Bagaimana dengan mall, supermarket atau pasar modern? tentu jauh beda. Cukup dengan beberapa kata kita bisa menggambarkan suasana yang kita rasakan di mall, supermarket atau pasar modern : nyaman, mudah dan bisa membuat betah.

 

Analogi di Web

Suasana di pasar tradisional tersebut bisa kita jadikan sebagai pendekatan atas apa yang dirasakan pengunjung saat mengunjungi sebuah web. Perasaan crowded, riuh, saling bersenggolan juga bisa dirasakan pengunjung web. Perasaan tersebut tidak lepas dari kebiasaan meletakkan semua content seperti teks, image ke dalam layout tanpa pertimbangan penting atau tidak bagi pengunjung, relevan atau tidak bagi pengunjung. Kebiasaan ini menghasilkan website yang crowded, penuh, terkesan bagian content saling bersaing satu sama lain.

Kebiasaan meletakkan semua content di halaman web tanpa pertimbangan penting atau tidak bagi pengunjung berarti meninggalkan sedikit negative space yang merupakan elemen penting dari web design itu sendiri. Tanpa kehadiran negative space yang layak berarti kurangnya breathe space (ruang bernafas) bagi pengunjung saat "berselancar" di website. Pengunjung akan merasa lelah saat berselancar, karena setiap proses scanning pada saat "berselancar" website content maka mata akan mengidentifikasi content tersebut. Semakin banyak content yang kita sajikan berarti semakin sering proses identifikasi tersebut dan semakin pendek waktu jeda di antaranya.

 

Menerapkan Negative Space di Web Design

Ada contoh yang bisa kita lihat untuk penerapan negative space pada website yang kita bagi menjadi 2 contoh, macro negative space dan micro negative space.

 

Macro Negative Space

Gambar 1

Pada Gambar 1 kita ambil screen shot dari home page Apple. Apple terkenal dengan produk yang simple designnya namun fungsional. Tidak terkecuali website yang mereka miliki pun demikian.

Pada screen shot di atas kita bisa lihat negative space yang ada di layout home page mereka. Ada dua negative space di kanan dan kiri image Apple Watch, apabila kita hitung negative spacenya lebih luas daripada positive spacenya (image Apple Watch dan tulisan WATCH). Bergeser sedikit ke bawah tepat di bawah image Apple Watch ada 4 menu, di masing-masing menu inipun ada negative space di kiri-kanan imagenya dengan latar belakang warna abu-abu. Sekali lagi ukuran negative space pada menu ini lebih luas daripada positive space. Keberadaan negative space pada halaman website ini menjadikan produk dan menu yang ditampilkan menjadi lebih mudah terlihat. Tujuan agar produk lebih terexpose dan menu lebih mudah terlihat oleh pengunjung berhasil dicapai.

 

Micro Negative Space

Gambar 2

Pada Gambar 2 di atas adalah screen shot dari smashingmagazine. Terdapat 2 image yang dijadikan satu yakni image kiri (Before) dan image kanan (After). Image kiri (Before) sebelum diterapkan negative space pada kolom kiri dan body text.

Bisa dilihat di image kiri (Before), pada kolom kirinya terdapat link-link yang diawali dengan title kategori (MOBILE, GRAPHICS, UX DESIGN, WORDPRESS). Masing-masing kategori tidak terpisah secara tegas hanya ditandai oleh title kategori saja dengan huruf tebal (bold). Bagaimana bila kita berikan sedikit negative space di antara mereka untuk memberi pemisahan yang lebih tegas. Untuk hasilnya bisa dilihat di image kanan (After), masing-masing kategori terpisah secara lebih tegas dengan jarak antara satu kategori dengan kategori lain lebih jauh sehingga fokus lebih kuat pada masing-masing title kategori.

Selanjutnya lihat pada body text di image kiri (Before). Kita bisa merasakan jarak antara baris kalimat (line space) begitu sempit sehingga terasa penuh sesak. Untuk itu kita akan menambah line space pada baris kalimat tersebut. Hasilnya bisa dilihat di image kanan (After), body text terasa lebih lega dengan jarak antar baris kalimat lebih jauh. Dengan demikian memperbaiki readability dari content text web tersebut.

 

Tujuan yang Hendak Dicapai

Negative space adalah kaidah, prinsip design yang bisa membantu kita mencapai tujuan design yang hendak kita capai. Dalam mendesain web tentu yang menjadi target adalah pengguna (user-oriented design) maka tujuan yang hendak dicapai adalah pengguna bisa memanfaatkan website tersebut dengan mudah, tanpa menyita waktu dalam pemanfaatannya namun tetap menarik secara visual.

Secara kongkrit prinsip negative space ini sebagai guideline bagi web designer untuk membangun website dengan content yang lebih terorganisir, content dengan perbedaan jelas satu sama lain, website dengan elemen – elemen design yang lebih mudah dikenali. Pendek kata website yang mampu memenuhi prinsip - prinsip user experience yang baik.