Cara Menggunakan Ruang Negatif untuk Membuat Situs Web yang Menakjubkan

Situs web dan aplikasi memiliki segala macam elemen visual yang harus hidup berdampingan – tombol, kolom, ikon, gambar, garis, media, dan tipografi. Semua elemen tersebut membutuhkan kanvas (halaman web kosong), dan kanvas itu membutuhkan ruang kosong, yaitu ruang negatif atau ruang putih. Mata pemirsa tidak dapat memproses apa yang dilihatnya tanpanya.

Berlangganan Saluran Youtube Kami

Apa itu Ruang Negatif?

Ruang positif adalah bagian dari karya yang diisi dengan subjek atau titik fokus lainnya. Ruang negatif mengambil sisanya. Mungkin kosong atau putih, kontras dalam warna atau desain, gambar latar belakang yang halus – apa pun itu, itu akan terasa kosong, bukannya penuh atau berantakan. Namun, hanya karena ruang negatif itu kosong, bukan berarti itu tidak penting – ia menarik perhatian ke ruang positif, dan terkadang bahkan menjadi ruang positif itu sendiri jika dilihat secara berbeda.

Contoh Ruang Negatif

Ruang negatif – dan padanannya, ruang positif – ada dalam semua jenis seni dan desain, termasuk desain web. Mari kita lihat logo FedEx. Anda melihat huruf ungu dan oranye, kan? Namun, ada panah di sana, di ruang putih:

Panah FedEx yang tersembunyi itu menggunakan ruang negatif dengan cara yang mirip dengan menggambar dan melukis – garis besar dibuat seperti halnya ruang positif dibuat. Dalam contoh seperti ini, ruang negatif tidak dibuat hanya karena di sana tidak ada ruang positif .

Merak NBC melakukan hal yang sama:

Sementara titik ruang negatif biasanya untuk menempatkan fokus pada ruang positif, terkadang menjadi fokus dalam desain yang cerdas. Berikut contoh lain – lihat bagaimana gigi serigala membentuk pohon:

Ada istilah untuk ini: pembalikan angka-tanah. Ini pada dasarnya berarti bahwa warna latar depan dan latar belakang bertukar tempat untuk mengubah perspektif dan interpretasi. Jika Anda menyukai ini, lihat karya MC Escher, terutama cetakan transformasinya.

Ruang negatif memainkan peran yang sama dalam fotografi. Lihat potret yang saya ambil dari anak sepupu saya, Julian. Latar belakang hitam menempatkan semua fokus padanya:

Anda dapat menemukan ruang negatif di alam, seperti di ruang antara kelopak bunga, dan dalam desain fungsional, seperti di ruang melalui pegangan cangkir kopi.

Kami menggunakannya di situs web kami juga. Beranda kami memiliki banyak informasi, tetapi tidak berlebihan karena cara kami memberi jarak. Dan meskipun latar belakang memiliki sedikit warna dan beberapa bentuk untuk ditambahkan ke desain, itu sama sekali tidak mengganggu – tetap memberikan tampilan kosong yang menyenangkan tanpa membosankan ( dan sesuai merek).

Jenis Ruang Negatif

Ada beberapa jenis ruang negatif. Mikro dan makro mengacu pada ukuran ruang negatif dalam suatu komposisi. Aktif dan pasif mengacu pada apa yang dilakukan area tersebut untuk pengguna.

Ruang Negatif Mikro vs. Makro

Ruang negatif mikro mengacu pada ruang kecil antar elemen – jarak antar baris teks atau area antar tautan dalam menu navigasi. Hal ini berdampak pada seberapa terbacanya konten bagi pembaca. Jika tidak ada cukup ruang antar baris atau jika teks keluar dari margin, pengguna akan kesulitan membaca dan memahaminya.

Ruang negatif makro lebih besar; itu adalah ruang di sekitar tata letak dan ruang di antara elemen desain besar. Contohnya adalah area antara blok konten. Ini adalah bagian kosong dari wadah yang menampung seluruh desain.

Situs web dengan sejumlah kecil ruang negatif makro cenderung sangat informatif. Situs web dengan ruang negatif makro dalam jumlah besar seringkali minimalis atau menampilkan kemewahan. Contoh pertama adalah ruang negatif makro kecil, dan yang kedua adalah ruang negatif makro besar:

Ruang Negatif Aktif vs. Pasif

Ruang negatif aktif menambah struktur halaman, meningkatkan aliran konten, dan memandu pengguna ke tempat yang Anda inginkan. Ruang negatif pasif meningkatkan tampilan situs web tetapi tidak menggerakkan pengguna melalui aliran tertentu. Ketika ruang tidak berada di tengah dan asimetris, biasanya ia aktif. Ketika seimbang dan simetris, biasanya pasif – gerakannya lebih sedikit, yang tidak memaksa pengguna untuk melihatnya dengan cara tertentu. Berikut ini contoh ruang negatif aktif:

Dan inilah contoh ruang negatif pasif:

Ruang Negatif dan Komposisi

Ruang negatif penting untuk komposisi karena beberapa alasan:

• Anda perlu melihat ruang dalam komposisi agar tetap proporsional.
• Ini juga memungkinkan Anda untuk bermain dengan hubungan antara objek yang berbeda dalam sebuah desain.
• Dalam desain web, itu dapat memainkan peran penting untuk menjaga orang-orang di halaman Anda.
• Jumlah ruang di sekitar elemen menentukan seberapa banyak fokus pada elemen – lebih banyak ruang berarti lebih banyak fokus.

