Proximity dalam Desain Grafis: Pengertian dan Contoh
Proximity dalam desain grafis adalah prinsip yang mengatur jarak antarelemen agar pembaca bisa menangkap hubungan di antara elemen tersebut. Dalam teori Gestalt, elemen yang berdekatan cenderung dipersepsikan sebagai satu kelompok, sedangkan elemen yang lebih berjauhan cenderung dianggap terpisah.
Apa Itu Proximity dalam Desain Grafis?
Sederhananya, proximity berarti menggunakan jarak untuk menunjukkan elemen mana yang saling berhubungan.
Bayangkan kamu membuat poster acara. Ada judul acara, tanggal, lokasi, harga tiket, foto, dan informasi kontak. Kalau semua elemen memiliki jarak yang sama, pembaca mungkin kesulitan mengetahui informasi mana yang termasuk dalam satu kelompok.
Sebaliknya, ketika judul dibuat dekat dengan subjudul, tanggal didekatkan dengan lokasi, lalu informasi kontak diberi jarak lebih besar dari kelompok sebelumnya, hubungan informasinya menjadi lebih mudah dipahami.
Prinsip ini berasal dari cara manusia mengorganisasi informasi visual. OpenStax menjelaskan proximity sebagai salah satu prinsip Gestalt yang membuat hal-hal yang berdekatan cenderung dipersepsikan sebagai kelompok.
Jadi, proximity bukan sekadar membuat desain terlihat rapi. Jarak memiliki fungsi komunikasi. Tanpa perlu garis pembatas atau kotak tambahan, kamu bisa memberi petunjuk kepada pembaca bahwa beberapa elemen masih berada dalam satu kelompok.
Hubungan Proximity dengan Whitespace
Whitespace atau ruang kosong menjadi salah satu alat utama untuk mengatur proximity. Jarak kecil di dalam sebuah kelompok membuat hubungan elemen terasa lebih dekat, sedangkan ruang yang lebih besar dapat membantu memisahkan satu kelompok dari kelompok lainnya.
Karena itu, jangan menganggap ruang kosong sebagai area yang harus selalu diisi. Justru ruang kosong dapat membantu menjelaskan struktur desain.
Kalau kamu masih ingin memperkuat pemahaman prinsip dasarnya, kamu bisa mulai dari Dasar-dasar Desain Grafis agar hubungan proximity dengan prinsip desain lain lebih mudah dipahami.
Fungsi Proximity dalam Desain Grafis
Fungsi utama proximity adalah membantu pembaca memahami hubungan antarelemen tanpa harus membaca semuanya satu per satu.
Misalnya, pada sebuah kartu produk terdapat foto produk, nama produk, harga, deskripsi singkat, dan tombol pembelian. Menempatkan nama, harga, dan deskripsi dalam jarak yang berdekatan memberi sinyal bahwa ketiganya berkaitan dengan produk yang sama.
Ada beberapa fungsi penting proximity dalam desain.
Pertama, mengelompokkan informasi.
Informasi yang berkaitan bisa dikelompokkan secara visual. Hal ini membuat desain terasa lebih terstruktur dan memudahkan pembaca menemukan bagian yang dicari.
Kedua, membantu hierarki visual.
Jarak dapat menunjukkan tingkatan hubungan. Elemen yang berdekatan terasa sebagai satu unit, sedangkan kelompok yang dipisahkan whitespace terlihat sebagai bagian yang berbeda.
Ketiga, meningkatkan keterbacaan.
Paragraph, judul, caption, label, dan elemen pendukung akan lebih mudah dipahami ketika hubungan spasialnya jelas. Dalam interface, proximity juga membantu pengguna mengenali elemen mana yang saling berkaitan.
Keempat, mengurangi kebutuhan akan elemen pemisah tambahan.
Tidak semua kelompok informasi membutuhkan garis atau kotak. Pengaturan jarak yang tepat terkadang sudah cukup untuk membuat batas visual.
Contoh sederhananya bisa kamu lihat pada desain feed media sosial. Judul, subjudul, dan detail utama bisa dibuat berdekatan, sedangkan informasi tambahan diberi ruang yang lebih longgar. Hasilnya, pembaca dapat memindai konten dengan lebih cepat.
Contoh Proximity dalam Desain Grafis
1. Poster acara
Pada poster, nama acara biasanya ditempatkan dekat dengan tanggal dan lokasi. Informasi sponsor atau kontak bisa ditempatkan lebih jauh sehingga tidak dianggap sebagai bagian dari informasi utama.
Jika semua elemen memiliki jarak identik, poster akan terasa seperti kumpulan teks dan gambar yang tidak memiliki struktur.
2. Desain media sosial
Dalam desain Instagram atau media sosial lainnya, proximity bisa digunakan untuk membentuk blok informasi.
Misalnya, judul promosi, harga, dan periode promo diletakkan dalam satu area. Call to action diberi jarak yang cukup sehingga tetap terlihat sebagai elemen penting tetapi tidak bercampur dengan detail promosi.
3. Presentasi
Slide presentasi juga sangat bergantung pada proximity. Judul slide harus memiliki hubungan visual dengan isi yang dijelaskannya.
Begitu pula antara gambar dan caption. Jika caption terlalu jauh dari gambar, pembaca harus menebak gambar mana yang sedang dijelaskan.
4. Website dan UI
Dalam website atau interface, proximity membantu pengguna mengenali hubungan antara label, field, tombol, menu, dan informasi pendukung. Nielsen Norman Group juga menekankan bahwa kedekatan elemen membantu pengguna memahami elemen mana yang dianggap satu kelompok.
Contohnya, label “Email” sebaiknya berada cukup dekat dengan kolom input email. Tombol yang berhubungan dengan sebuah form juga sebaiknya tidak terlihat seperti bagian dari kelompok lain.
Hal yang perlu diperhatikan adalah responsivitas. Layout yang terlihat baik di desktop belum tentu mempertahankan hubungan proximity yang sama di layar kecil. Ketika kolom ditumpuk atau elemen berpindah posisi, kelompok visual dapat berubah.
Proximity dan Prinsip Desain Lain
Proximity jarang bekerja sendirian. Desain yang efektif biasanya menggabungkannya dengan beberapa prinsip lain agar struktur visual menjadi lebih jelas.
Proximity dan Contrast
Contrast membantu membedakan elemen berdasarkan karakter visual, sedangkan proximity membantu menjelaskan hubungan berdasarkan jarak.
Misalnya, sebuah judul bisa dibuat lebih besar atau lebih tebal untuk menunjukkan tingkat kepentingannya. Namun judul tersebut tetap perlu memiliki jarak yang tepat dengan isi yang dijelaskannya.
Keduanya memiliki fungsi yang berbeda tetapi saling mendukung. Untuk pembahasan lebih khusus mengenai perbedaan visual antar elemen, kamu bisa membaca kontras dalam desain grafis.
Proximity dan Alignment
Alignment mengatur bagaimana elemen disejajarkan, sedangkan proximity mengatur hubungan berdasarkan jarak.
Bayangkan beberapa label dengan posisi rata kiri. Alignment sudah membuat tampilannya rapi, tetapi proximity menentukan apakah label tersebut masih terasa sebagai bagian dari satu kelompok atau justru milik kelompok yang berbeda.
Karena itu, desain yang rapi belum tentu memiliki grouping yang jelas. Kamu perlu memperhatikan kedua prinsip tersebut secara bersamaan.
Proximity, Similarity, dan Whitespace
Similarity membuat elemen yang memiliki karakter serupa lebih mudah dipersepsikan sebagai satu kelompok. Sementara itu, proximity menggunakan kedekatan untuk memberi sinyal hubungan. Gestalt mengenal kedua prinsip tersebut sebagai cara manusia mengorganisasi informasi visual.
Whitespace kemudian menjadi alat yang membantu memperkuat atau memisahkan hubungan tersebut. Ketika beberapa elemen terlalu dekat, semua hal bisa terasa seperti satu kelompok. Sebaliknya, jarak yang terlalu besar bisa membuat hubungan yang sebenarnya penting menjadi tidak terlihat.
Artinya, tujuan proximity bukan membuat semua objek berdekatan, tetapi memberikan jarak yang memiliki makna.
Cara Menerapkan Proximity dalam Desain Grafis
Kamu bisa menerapkan proximity dengan proses sederhana. Tidak perlu langsung mengubah seluruh desain.
1. Tentukan kelompok informasi
Sebelum mengatur jarak, tentukan elemen mana yang memang saling berkaitan.
Pada poster, misalnya, kelompok pertama bisa berupa judul dan subjudul. Kelompok kedua berisi tanggal, waktu, dan lokasi. Kelompok ketiga berisi informasi kontak.
Tanpa pengelompokan yang jelas, kamu akan kesulitan menentukan spacing.
2. Dekatkan elemen yang berhubungan
Setelah kelompok ditentukan, atur elemen di dalam kelompok agar lebih berdekatan daripada jarak antarkelompok.
Prinsip sederhananya adalah:
jarak dalam kelompok < jarak antar kelompok
Tidak harus menggunakan ukuran tertentu. Yang penting, perbedaan jaraknya cukup terasa sehingga pembaca bisa menangkap struktur visual.
3. Gunakan whitespace sebagai pemisah
Jangan selalu menggunakan garis, kotak, atau warna background untuk memisahkan informasi.
Coba terlebih dahulu menggunakan whitespace. Jika dua kelompok informasi memiliki ruang kosong yang cukup di antara keduanya, pembaca biasanya dapat menangkap bahwa keduanya merupakan bagian yang berbeda.
4. Periksa hubungan teks dan elemen visual
Pastikan caption berada dekat dengan gambar yang dijelaskannya. Pastikan label dekat dengan field yang terkait. Pastikan judul tidak terlalu jauh dari konten yang menjadi penjelasnya.
Tes sederhananya: lihat desain selama beberapa detik. Apakah kamu langsung tahu elemen mana yang berhubungan?
Kalau harus berpikir terlalu lama, proximity mungkin perlu diperbaiki.
5. Cek tampilan di ukuran layar berbeda
Untuk desain digital, jangan hanya mengecek versi desktop. Saat layout berubah menjadi beberapa baris atau kolom, hubungan antar elemen juga bisa berubah.
Nielsen Norman Group menunjukkan bahwa perubahan responsive layout dapat menjauhkan elemen yang sebelumnya berada dalam satu kelompok visual.
Untuk memahami bagaimana pengaturan keseluruhan struktur halaman bekerja bersama spacing dan grouping, kamu juga bisa melihat prinsip layout desain grafis.
6. Lakukan squint test
Coba sedikit menyipitkan mata atau melihat desain dari jarak yang lebih jauh.
Tujuannya bukan menguji ketajaman mata, tetapi melihat apakah kelompok besar masih mudah dikenali. Jika semua elemen terlihat menyatu sebagai satu massa, kemungkinan jarak antarkelompok belum cukup jelas.
Kesalahan yang Sering Terjadi Saat Menggunakan Proximity
Memahami proximity tidak otomatis membuat spacing menjadi benar. Ada beberapa kesalahan yang cukup sering terjadi.
Semua elemen dibuat terlalu rapat
Kesalahan pertama adalah menganggap desain yang padat berarti lebih efisien.
Padahal, jika terlalu banyak elemen didekatkan, batas antarkelompok menjadi kabur. Interaction Design Foundation juga mengingatkan bahwa terlalu banyak elemen yang dikelompokkan terlalu dekat dapat menghasilkan layout yang ramai dan sulit dipahami.
Semua jarak dibuat sama
Spacing yang seragam memang terlihat aman, tetapi tidak selalu membantu komunikasi.
Jika jarak antara judul dan isi sama persis dengan jarak antara dua kelompok informasi berbeda, pembaca tidak mendapatkan petunjuk visual yang cukup mengenai struktur konten.
Jarak antar kelompok terlalu kecil
Ini kebalikan dari masalah pertama. Elemen di dalam satu kelompok memang sudah berdekatan, tetapi kelompok yang berbeda juga ditempelkan terlalu dekat.
Akibatnya, dua informasi yang seharusnya terpisah terlihat seperti satu kesatuan.
Menggunakan proximity tanpa mempertimbangkan prinsip lain
Proximity bukan solusi untuk semua masalah desain. Kalau hierarki tipografi buruk, alignment berantakan, atau contrast terlalu rendah, pengaturan jarak saja tidak akan menyelesaikan semuanya.
Prinsip desain sebaiknya dipakai secara bersama-sama sesuai kebutuhan komunikasi visual.
Lupa mengecek versi mobile
Kesalahan ini cukup umum pada desain digital. Layout desktop yang terlihat jelas dapat berubah ketika elemen ditumpuk pada layar kecil.
Karena proximity bergantung pada hubungan spasial, perubahan posisi elemen dapat mengubah cara pengguna membaca kelompok informasi.
Pada akhirnya, proximity adalah soal membuat jarak bekerja sebagai bahasa visual. Ketika elemen yang berhubungan ditempatkan lebih dekat dan kelompok yang berbeda diberi ruang yang cukup, desain menjadi lebih mudah dipindai dan dipahami. Prinsip Proximity dalam Desain Grafis akan terasa paling berguna ketika kamu tidak sekadar mengatur agar desain terlihat rapi, tetapi menggunakan setiap jarak untuk menjelaskan hubungan informasi.
Post a Comment