Image

QUICK CONTACT













Image

Mengenal Tentang Beberapa Jenis Kontras Dalam Desain Tampilan Antarmuka (UI Design)

30 Aug 2021 by Billy Gani
Tentunya sangat mustahil untuk mendefinisikan terang, ketika tidak ada gelap. Tentunya akan menjadi sulit untuk merasakan nikmat dinginnya air ketika tidak ada panas. Tidak akan ada suara yang nyaman didengar ketika tidak ada keheningan. Setiap hal di dunia ada dan dipersepsikan dengan kontras akan hal lain. Jadi, tidaklah asing hal ini menjadi salah satu pondasi dari seni dan desain. Hal inilah yang akan kita bahas dalam artikel.
 
Apa Yang Dimaksud Dengan Kontras?
 
Secara umum, kata ’kontras’ digunakan untuk menggambarkan objek yang berbeda satu sama lain secara mencolok. Dan berbicara tentang persepsi visual, kontras pada dasarnya terkait dengan perbedaan warna atau cahaya yang memungkinkan suatu objek dapat dibedakan dengan jelas.
 
Mengapa kontras penting? Karena mata manusia secara alami cenderung menangkap kontras. Kontras tertinggi yang dilihat dari sebuah gambar disebut rasio kontras atau rentang dinamis. Terlebih lagi, bagi orang yang memiliki gangguan penglihatan, kontras menjadi karakteristik inti dari objek yang mereka lihat dan memungkinkan mereka untuk dapat lebih mudah dalam membedakannya.
 
Dalam dunia seni, kontras berkaitan dengan pengaturan elemen dan efek yang berlawanan seperti warna terang dan gelap, bentuk besar dan kecil, tekstur kasar atau halus. Kontras dalam hal ini dapat digunakan tidak hanya untuk menarik perhatian tetapi juga untuk mengatur mood dan suasana, menciptakan variasi, ketertarikan visual, dan drama dalam sebuah karya seni.
 
Dalam desain, kontras merupakan salah satu faktor utama yang mempengaruhi kemampuan pemindaian dan hierarki visual dari halaman website atau layar perangkat. Hal ini memungkinkan desainer untuk menyajikan tata letak tertentu dengan cara yang memberi tahu pengguna akan titik interaksi mana yang penting dan mana yang kurang penting. 
 
Kontras efektif dalam menarik perhatian pengguna dan membawanya pada elemen tertentu, sehingga memainkan peran besar dalam mendukung navigasi intuitif dan kegunaan dari produk digital.
 
Beberapa Jenis Kontras Dalam Desain UI
 
Kontras dapat didasarkan pada berbagai fitur elemen UI, termasuk:
 
  • Warna - jenis kontras ini merupakan salah satu kontras yang paling alami dan terlihat oleh mata manusia. Kontras ini bekerja ketika warna yang sangat berbeda terlihat, misalnya, jika dikombinasikan dengan skema komplementer, split-komplementer, atau triadik.

    Jenis kontras ini paling banyak digunakan untuk membuat tombol CTA dan elemen navigasi penting lainnya yang langsung terlihat di bagian tata letak halaman website atau layar pada aplikasi perangkat, yang mendukung navigasi secara jelas dan intuitif.
  • Ukuran - Jenis kontras ini didasarkan pada pembuatan elemen yang menarik perhatian lebih besar dibandingkan dengan elemen lain.

  • Bentuk - Dalam jenis kontras ini, mata pengguna dapat ditarik dengan membuat bentuk salah satu elemen berbeda dari yang lain.

  • Posisi - Dalam jenis kontras ini, Anda dapat mengubah posisi dari salah satu elemen dalam beberapa baris. Dengan cara ini, Anda dapat terlihat berbeda. Misalnya, paragraf baru dari keseluruhan teks yang dapat dimulai dengan indentasi.

  • Tekstur - Dalam jenis kontras ini, perbedaan dibangun dengan menggunakan tekstur yang dibedakan secara jelas antara satu sama lain.

  • Arah (orientasi) - Pada jenis ini, Anda dapat mengubah posisi fisik elemen, membuatnya menggunakan arah lain yang tidak terduga,. Dengan cara ini, Anda dapat menarik perhatian pengguna dengan cara yang tidak biasa.


Ide pertama yang sering muncul di pikiran kita tentang kontras adalah sesuatu yang bernuansa hitam dan putih. Dengan tidak adanya nuansa dan banyak warna, gambar monokrom menggunakan kontras sebagai pendorong utama potensi ekspresif. Dan hal tersebut bekerja dengan cara yang sama pada tampilan antarmuka dari website maupun aplikasi perangkat.
 