Memilih Keseimbangan Ruang Negatif dan Positif yang Tepat

Seberapa banyak ruang negatif dan positif yang Anda gunakan akan bergantung pada tampilan yang Anda tuju dan apa yang ingin Anda tunjukkan pada pemirsa.

• Jika Anda menginginkan desain yang estetis, Anda mungkin akan menggunakan ruang negatif dan positif dengan bagian yang sama.
• Untuk desain yang sengaja terlihat kaku dan minimalis, Anda akan menggunakan lebih banyak ruang negatif.
• Untuk terlihat kuat dan langsung terlihat, Anda dapat memilih ruang yang lebih positif.

Desainer harus bermain dengan spasi sampai mereka mencapai keseimbangan yang tepat untuk merek dan tujuan yang dimaksudkan situs web.

Membersihkan Situs Web yang Banyak Teks dengan Ruang Negatif

Saat Anda harus memeras banyak informasi ke dalam satu halaman, mencari tahu di mana menempatkan ruang negatif menjadi rumit – terutama jika informasi itu banyak teks, yang dapat terlihat cepat berantakan. HostingDude adalah contoh bagus dari terlalu banyak ruang positif:

The New York Times, di sisi lain, telah menemukan cara mengemas beranda mereka dengan berita mereka tanpa membuat mata Anda gila, dan itu semua berkat spasi (dan pilihan warna). Meskipun tidak ada banyak ruang untuk ruang makro, mereka telah memanfaatkan ruang mikro:

Meskipun elemen-elemen di HostingDude lebih dekat satu sama lain, elemen-elemen di situs web New York Times terlihat lebih menyatu berkat ruang ekstra di antara mereka. Mata memiliki waktu yang lebih mudah untuk memahami halaman, yang memberikannya desain yang lebih lengkap dan kohesif. Ketika mata memiliki kesempatan untuk beristirahat, ia lebih mampu menerima apa yang dilihatnya. Ruang negatif percaya bahwa lebih sedikit itu lebih.

Memecah Teks dengan Spasi Negatif

Anda telah melihat bagaimana desainer dapat membuat halaman beranda yang estetis dan penuh teks, tetapi bagaimana dengan blok teks yang lebih panjang itu sendiri? Menggabungkan paragraf pendek dengan yang panjang, tajuk tebal, membuat daftar dan menambahkan media di seluruh artikel semua membantu membangun ruang negatif di sekitar kata, membuatnya lebih menarik bagi pembaca. Penampilan penting, bahkan dengan salinan, dan desainer hebat mempertimbangkannya.

Menjelaskan Titik Ruang Negatif kepada Klien

Desainer situs web dapat berbenturan dengan klien tentang ruang negatif. Klien melihat lebih banyak ruang untuk memeras informasi penting yang menghasilkan uang. Mereka merasa bahwa ruang kosong adalah ruang yang terbuang. Desainer, di sisi lain, melihat jeda visual yang dibutuhkan mata untuk benar-benar menyerap informasi yang sudah ada. Mereka tahu bahwa semua ruang di situs web itu penting, bahkan ruang yang bebas konten.

Di sinilah alat mockup dan prototyping berguna. Tunjukkan kepada klien dua versi situs web mereka, satu dengan jumlah ruang negatif yang menyenangkan dan satu lagi yang kelebihan ruang positif. Minta mereka melihat situs web secara berdampingan dan minta mereka untuk bermain-main dengan mereka. Dugaan saya adalah mereka akan dengan mudah menavigasi situs web yang dirancang dengan baik dan merasa tersesat di situs yang dirancang dengan buruk.

Membungkus

Situs web memiliki banyak elemen berbeda, dan jika Anda ingin elemen tersebut hidup selaras dan menarik pemirsa, Anda memerlukan ruang kosong di sekitarnya. Jumlah ruang kosong yang Anda gunakan dan cara kerjanya bergantung pada (a) pencitraan merek Anda dan (b) tindakan apa yang Anda inginkan agar dilakukan pengguna. Anda juga bisa berkreasi dengan ruang putih, seperti membalikkan warna atau menggambar dengan ruang negatif untuk mendefinisikannya dengan cara yang menarik atau memukau.

Pendekatan apa pun yang Anda ambil, ruang putih harus terasa seimbang – itu tidak selalu berarti simetris. Sebaliknya, itu berarti elemen ada di halaman tanpa bersaing satu sama lain dan sambil menarik jenis perhatian yang Anda inginkan. Bagi pemirsa, keseimbangan berarti dapat melihat situs web tanpa bingung atau kewalahan.

Bereksperimenlah dengan ruang putih di situs web Anda. Tambahkan beberapa, keluarkan beberapa. Kurangi makro dan tambah mikro, atau sebaliknya. Uji seberapa banyak atau lebih sedikit ruang kosong di sekitar elemen tertentu mendorong pengguna untuk mengambil tindakan. Keindahan ruang putih adalah teknik artistiknya, yang berarti tidak ada aturan keras dan cepat.

Merancang situs web perjalanan? Anda mungkin akan menggunakan banyak ruang makro. Lihat kumpulan Tema Anak Divi untuk Situs Web Perjalanan.

Gambar Unggulan melalui StockVector / Shutterstock.com