Advertisement
  1. Web Design
  2. Color Theory

Kenapa Anda Seharusnya Menghindari Kombinasi Warna Bergetar

Scroll to top
Read Time: 3 min

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Pada artikel singkat ini Anda akan belajar bagaimana getaran warna mempengaruhi keterbacaan antarmuka dalam konteks desain web dan antarmuka.

Berani atau Mencolok?

Ada kecenderungan yang muncul di kalangan desainer antarmuka untuk meniru skema warna norak yang sering ditemukan dalam desain cetak. Sementara sebagian karena tren ideologis, impuls ini juga muncul dari kisaran tipografi yang baru ditemukan yang tersedia bagi perancang web modern, yang mendorong tata letak seperti cetak dan tipe besar. Penting untuk dicatat perbedaan antara masing-masing medium yang menyebabkan warna getar menjadi agak lebih dibolehkan di medium cetak, dan kurang begitu untuk web.

Warna bergetar pada website Frooti

Di medium cetak, menggunakan skema warna yang berani sering kali berarti perbedaan antara diabaikan pada rak majalah dan melakukan penjualan. Di sisi lain, di antarmuka pengguna, kami memiliki pertimbangan lain yang lebih diutamakan daripada menarik perhatian pengguna secara paksa, khususnya, keterbacaan teks.

Apa itu Getaran (warna)?

Salah satu fenomena utama yang muncul dari skema warna berani dan sangat jenuh adalah warna yang tampaknya "bergetar", sebuah kejadian dimana tepi dua warna yang berdekatan secara langsung tampak menggabungkan, mengaburkan dan bercahaya, memberi ilusi gerak.

Dua sampel luar memiliki teks dengan warna bergetar, sedangkan sampel tengahnya memiliki teks dengan nilai equiluminant.

Josef Albers, ahli teori warna yang terkenal, memperingatkan agar tidak menggunakan warna bergetar dalam karya klasiknya, Interactions of Color:

"Efek awalnya yang mengasyikkan ini juga terasa agresif dan seringkali bahkan tidak nyaman bagi mata kita. Orang-orang merasa jarang digunakan kecuali efek jeritan dalam iklan, dan akibatnya tidak menyenangkan, tidak disukai, dan dihindari. "

Agar sepasang warna memiliki visibilitas rendah satu sama lain, maka perlu kesetimbangan, memiliki nilai kecerahan yang serupa. Namun, agar terasa sangat bergetar, warna pada umumnya akan memiliki saturasi tinggi dan saling melengkapi satu sama lain, bergeser kira-kira 180º pada roda warna.

Biru (HSB 210, 99, 100) pada warna merah (HSB 12, 99, 100)

Pada contoh di atas, warna merah dan biru dapat ditemukan di sisi berlawanan roda warna (meski tidak langsung berlawanan) dan keduanya memiliki kecerahan 100.

Spotify EDMSpotify EDMSpotify EDM
EDM Spotify

Spotify telah menjadi identik dengan skema warna yang berani, yang digunakan dengan efek luar biasa untuk menarik perhatian. Terkadang kombinasi ini bisa tidak tepat, meski tidak bergetar dalam arti sebenarnya; Seperti tombol melawan latar belakang ungu pada contoh di atas. Mata pengguna akan mengenali apa adanya, tapi beberapa mungkin berjuang untuk menentukan sisi luar bentuknya.

Keterbacaan

Teks antarmuka terhambat secara signifikan saat diatur dalam warna equiluminant dan bergetar. Saya memilih warna bergetar ini:

Saat getaran warna terjadi, elemen yang paling terpengaruh oleh efek distorsi bercahaya adalah tepi antara dua warna. Inilah sebabnya mengapa getaran sangat berbahaya dalam konteks font UI, ikon kecil dan elemen rinci lainnya yang tidak cukup besar untuk mengkompensasi tepi getar buram mereka.

Inilah rangkaian swatch yang sama, kali ini seperti yang terlihat oleh seseorang yang memiliki kebutaan warna penuh:

Selain warna getar dan kabur yang sering menyebalkan bagi mereka yang melihat dengan warna penuh, diberi warna pencahayaan yang sama, mereka yang memiliki kebutaan warna mungkin tidak akan melihat apapun sama sekali. Meskipun ada berbagai tingkat buta warna, yang terbaik adalah bermain dengan aman saat menyangkut aksesibilitas.

Di sini, misalnya, ikon sampah di Apple Watch tidak terlihat oleh orang-orang dengan kebutaan warna:

Penglihatan warna (kiri) versus kebutaan warna (kanan)

Kesimpulan

Warna getar bisa digunakan untuk efek yang baik, namun menghadirkan bahaya nyata dalam kegunaan antarmuka pengguna, dan bisa jadi berat jika tidak sengaja dipertimbangkan sebelum digunakan. Ingat ini saat merancang!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.