Terlebih lagi, jika dibandingkan dengan karya seni atau fotografi, kontras tidak hanya mempengaruhi estetika tetapi juga memiliki dampak signifikan pada fungsi penggunaan dan navigasi tata letak. Oleh karena itu, penggunaan kontras yang dipikirkan dengan matang dapat menjadi metode yang ampuh untuk membuat website dan aplikasi lebih ramah pengguna dan mudah digunakan.
 
Tentunya bukan berarti hanya desain UI yang bernuansa hitam dan putih lah yang paling efektif. Tidaklah bijaksana untuk membatasi begitu banyak opsi ketika pengguna secara global memiliki beragam keinginan dan kebutuhan. Namun, pengujian kontras dengan "hitam-putih" memang sangat membantu. 
 
Anda harus ingat bahwa tampilan antarmuka dengan warna yang beragam dapat terlihat berbeda pada layar dan resolusi yang juga berbeda. Selain itu, kontras rendah dapat membuat antarmuka Anda lebih sulit digunakan untuk orang dengan kekurangan dalam hal warna.
 
Typography Contrast
 
Jenis kontras khusus lainnya adalah kontras berjenis typography yang didasarkan pada perbedaan fitur antara font yang digunakan untuk bagian tekstual dari karya desain.
Desainer typography Kanada, Carl Dair mendefinisikan beberapa tipe inti dari kontras typography:
 
  • Kontras Ukuran - Kontras ini berbicara tentang pembesaran fisik dari pola dasar yang dibuat oleh bentuk dan bobot jenis yang digunakan untuk teks. Contoh yang paling umum di sini adalah membuat judul atau heading terasa lebih besar dari teks lainnya.
  • Kontras Berat - Kontras ini biasanya dibuat lebih tebal dan menonjol di antara tipe yang lebih ringan dengan gaya yang sama. Hal ini membantu menarik perhatian ke bagian tertentu dari teks dan memberitahu pengguna tentang pentingnya kehadiran teks tersebut.
  • Kontras Bentuk - bentuk di sini dapat diartikan sebagai perbedaan antara huruf kapital dan padanan huruf kecilnya, atau huruf romawi dan varian miringnya, jenis skrip yang selaras dengan jenis standar - seluruh hal yang disebutkan dapat digunakan untuk dramatisasi perubahan bentuk. Namun, Carl Dair mengingatkan agar tidak menggunakan skrip dan huruf miring bersama-sama karena keduanya adalah versi tulisan tangan dari font; dan lebih cenderung berkonflik jika dibandingkan dengan adanya kontras.
  • Kontras Struktur - Struktur dapat diartikan bentuk huruf yang berbeda dari berbagai jenis typography, seperti monoline sans serif dan jenis font modern kontras tinggi, atau Italic dengan blackletter.
  • Kontras Tekstur - Kontras ini berbicara tentang bagaimana garis-garis tipe terlihat bersama sebagai satu kesatuan, dimana sebagian bergantung pada bentuk huruf itu sendiri dan sebagian lagi pada bagaimana teksturnya diatur.
  • Kontras Warna - Dalam jenis ini, Dair menyebutkan bahwa warna kedua biasanya kurang tegas jika dibandingkan dengan warna dasar hitam di atas putih (atau putih di atas hitam). Jadi, penting untuk memikirkan dengan cermat elemen mana yang perlu ditekankan dan memperhatikan nilai dari masing-masing font serta warna yang digunakan.
  • Kontras Arah - Kontras dengan jenis ini berbicara tentang oposisi antara vertikal dan horizontal serta sudut di antaranya. Selain itu, Dair menunjukkan bahwa blok teks juga memiliki aspek vertikal atau horizontal, sehingga jika mencampur blok lebar dari garis panjang dengan kolom tinggi dari garis pendek dapat menghasilkan kontras.

Selain itu, ada beberapa jenis kontras lain yang mungkin kurang populer, misalnya yang disebut kontras dengan isolasi, ketika satu kata atau frasa ditempatkan jauh dari elemen lain. Dengan cara ini, elemen akan terlihat menonjol dari keramaian, serta kontras. 
 
Dengan beberapa hal yang disebutkan di atas, mudah untuk mengira bahwa aturan praktis di sini adalah semakin tinggi kontras, semakin baik desain Anda. Namun, hal ini tidak sepenuhnya benar - terlalu banyak aspek desain lainnya tidak berarti lebih baik. Saat kontras rendah membuat konten sulit untuk dilihat dan dibaca, kontras yang terlalu tinggi dapat memicu ketegangan mata, membuat interaksi menjadi lebih sulit. 
 
