Color theory in

User Interface
Interaksi Manusia dan Komputer
Pertemuan 3
 Penglihatan dan hubungannya dengan Interaksi manusia
dan computer:
• Luminans
• Kontras
• Kecerahan
Materi minggu lalu: • Medan Penglihatan
• Sudut dan ketajaman Penglihatan
• Warna
Color theory in user interface
Warna
Warna adalah salah satu aspek penting dalam kehidupan.

Warna tidak hanya mempengaruhi penglihatan kita, tapi secara saintifik, warna terbukti
berkaitan erat dengan emosi manusia.

There’s a reason why ‘feeling blue?’ is a phrase to express sadness.

4
 Warna dibagi atas:
Warna Hangat Warna Dingin Warna Netral
(Warm Color) (Cool Color) (Neutral Color)

5
 Warna dibagi atas:
Warna Hangat
(Warm Color)
• Memberi stimulasi
• Asosiasi dengan hal-hal yang
terang dan cerah seperti
matahari, sinar,
• Memberi kesan hangat
• Memberi kewaspadaan
Warna Dingin Warna Netral
(Cool Color) (Neutral Color)
• Memberi ketenangan • Netral, dapat dipadukan dengan
• Asosiasi dengan hal-hal yang warna apa saja
dingin seperti air, salju, pohon • Dapat digunakan untuk keperluan
apa saja
• Memberi kesan dingin
• Memberi kesan gelap-terang
Wanita cenderung lebih peka
terhadap perbedaan warna
dibanding pria
Warm color vs Cool Color:
in action!

Anda di kubu mana?

Warm color vs Cool Color:
in action!

Anda di kubu mana?

Decide your color with these!
 Hue: Warna

Saturasi: Intensitas warna

Value: Gelap-terang
Meaning of Colors
Merah (Red)
• Semangat dan gairah
• Berani
• Sensual
• Menambah nafsu makan
• Waspada
• Bahaya
• Cinta
Kuning (Yellow)
• Ceria, gembira
• Terang
• Positif
• Spontan
Biru (Blue)
• Tenang
• Sedih / sendu
• Gelap
• Profesional
• Kepercayaan
• Loyal
• Aman
HIjau (Green)
• Alam
• Tenang
• Organik
• Penyembuhan
Oranye (Orange)
• Ceria
• Kreatif
• Masa muda
• Semangat
• Antusias
• Petualangan
Ungu (Purple)
• Royal
• Langka
• Elegan
• Indah
• Kemewahan
Putih (White)
• Suci
• Bersih
• Kejujuran
• Kekosongan
• Sederhana
Hitam (Black)
• Royal
• gelap
• Kesepian
• Jahat
• Kematian
• Misterius
Abu-abu (Gray)
• Sendu
• Bosan
• Modern
• Stabil
• Dewasa
• Ketidakjelasan
So many emotion!
Penerapan Kontras dan Luminans
Dalam user interface
 Kontras

Keadaan dimana terjadi

perbedaan luminans atau warna
antara yang jauh antara dua objek

Bahasa inggris: Being Strikingly different in

luminance or color

24
Good Contrast vs Bad Contrast

25
Good Contrast vs Bad Contrast
Bagaimana cara tahu kontras objek bagus atau tidak? Gunakan mode grayscale!

26
 Light Mode vs Night Mode
Light

Dim Mode

Night/Dark Mode
Why people
need dark modes:

So this won’t happen…

On serious note:

Why people
need dark modes: 1. Mengurangi daya baterai

2. Ada orang yang matanya sensitif dengan cahaya

3. Mengurangi beban pada mata

4. Warna terlihat lebih ‘ngejreng’ pada background

hitam (berhubungan dengan kontras)
Thank you

Any Question?