Visual Dividers in User Interfaces: Types and Design Tips
- by Billy Gani
- April 03,2020
- 25 views
Performa desain konten yang dirancang secara matang dalam tampilan antarmuka website atau aplikasi anda memiliki nilai yang besar dalam mengaplikasikan utilitas dan fungsi dari produk anda . Hari ini kami akan membahas lebih dalam tentang pembagi visual (visual dividers) dan tata letak setiap elemen di dalamnya yang dapat membantu anda untuk menyusun konten dalam layar dan memisahkan setiap bagiannya.
Apa Itu Pembagi Visual (Visual Divider)?
Pembagi visual (visual divider) merupakan tata letak elemen yang membantu anda untuk memisahkan setiap bagian konten ke dalam kelompok, bagian, dan opsi yang jelas. Hal ini dapat membantu desainer dalam menyusun halaman sesuai dengan pola dari persepsi visual dan membuat tampilan dan tata letaknya lebih jelas dan mudah diresapi oleh pengguna.
Bersamaan dengan elemen lainnya dalam halaman, pembagi ini memainkan peranan penting dalam hierarki visual. Contohnya, dengan adanya pembagi visual ini, pengguna dapat lebih mudah mendefinisikan hubungan dari konten, seperti jika potongan kontennya sama, serupa, atau saling berkaitan, dan sebagainya.
Pembagi visual ini juga penting bagi penggunaan website atau aplikasi anda - dalam banyak kasus, kehadirannya dapat membuat wadah visual yang terlihat dapat diklik atau ditekan, yang sangat penting untuk penggunaan antarmuka pada perangkat.
Jenis Pembagi Visual - Tampilan
Membahas tentang pembagi visual, kita dapat menganalisisnya dalam dua aspek - tampilan dan fungsinya. Mulai dari bagian visual, ada 5 metode dasar yang dapat digunakan untuk membagi konten dalam tampilan antarmuka:
-
Garis
Garis dapat menjadi salah satu metode yang paling sering digunakan dalam memisahkan konten, baik dalam bentuk fisik seperti cetakan dan juga tampilan antarmuka. Dapat dengan mudah dikenali karena perannya, garis tidak sulit untuk dipahami oleh pengguna. Di sisi lain, jenis visual ini tampak lebih sederhana dan jauh dari aslinya.
Maka dari itu, seringkali, desainer berusaha menemukan cara lain untuk memisahkan konten. Terlebih lagi, disarankan untuk menggunakan garis hanya jika konten tidak dapat dibagi secara efektif dengan cara lain. Terlalu banyak garis dapat membebani layar dengan gangguan visual dan menciptakan ketegangan visual yang tidak perlu. -
Ruang Negatif (Negative Space)
Ruang negatif atau disebut ruang putih merupakan ruang kosong baik di dalam maupun di dalam sebuah elemen antarmuka. Meskipun demikian, hal ini tidak mengartikan ruang ini tidak berguna. Sama seperti elemen lainnya, ruang negatif bekerja untuk mendukung pengalaman pengguna yang positif. Ruang negatif merupakan salah satu pembagi visual yang sering digunakan, khususnya dalam antarmuka yang dirancang secara minimalis dan sederhana.
Disertai dengan pengetahuan tentang prinsip-prinsip Gestalt tentang persepsi visual, misalnya, prinsip kedekatan dan kesamaan, ruang negatif dapat diubah menjadi pembagi visual yang efektif dan elegan yang juga memungkinkan antarmuka bernapas dan menghindari kekacauan. -
Kontras Warna
Jenis pembagi visual lain yang efektif adalah kontras warna. Pemilihan warna dan kombinasinya dalam desain UI memiliki potensi psikologis yang hebat: mereka mampu memperkuat pesan dan konten website serta menciptakan suasana hati yang baik bagi pengguna. Kontras merupakan salah satu faktor kunci yang mempengaruhi tingkat pemindaian dan hierarki visual dari halaman atau layar UI anda. Karena itulah, kontras warna dapat secara efektif memisahkan opsi, item, atau zona interaktif yang berbeda, yang artinya berfungsi baik sebagai pembagi visual.
Itulah alasan mengapa layar yang terpisah cukup populer selama beberapa tahun terakhir. Dan hal ini juga mungkin menjelaskan pendekatan dalam mengatur halaman arahan dan website yang hanya memiliki satu halaman di sepanjang blok konten yang disajikan dengan latar belakang warna yang kontras.
-
Volume & Bayangan
Volume dan bayangan, yang biasanya digunakan dengan efek elevasi visual sebagai bagian dari sebuah konten, juga dapat bekerja sebagai pembagi visual. Kehadirannya menciptakan perasaan yang dalam dan memisahkan halaman tersebut ke dalam beberapa bagian, yang terlihat alami dan harmonis untuk pengguna.
Di sisi lain, mungkin kehadirannya terlihat kurang jelas dan terlihat dibandingkan garis, sehingga pendekatan ini mungkin membantu anda untuk mencapai keseimbangan dan keterbacaan item tertentu tanpa terlalu banyak gangguan visual atau gangguan. -
Gambar
Gambar dapat menjadi pembagi visual yang lebih efektif. Penggunaannya sangat umum pada tampilan antarmuka yang memiliki banyak konten teks, seperti, blog, media online, dan halaman arahan berbasis teks. Foto, ilustrasi, grafik 3D, serta gambar animasi, dapat membantu menyeimbangkan konten teks, meningkatkan tingkat pemindaian, tingkat keterbacaan, secara efektif membagi blok visual, serta menambah daya tarik yang menyenangkan secara emosional.
Jenis Pembagi Visual - Fungsi
Jenis pembagi visual yang dapat dikategorikan dari tingkat hierarki:
-
Pembagi dengan Sub Judul
Dalam beberapa kasus, anda dapat menggabungkan pembagi dengan sub judul untuk mengidentifikasikan konten yang sudah dikelompokkan. Dalam hal ini, pembagi tersebut harus ditempatkan diatas sub judul untuk membuat koneksinya dengan konten semakin terlihat. -
Inset dividers
Pembagi inset memisahkan item-item dari konten terkait, berlabuh oleh elemen-elemen yang sejajar dengan judul aplikasi atau menyesuaikan dengan jenis konten teks tertentu pada halaman. -
Full Bleed Dividers
Full bleed dividers merupakan salah satu pembagi visual yang memisahkan dan menjangkau keseluruhan tata letak layar. -
Pembagi Tengah
Hal ini biasanya terjadi jika pembagi tersebut ditempatkan di tengah antarmuka, seperti untuk memisahkan konten yang serupa seperti harga dan struk pembelian.
Memilih jenis pembagi visual untuk tampilan yang anda rancang haruslah mempertimbangkan kedua faktor ini:
Kehalusan - Pembagi tersebut tidaklah mencari-cari perhatian atau mengganggu pengguna dari konten yang ada di dalamnya. Tujuan utamanya adalah untuk membantu membuat tampilannya terlihat jelas, bukan untuk mencari perhatian pengguna. Karenanya, pastikan penggunaannya terlihat tetapi tidak mengganggu.
Frekuensi - Seperti yang sudah dijelaskan sebelumnya, jika anda menggunakan pembagi visual yang terlalu kentara, khususnya jika mereka menampilkan elemen tambahan di dalamnya seperti garis, hal tersebut dapat membuat gangguan visual dan membuat antarmuka tersebut melelahkan bagi pengguna. Maka dari itu, berpikirlah secara matang terlebih dahulu sebelum memutuskan.
Gunakan ruang negatif jika memungkinkan, tidak memainkan warna terlalu banyak dan berfokus pada keharmonisan dan konsistensi dari UI itu sendiri.
Jika sudah memahami lebih dalam tentang penggunaan pembagi visual diatas, kini saatnya anda untuk memeriksa apakah website atau aplikasi anda sudah menerapkannya. Anda baru ingin membuat website atau aplikasi yang menerapkan poin-poin diatas? Anda bingung mencari agency yang tepat untuk memenuhi kebutuhan anda dalam bidang UI UX di Jakarta? Jangan khawatir.
Ketika mencari bantuan profesional, Eannovate sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik dapat membantu anda dalam bidang UI UX Design di Jakarta. Atau sebenarnya anda hanya memerlukan aplikasi perangkat dan website sederhana yang berkualitas dengan harga yang terjangkau?
ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta untuk website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk membantu anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta untuk website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk membantu anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru dan terkini? Anda dapat mengunjungi blog kami, Alterspace.
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta, jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
Email : hello@eannovate.com atau menggunakan contact form.
Reference: Tubik Studio