Menurut Pedoman Aksesibilitas Konten Web 2.0, presentasi visual teks dan gambar teks harus sesuai dengan rasio kontras minimal 7:1, kecuali untuk beberapa kasus seperti:
 
  • Teks Besar - Teks dan gambar skala besar memiliki rasio kontras minimal 4,5:1
  • Insidental - Teks atau gambar teks yang merupakan bagian dari komponen tampilan antarmuka yang tidak aktif, murni hanya menjadi dekorasi, tidak terlihat oleh siapa pun, atau merupakan bagian dari gambar yang berisi konten visual penting lainnya, tidak memiliki persyaratan kontras.
  • Logotypes - Teks yang merupakan bagian dari logo atau nama brand tidak memiliki persyaratan kontras minimum.

Beberapa Hal Yang Dapat Dipertimbangkan
 
Berikut adalah beberapa hal yang perlu dipertimbangkan dalam aspek kontras yang diterapkan pada halaman website atau desain layar aplikasi.
 
Berhati-hatilah dengan kontras tinggi jika teks dihamparkan pada gambar
 
Gambar pada bagian latar belakang menghadirkan tren yang stabil dalam desain website dan perangkat seluler karena kemampuan gambar yang berkualitas dan dapat mencakup banyak fungsi. Pendekatan ini membuat tampilan layar menjadi lebih menarik secara visual dan emosional serta informatif, karena gambar langsung dapat menarik perhatian pengguna lebih cepat dengan cara ini. Dan juga, hal ini mendukung perasaan integritas dari semua elemen tata letak.
 
Namun, dibutuhkan banyak keterampilan dan upaya untuk menemukan kontras yang tepat dan mengintegrasikan navigasi dan konten teks dengan benar sehingga halaman tidak berubah menjadi kekacauan yang tidak terbaca yang sering terjadi ketika kontrasnya terlalu rendah.
 
Kontras yang terlalu tinggi dapat melelahkan & mengkhawatirkan
 
Di sisi lain, penting untuk diingat bahwa kontras yang berlebihan juga tidak baik dan bahkan dapat membahayakan beberapa aspek desain dari pengalaman pengguna. Hal yang berfungsi efektif sebagai aksen untuk menarik perhatian sesaat ke tombol atau petunjuk arah dapat menyebabkan masalah nyata pada halaman yang ditujukan. Khususnya ketika pengguna harus membaca deskripsi panjang dan harus menjaga agar mata mereka tidak terlalu tegang. 
 
Terkadang, pengguna aplikasi atau pengunjung website bahkan tidak dapat dengan jelas mendefinisikan apa yang salah, tetapi kontras yang terlalu tajam membuat mata mereka merasa tegang dan lelah sehingga mereka enggan menggunakan produk digital.
 
Perhatikan Ruang Negatif
 
Ruang negatif (alias ruang putih) adalah area tata letak yang dibiarkan kosong, tidak hanya di sekitar objek tetapi juga di antara dan di dalam objek. Ruang negatif adalah semacam ruang untuk "bernapas" untuk seluruh objek di halaman atau layar, sehingga sangat mempengaruhi efektivitas berbagai jenis kontras yang diterapkan dalam UI Anda.
 
Mengapa Kontras Penting Untuk Diperhatikan
 
Menyimpulkan seluruh hal yang disebutkan dan ditampilkan di atas, berikut beberapa manfaat utama kontras sebagai fitur lengkap dari desain yang ramah pengguna:
 
  • Hierarki visual yang lebih kuat
  • Fokus lebih baik
  • Rasa orisinalitas
  • Peningkatan keterbacaan
  • Korespondensi antara persepsi dan reaksi alami manusia.



Berikut adalah beberapa pemahaman tentang beberapa jenis kontras dalam desain UI. Jika Anda masih memerlukan bantuan dalam pengoptimalannya, kami dapat membantu.
 
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 jika 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 dengan cepat serta harga terjangkau tanpa mengurangi kesan profesional dari perusahaan atau bisnis anda.
 
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk membantu anda dalam bidang SEO digital 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 SEO 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 

CONTACT US

Let's Work Together

Have cool projects to work on ?

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.

Image
TELEPON
INDONESIA
+62813 8251 8448
Image
E-MAIL
hello@eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm
icon
icon
Free Consultation
icon