Design Informasi

Negative Space dalam Desain Web

Negative Space dalam Desain Web – Karena layarnya terbatas, desain web juga dibatasi. Dapat dikatakan bahwa di kotak kecil layar, setiap piksel adalah bagian dari real estat.

Negative Space dalam Desain Web

webdesignpractices – Bahkan seorang pemula, saya tahu bahwa halaman tidak dapat dimuat dengan terlalu banyak konten, tetapi melibatkan banyak ruang kosong, termasuk desainer berpengalaman.

Biarkan kosong, yang lainnya adalah “ruang negatif”, dan kedua kata tersebut sering digunakan secara bergantian. Semuanya mengacu pada hubungan antara elemen yang muncul di layar. Ruang putih yang disebut belum tentu putih atau hitam.

Bahkan sebuah pola, warna, atau latar belakang bertekstur bisa disebut ruang putih. Ruang negatif adalah menciptakan lingkungan kosong di luar konten sehingga penonton dapat lebih fokus pada konten.

Alasan kosong

Seperti yang telah dibicarakan oleh semua orang, ruang negatif pada awalnya merupakan bagian integral dari estetika.

Di mana meninggalkan ruang kosong bahkan lebih penting dalam desain web. Dapat dikatakan bahwa tidak hanya dalam kebutuhan akan estetika visual, tetapi juga memiliki peran yang lebih penting, yaitu mencapai keseimbangan yang sempurna antara estetika visual dan memandu pengguna. Selain itu, jika ada paragraf teks sekarang, bagian kosong juga perlu membuat teks jelas atas dasar ini dan menciptakan lingkungan yang mudah dibaca.

Baca juga : Belajar Php Untuk Pemula

1. Eyeball scan

Dikutip dari uxdesign, Dalam halaman web, spasi di antara dua elemen konten yang lebih besar (selanjutnya disebut sebagai spasi yang besar). Jenis ruang kosong ini dapat menarik dan memandu mata pengguna untuk memindai halaman. Jika digunakan dengan benar, ini dapat mengarahkan perhatian pengguna ke elemen yang ingin Anda sorot. Ini paling efektif ketika identitas merek ditampilkan atau interaksi pengguna ditingkatkan.

2. Clarity

Spasi di antara dua elemen konten yang lebih kecil (selanjutnya disebut sebagai spasi kecil) seperti teks, atau sebaris teks, daftar, ikon, dll. Spasi putih yang tepat juga dapat membuat elemen ini lebih mudah diidentifikasi.

3.Visual aesthetics

Saat Anda melihat gambaran besar, ruang putih memainkan peran besar dalam estetika visual. Misalnya, jika kontennya berantakan, itu tidak akan pernah menjadi gambar yang bagus.

4.High grade

Ruang putih yang kaya akan menanamkan halaman Anda dengan suasana yang halus dan elegan.

Untuk lebih memahami dan menggunakannya, kami akan memilah berbagai jenis ruang putih (ruang besar dan kecil) dan metode yang berbeda (pasif dan aktif) untuk menggunakannya.

Ruang besar dan kecilRuang besar dan kecil

Di mana dan bagaimana ruang negatif digunakan dalam desain web akan bergantung pada peran mereka. Singkatnya, kami secara kasar membagi peran ini menjadi elemen besar dan kecil.

1. Elemen besar kosong

Pengosongan elemen besar melibatkan pengosongan antara dua elemen besar. Terutama digunakan untuk:

  • Konten keseluruhan
  • Elemen terpisah
  • Kolom teks
  • Batas
  • Lapisan
  • Jarak antar gambar

Catatan Penerjemah: Margin dan Padding di sini merujuk ke area di luar tag elemen dalam desain web. Lihat gambar di bawah untuk membantu memahami.

Jenis ruang putih ini sangat memengaruhi aliran visual pengguna. Apakah itu bimbingan potensial atau dorongan kuat, itu dapat membuat perhatian mengarah ke tempat yang Anda inginkan. Tetapi aturan yang harus ditekankan di sini adalah bahwa ### Semakin jauh jaraknya, semakin kuat motivasinya. Saya ingin merusak keseimbangan, bagaimanapun, karena terlalu banyak ruang putih melanggar prinsip Gestalt, akibatnya adalah melemahkan hubungan antar objek.

Mari kita lihat situs web berikut sebagai contoh untuk menggambarkan bagaimana ruang putih dapat mendorong interaksi pengguna.

Sebagian besar pengguna pertama kali melihat judul halaman, yang merupakan frasa “Seni & Eksperimen digital”, dan area putih yang luas di sekitarnya, sehingga perhatian pengguna sepenuhnya terfokus padanya.

Meskipun bagian atas dan bawah halaman dibiarkan kosong di satu sisi, keduanya sama-sama terlihat. Secara keseluruhan, di sini, area kosong memainkan peran yang baik dalam menarik perhatian, dan desainnya tampak sangat sederhana.

Sang desainer sebenarnya menggunakan area kosong sebagai tirai kosong untuk mengejutkan penonton sehingga kita bisa melihat kekayaan detail karyanya. Setelah mouse dipindahkan ke salah satu kolom navigasi di bagian bawah, gambar pekerjaan akan muncul di layar sebagai tampilan latar belakang layar penuh. Efek ini menciptakan kegembiraan dalam penemuan dan penemuan yang serupa dengan usia muda: secara tidak sengaja mendobrak tempat kosong, dan menemukan bahwa setiap laci menyembunyikan pesta visual yang penuh warna.

Anda dapat mencoba efek dramatis yang terjadi di layar saat Anda mengarahkan mouse.

Dengan menyisakan area kosong sebagai alat untuk menarik perhatian pengguna ke karyanya, desainer telah menciptakan pengalaman yang segar dan aneh. Setelah karya pertama muncul, kami ingin melihat karya lain apa yang ia punya. Ini terasa sangat menarik, karena Anda akan tergoda untuk mencari konten terpenting. Tapi itu semua tergantung pada titik masuk sempurna yang memicu rasa ingin tahu Anda.

2. Elemen kecil kosong

Di sisi lain, ketika desainer berbicara tentang elemen kecil kosong, mereka biasanya mengacu pada elemen yang lebih kecil atau elemen sekunder dari elemen yang lebih besar. Mereka termasuk:

  • Font
  • Spasi baris
  • gugus kalimat
  • Daftar
  • Tombol
  • ikon

Elemen kecil white space banyak digunakan untuk menekankan kejelasan website secara keseluruhan, terutama dalam hal tipografi. Saat Anda mencoba menggunakan ruang putih di antara teks untuk merusak keseimbangan, buat teks tetap jelas dan mudah dibaca, dan jangan biarkan menyimpang dari konten penting. Saya di sini, hanya sebuah saran, menyarankan bahwa spasi baris bahasa Inggris diatur ke 1.5px adalah yang paling sempurna. (Catatan penerjemah: Penulis di sini tidak mempertimbangkan spasi baris dari font China)

Seperti yang disebutkan dalam Hukum Gestalt, mendekatkan elemen secara visual akan menyiratkan bahwa mereka memiliki fungsi yang sama. Elemen kecil ruang putih akan memberi tahu pengguna hubungan antara tombol dan tautan, dan ruang putih yang sama akan memperkuat mekanisme ini, yang selanjutnya meningkatkan kesadaran selama penggunaan pengguna.

Walaupun white space terbagi menjadi dua tipe yaitu elemen besar dan elemen kecil, masing-masing tipe juga memiliki dua kegunaan yaitu aktif dan pasif.

Pengosongan pasif dan aktif

Semua aplikasi kosong bergantung pada konten.

Seperti yang disebutkan sebelumnya, semakin banyak ruang putih, semakin menarik kontennya. Namun, Anda tidak ingin setiap elemen halaman memiliki daya tarik paling banyak, apalagi ruang layar yang terbatas.

Mari kita lihat bagaimana ruang kosong pasif dan aktif dapat membantu ruang negatif mencapai keseimbangan visual.

1. Ruang pasif

Kami melihat ruang putih pasif sebagai minimisasi kosong.

Tanpa ruang kosong yang cukup, situs web akan menjadi tidak dapat dibaca dan disorientasi, dan semua energi akan digunakan untuk mengatasi kebingungan visual. Ruang putih pasif adalah menggunakan ruang putih untuk mencoba membuat situs mudah dimengerti.

Perhatikan contoh di atas, jarak antara setiap tautan dalam navigasi, lalu lihat baris teks berikut, spasi baris, spasi kata, dll. Apakah Anda melihat sesuatu yang tidak biasa? …… Jawabannya adalah Anda tidak dapat menemukannya. Betul sekali! Jarak dan jarak ini sangat sepele sehingga tidak akan menarik perhatian Anda sama sekali. Ini disebut ruang putih pasif.

Untuk pengosongan elemen besar, ruang pasif berarti cukup ruang untuk batas dan margin untuk menekankan perbedaan antara elemen dan menghindari kebingungan. Misalnya, navigasi dan pendaftaran berada di bagian atas halaman web, tetapi dipisahkan oleh jarak tertentu.

Untuk elemen kecil, ruang pasif mencakup pembacaan maksimum karakter, teks, dan paragraf, dan independensi setiap baris teks atau setiap opsi saat daftar atau menu drop-down muncul.

Penerapan ruang pasif harus natural. Nyatanya, tujuan utama ### pengosongan pasif bahkan bisa dikatakan luput dari perhatian. Saat Anda mencoba membuat ruang pasif, Anda ingin membuatnya terlihat kurang terlihat, dan memperlakukannya seperti biasa.

Baca juga : Pengertian Tentang Linux Mint 

2. Ruang aktif

Pada halaman di atas ini, terdapat beberapa elemen pada halaman: tombol menu bar, panah drop-down, tip drop-down, dll. Namun, teks hitam dominan pada layar ada di tengah, yang memungkinkan elemen lain ditempatkan. di sekitar dan mendesain Guru memperbesar area kosong di tengah, dan kemudian menempatkan informasi paling penting di sini, sehingga perhatian pengguna sepenuhnya terfokus padanya.

Pada saat yang sama, mengurangi jarak antara dua baris elemen mungkin merupakan cara yang “tersembunyi”. Sama seperti pemberitahuan hukum dan informasi hak cipta yang sering Anda lihat di situs web. Perhatikan contoh berikut. Efek “FiberSensing adalah Merek HBM” mudah diabaikan.

Elemen besar kosong sering digunakan untuk membuat perhatian utama atau untuk menyebarkan banyak informasi penting.

Namun, terkadang ruang kosong elemen kecil juga dapat digunakan secara aktif. Beberapa desainer menggunakan ruang aktif untuk memisahkan kutipan atau paragraf penting untuk membentuk paragraf teks untuk menarik perhatian. Ini memang cara yang baik untuk menekankan poin-poin penting.

You may also like...