Program Studi Teknik Informatika

Universitas 17 Agustus 1945 Surabaya

Warna & Citraan dalam UI

Memahami berbagai penerapan warna & citraan dalam desain UI

4616223 | Interaksi Manusia-Komputer

Agyl A. Rahmadi, S.Kom. M.A

R&D Group: Intelligent Mobile & Creative Computing
Sub-Topik dan Capaian Pembelajaran
▪ Definisi Warna
Menjelaskan apa itu warna & penggunaannya secara umum
▪ Teori Warna
Menjelaskan berbagai teori dan implementasi dasar warna
▪ Psikologi Warna
Memahami bagaimana warna bisa mempengaruhi emosi dan
kesan yang berbeda dalam lintas budaya
▪ Harmoni & Kontras Warna
Menerapkan kombinasi warna yang harmonis dan memenuhi
standar kontras dalam UI
▪ Citraan (Imagery)
Menjelaskan apa itu citraan dan jenisnya dalam UI
▪ Penerapan Citraan
Menerapkan berbagai praktik terbaik (best practice) dari
citraan dalam desain UI
Definisi Warna
Memahami bagaimana warna berperan dalam kehidupan manusia
Definisi Warna?
Apa yang akan kita jawab ketika ditanya dengan
pertanyaan:
▪ Apa definisi warna merah ?
▪ Apa definisi warna hijau ?
▪ Apa definisi warna biru ?
Apakah kita menjawab: Merah itu berani, Putih itu suci,
Hijau itu agamis, dsb. ?
Itu adalah penyimbolan warna dengan makna tertentu
dalam suatu budaya, bukan definisi.
Jadi, apa definisi warna?
Definisi Warna secara Fisika
Dari sudut pandang fisika, warna adalah cahaya terlihat (visible light) dari radiasi elektromagnetik
matahari yang berada di rentang panjang gelombang 400 – 700 nanometer.
Sehingga kita bisa mengatakan warna merah adalah radiasi elektromagnetik dengan panjang gelombang
di kisaran 650 – 700 nanometer, warna hijau di kisaran 550 – 600 nanometer, dst.
Apa itu Warna?
Jika pertanyaannya diubah sedikit menjadi :
▪ Apa itu warna merah?
▪ Apa itu warna hijau?
▪ Apa itu warna biru?
Maka kita akan menjawab dengan:
▪ Menunjuk apel untuk warna merah
▪ Menunjuk daun untuk warna hijau
▪ Menunjuk langit untuk warna biru
Kebanyakan manusia mendefinisikan warna dengan
menunjukkan sebuah warna, dan menyebut namanya
–tidak mengartikan melalui kata-kata
Definisi Warna
Definisi warna sendiri sangat sulit didefinisikan, tapi
terdapat sebuah definisi sederhana :
"Colour is that attribute of an object leftover when
you eliminate all attributes except colour."
Warna adalah atribut yang tersisa dari sebuah benda
jika kita mengabaikan semua atribut lainnya (ukuran,
bentuk, berat, bahan, fungsi, dsb)
Warna adalah cara kita membedakan sebuah benda
yang memiliki ukuran, bentuk, tekstur, dan atribut lain
yang sama.
Warna juga menjadi cara kita untuk mengidentifikasi
sesuatu dan sifatnya.
Manusia & Warna
Di zaman primitif, manusia menggunakan warna untuk:
▪ Identifikasi makanan (yang berbahaya dan tidak)
▪ Identifikasi binatang (yang berbahaya dan tidak)
▪ Mengenali tanda bahaya

Di zaman modern, hal-hal tersebut tetap dilakukan

dalam kondisi tertentu, seperti:
▪ Membuat obat atau proses farmasi
▪ Identifikasi makanan yang aman ketika survival
▪ Menentukan barang yang mau dibeli di toko online

Ada satu hal umum bagaimana manusia menggunakan

warna: untuk mengambil keputusan
Warna dalam UI
Di masa sekarang manusia mengumpulkan,
mengkonsumsi, dan berpindah dari satu informasi ke
informasi lain dengan sangat cepat dibandingkan
kehidupan di masa lalu.
Dengan jumlah informasi yang melimpah, penentuan
warna dalam informasi yang disajikan dalam berbagai
media (website, televisi, koran) sangat penting.
Begitu juga warna dalam UI yang bisa membantu, atau
malah menyulitkan pengguna.
Warna memang tidak akan membunuh pengguna, tapi
bisa menyebabkan pengalaman tidak menyenangkan.
Karena itu fokus desainer UI adalah bagaimana
memanfaatkan warna dengan baik.
Teori Warna
Memahami secara mendasar tentang warna dan implementasinya
Warna Primer & Sekunder
Berdasarkan media yang dipakai, terdapat warna
primer dan sekunder yang menjadi warna-warna dasar
yang bisa digunakan.
Dalam media lukisan, warna yang ada:
▪ Primer: merah, kuning, biru
▪ Sekunder: hijau, oranye, ungu
Dalam media elektronik/digital, warna yang ada:
▪ Primer: merah (red), hijau (green), biru (blue) atau
disebut dengan RGB
▪ Sekunder: biru muda (cyan), ungu muda (magenta),
kuning (yellow) atau disebut dengan CMY
Warna primer dan sekunder biasanya
direpresentasikan dalam sebuah roda warna
Roda Warna
Hues & Warna Komplemen
0°
Dalam roda warna, terdapat banyak aspek warna
tergantung dari derajat lingkaran dalam roda warna.
Pada derajat yang bersebarangan, terdapat warna 60°
komplemen atau lawan warna.
Misalkan untuk warna merah pada 0° , terdapat warna
komplemen cyan pada sudut 180°. Begitu juga warna Komplemen
biru pada 240°, terdapat warna komplemen kuning
pada sudut 60°.
240°
Aspek warna pada sudut tertentu inilah yang disebut
dengan hue (hues untuk bentuk jamak). Istilah ini
dipakai di beberapa model warna.
180°
Model Warna
Banyak model warna yang bisa dipakai dalam warna
digital, tapi yang paling mendasar adalah yang
berdasarkan RGB, dan juga Hue + Saturation (HS).
Untuk model RGB ada yang juga memiliki channel
Alpha untuk transparansi sehingga disebut dengan
RGBA. Biasanya direpresentasikan dalam kubus RGB
(kanan).
Untuk HS terdapat beberapa variasi model yang
diimplementasikan:
▪ HSL (Lightness)
▪ HSV (Value) atau disebut juga HSB (Brightness)
Dalam implementasi, yang lebih sering dipakai adalah
HSV/HSB karena lebih mudah dibayangkan dengan
representasi silinder HSV/HSB (kanan)
Model RGB (Aditif)
Red : unsur warna Merah (0 – 255)
Green : unsur warna Hijau (0 – 255)
Blue : unsur warna Biru (0 – 255)

Sifat dalam HSB

▪ Warna dibentuk dengan kombinasi unsur warna RGB
▪ CMY (Subtraktif) dibentuk dari kombinasi RGB. Cyan (C)
dari G + B, Magenta (M) dari R + B, dan Yellow (Y) dari R
+ G.
▪ Bila RGB semua bernilai 0, akan menjadi warna hitam
▪ Bila RGB semua bernilai maksimal (255), akan menjadi
warna putih
▪ Sistem dasar RGB bisa menghasilkan 16.777.216
warna yang disebut dengan real color atau warna yang
bisa dilihat manusia
Model HSV/HSB
Hue : Aspek warna (0 – 360)
Saturation : Kepekatan warna (0 – 100)
Value/Brightness: Terangnya warna (0 – 100)

Sifat dalam HSB

▪ Warna murni (pure color) punya saturation &
brightness tinggi
▪ Warna pudar atau muda (light color) punya saturation
rendah
▪ Warna gelap (dark color) punya brightness rendah
▪ Jika saturation 0 menjadi warna putih (berapa pun
aspek warnanya)
▪ Jika brightness 0, menjadi warna hitam (berapa pun
hue dan saturation-nya)
Segitiga HSV/HSB
Dalam segitiga HSB ini terdapat
46000 warna yang bisa dikenali
manusia.
Bisa menyebut namanya satu
per satu?
Tint, Shade, Tone
Untuk sebuah warna, juga terdapat istilah tint, shade,
tone
▪ Tint adalah proporsi warna putih (white) yang dimiliki
sebuah warna.
▪ Shade adalah proporsi warna hitam (black) yang
dimiliki sebuah warna
▪ Tone adalah proporsi warna abu-abu (grey) yang
dimiliki sebuah warna
Implementasi Warna
Dalam implementasi, warna biasanya menggunakan RGB
sebagai dasar acuannya dengan nilai masing-masing
adalah 255.
Terdapat beberapa implementasi umum untuk RGB:
▪ Nilai per komponen: rgb(r, g, b) dengan mengisi nilai r, g,
b di rentang 0 – 255, atau juga rgba(r, g, b, a) dengan
nilai a untuk alpha di rentang 0 – 100
▪ Dalam hexadecimal dengan setiap unsur RGB dibuat
dari rentang 0 dengan 00 s.d 255 dengan FF.
• #FF0000 untuk warna merah
• #00FF00 untuk warna hijau
• #0000FF untuk warna biru
Dalam implementasi yang user bisa memilih warna,
biasany dalam bentuk color picker (kanan)
Psikologi Warna
Warna memiliki makna dan emosinya
Psikologi Warna
Adalah studi tentang bagaimana warna dapat
mempengaruhi perilaku dan emosi manusia
Warna bisa sangat mempengaruhi kognitif dan emosi
manusia. Sebuah warna yang menjadi tema tampilan
(warna keseluruhan) UI dapat berpengaruh ke
pengguna.
Contoh psikologi warna untuk ruangan dan desain
merek :
http://nowsourcing.com/blog/wp-
content/uploads/2012/01/louisville-painter.html
Men vs Women
Budaya Warna
Setiap budaya juga memiliki perbedaan persepsi terkait
pemaknaan dari berbagai warna yang ada.
Penggunaan warna pada budaya satu bisa memiliki
makna yang sangat berbeda dengan budaya yang lain.
Salah satu penjelasan terkait itu bisa dibaca di:
http://www.webdesignerdepot.com/2012/06/color-and-
cultural-design-considerations/
Budaya Warna -
Merah
Budaya Warna - Merah
• Western Culture (Eropa dan Amerika Utara) -
menggambarkan perasaan yang menggebu (passion
& excitement). Dikombinasikan dengan warna lain
bisa berarti religius (+hijau menjadi warna natal)
• Eastern Culture (Asia Timur dan Asia) - warna
kesenangan dan perayaan
• Amerika Latin – warna religius jika digabung dengan
putih
• Timur Tengah – warna yang menggambarkan
bahaya
Budaya Warna -
Oranye
Budaya Warna - Oranye
• Western Culture – warna musim gugur dan panen
sawah. Juga menggambarkan kehangatan dan buah
jeruk. Di Belanda merupakan warna nasional dan
kerajaan.
• Eastern Culture – di Jepang melambangkan
keberanian dan cinta. Di India, warna saffron
(orange agak kuning) warna suci
• Amerika Latin – warna cuaca cerah atau terkait
bumi
• Timur Tengah – warna yang menggambarkan
kehilangan dan duka
Budaya Warna -
Kuning
Budaya Warna - Kuning
• Western Culture – menggambarkan kehangatan
matahari, musim panas, hospitality, dan pelayanan.
Di Jerman, kuning berarti kecemburuan
• Eastern Culture – warna kerajaan. Di Jepang juga
termasuk keberanian. Di India warna perdagangan
• Amerika Latin – warna berkabung dan kematian
• Timur Tengah – di Mesir warna berkabung dan
berduka. Di lainnya warna kebahagiaan dan
kejayaan.
Budaya Warna -
Biru
Budaya Warna - Biru
• Western Culture – menggambarkan kepercayaan dan
otoritas. Juga bernuansa maskulin. Juga bisa berarti
ketenangan dan kedamaian, walau pun juga kesedihan
atau depresi.
• Eastern Culture – di India melambangkan keabadian
(warna Khrisna) dan kekuatan. Di China merupakan
warna feminim.
• Amerika Latin – warna religius atau melambangkan
berduka. Di Mexico melambangkan kepercayaan dan
ketenangan.
• Timur Tengah – melambangkan keamanan dan
perlindungan.
• Global – telah diuji warna biru warna paling aman dan
positif untuk brand atau produk yang dipasarkan secara
global
Budaya Warna -
Hijau
Budaya Warna - Hijau
• Western Culture – warna nasional Irlandia dan
menggambarkan keberuntungan. Juga
menggambarkan lingkungan.
• Eastern Culture – melambangkan alam dan
kehidupan. Juga menggambarkan kesuburan dan
masa muda.
• Amerika Latin – menggambarkan kematian
• Timur Tengah – terkait erat dengan warna Islam.
Melambangkan kekuatan, kesuburan,
keberuntungan, dan kemakmuran.
Budaya Warna -
Ungu
Budaya Warna - Ungu
• Western Culture – warna kerajaan/kebangsawanan.
Melambangkan kemakmuran dan ketenaran.
• Eastern Culture – warna kemakmuran dan
bangsawan. Di Thailand warna Kematian.
• Amerika Latin – di Brazil juga menggambarkan
kematian atau kehilangan
• Timur Tengah – menggambarkan kemakmuran. Di
Mesir juga berarti kebaikan.
Budaya Warna -
Pink
Budaya Warna - Pink
• Western Culture – warna feminim dan diasosiasikan
dengan kelahiran anak perempuan. Melambangkan
rasa manis.
• Eastern Culture – juga melambangkan feminim dan
pernikahan. Korea lebih ke arah kepercayaan.
Bangsa China tidak mengenal warna ini sebelumnya
sampai berinteraksi dengan bangsa barat.
• Amerika Latin – lebih sering dipakai sebagai warna
bangunan dan tidak ada makna khusus
• Timur Tengah – tidak ada makna khusus apa pun
atau kebiasaan terkait warna pink
Harmoni & Kontras Warna
Bagaimana warna bisa saling melengkapi dan selaras
Harmoni Warna
Harmoni warna adalah kombinasi warna yang terdiri
dari berbagai warna yang nyaman di mata karena
membentuk persepsi keteraturan dan keseimbangan –
seperti ketika melihat pemandangan alam atau melihat
orang memakai baju yang serasi warnanya.
Penggunaannya di desain UI dalam bentuk sebuah
palet warna (color pallete) yang bisa terdiri dari 5 – 6
warna yang digunakan secara konsisten dalam semua
bagian UI.
Dalam penentuan palet warna yang harmonis, kita
mulai dari warna utama (base color), yaitu satu warna
yang menjadi acuan untuk penentuan 4 – 5 warna
yang lain dalam palet warna. Contoh palet warna yang dihasilkan di situs
web coolors (https://coolors.co) untuk
harmoni complementary
Aturan Harmoni Warna
Dalam penentuan palet warna, kita bisa
menggunakan berbagai aturan harmoni
warna yang dibentuk dari lingkaran hue atau
roda warna:
▪ Monochromatic ▪ Tetradic
▪ Analogous ▪ Neutral
▪ Complementary ▪ Accent
▪ Split- ▪ Warm
Complementary ▪ Cold
▪ Double-
Complementary
▪ Triadic
Berbagai pilihan aturan harmoni warna di Adobe
Color (https://color.adobe.com/) untuk palet warna
Monochromatic
Monochromatic adalah skema
warna yang terdiri dari satu hue
di roda warna, tapi berbeda di
saturation dan brightness
Analogous
Analogous adalah skema warna
yang terdiri dari banyak hue yang
bersisian satu dengan lainnya di
roda warna
Complementary
Complementary adalah skema
warna yang terdiri dari dua hue
yang terletak bersebarangan di
roda warna
Split-Complementary
Split-Complementary adalah
skema warna yang terdiri dari
satu hue terletak di satu sisi,
yang dua bersisian di warna
complementary-nya
Double-Complementary
Double-Complementary adalah
skema warna dengan 2 warna
dan komplemennya + warna
yang bersisian
Triadic
Triadic adalah skema warna yang
terdiri dari 3 warna yang hue-nya
terletak dengan jarak sama di
roda warna (membentuk
segitiga)
Tetradic
Tetradic adalah skema warna
yang terdiri dari 4 warna yang
hue-nya terletak dengan jarak
sama di roda warna (membentuk
segiempat)
Neutral
Neutral atau netral adalah
skema warna yang terdiri dari
muted colors – yaitu warna yang
sudah ditambahkan shade, tint,
atau tone-nya (termasuk hitam &
putih)
Accent
Accent atau aksen adalah skema
warna yang terdiri dari muted
colors dan satu warna terang
(nilai saturation tinggi)
Warm
Warm atau ‘hangat’, yaitu skema
warna yang terdiri dari warna
terletak di bagian atas roda
warna (90° – 271 °)
Cold
Cold atau ‘dingin’, yaitu skema
warna yang terdiri dari warna
terletak di bagian bawah roda
warna (91° – 270 °)
Natural
Dikatakan bahwa kombinasi warna terbaik
adalah warna-warna yang terlihat di alam.
Ketika membuat palet warna, kita bisa
mengambil inspirasi dari pemandangan alam
untuk menentukan palet warna.
Palet warna dari pemandangan alam
biasanya acak dan tidak masuk dalam
klasifikasi aturan harmoni warna yang sudah
dibahas.
Untuk membuatnya kita bisa memakai
berbagai tools seperti “Extract Theme” yang
memungkinkan kita mengunggah foto untuk
didapatkan palet warna alamiahnya di Adobe
Color
(https://color.adobe.com/create/image)
Kontras Warna
Kontras Warna
Warna yang paling kontras?
Bagaimana warna yang satu bereaksi dengan warna
yang lain adalah bagian paling kompleks dalam teori
warna. Karena palet warna yang dihasilkan dari
berbagai aturan belum tentu memiliki kontras yang
Warna yang paling kontras?
baik satu dengan yang lain – sehingga harus dicek lagi.
Contoh: kontras dari warna hijau (#00B050) dan
berbagai macam warna. Warna latar (background)
mana yang paling kontras dengan teks warna hijau
(foreground)? Warna yang paling kontras?

Warna yang paling kontras?

 Rasio Kontras

Rasio Kontras 1.4 : 1

Warna yang paling kontras?
Terdapat perbandingan antara warna yang menjadi latar
(background) dan yang menjadi warna teks di depan
(foreground) disebut dengan rasio kontras. Rasio Kontras
1.13 : 1
Rasio kontras menentukan seberapa mudah teks dengan
Warna yang paling kontras?
satu warna bisa dibaca terhadap latar dengan warna
tertentu.
Dalam penentuan kombinasi warna dengan rasio kontras Rasio Kontras

yang baik, Web Content Accessibility Guidelines (WCAG) 2.86 : 1

oleh World Wide Web Consortium (W3C) bisa dijadikan Warna yang paling kontras?
panduan: 4.5: 1 untuk teks konten (body) atau 3:1 untuk
teks besar.
Rasio Kontras
Dari kombinasi di samping, yang paling kontras dengan
1.39 : 1
warna latar putih pun belum memenuhi standar dengan
Warna yang paling kontras?
rasio hanya 2.86:1
Mengecek Rasio Kontras
Untuk mengecek rasio kontras, terdapat formula tersendiri
dengan menghitung luminans (luminance) atau serian dari
sebuah warna terhadap warna yang lain. Luminans ini juga
bisa dipakai untuk mengecek apakah satu warna ramah
terhadap penderita buta warna atau tidak.
Rasio kontras memiliki nilai 1 s.d 21 (ditulis dengan 1:1 s.d
1:21). Jika mau menghitung sendiri akan cukup merepotkan,
sehingga kita bisa memakai berbagai tools yang tersedia:
▪ WebAIM Contrast Checker
(https://webaim.org/resources/contrastchecker/)
▪ WCAG Contrast Checker (https://contrastchecker.com/)
▪ Colour Contrast Checker (https://colourcontrast.cc/)
▪ Firefox Web Developer Tools – Accessibility
▪ Google Lighthouse - Accessibility
Kesesuaian Standar Kontras
Berdasarkan WCAG, terdapat tingkat kesesuaian
(conformance) terkait rasio kontras. Terdapat tiga
tingkat kesesuaian:
▪ A : tingkat minimal
▪ AA: termasuk tingkat A dan kebutuhan di tingkat AA.
Tingkat ini yang paling banyak diusahakan dengan
kontras rasio 4.5:1 (normal) dan 3:1 (large)
▪ AAA : semua yang ada di tingkat A, AA, dan
kebutuhan AAA. Ini tingkat paling ketat dan dengan
kontras rasio lebih tinggi: 7:1 (normal) dan 4.5:1
(large)
Karena itu secara standar, yang perlu dipenuhi adalah
tingkat AA. Jika dimungkinkan baru AAA.
Citraan (Imagery)
A picture is worth a thousand words
Citraan?
Unsur komunikasi visual dalam sebuah UI yang
berbentuk citra (image) atau grafika (graphics) yang
membantu pengguna dalam mehahami konten atau
fungsi dari aplikasi untuk memenuhi tujuan mereka.
▪ Pemanfaatan citra atau grafika dalam sebuah UI akan
sangat membantu pengguna jika digunakan dengan
tepat – jika tidak justru akan membingungkan.
▪ Manusia memproses citra (image) 50.000 – 60.000
kali lebih cepat dibanding teks, sehingga perlu
dipahami pemanfaatan yang baik dari citraan dalam
sebuah UI.
Fungsi Citraan
Citraan biasanya digunakan untuk tiga hal:
▪ Sebagai Konten
jenis citraan sebagai konten dibagi menjadi dua: contained
imagery (e.g foto produk, foto kejadian berita, video tutorial,
infografik, unggahan media sosial) dan immersive imagery
(e.g game, animasi, simulasi)
▪ Membantu Navigasi
biasanya berupa ikon atau ilustrasi yang mudah dikenali
pengguna untuk menjalankan fungsi, atau menuju halaman
tertentu. Terkadang foto thumbnail juga digunakan.
▪ Membentuk Mood
Biasanya dipakai untuk membuat kesan dalam sebuah
konten tulisan (i.e artikel, opini) atau promosi, dan dalam
empty state untuk memberi pesan atau kesan tertentu (i.e
foto latar belakang bing, ketika tidak ada koneksi internet di
google chrome).
Bentuk Citraan
Bentuk berdasarkan fungsi yang biasa diimplementasikan
Konten
▪ Hero image/banners atau slideshow atau carousel
▪ Foto (produk, kejadian berita)
▪ Video /Animasi
▪ Grafika (infografik, visualisasi data, komik)
▪ Game
Navigasi
▪ Ikon
▪ Avatar/Profile Picture
▪ Thumbnail
Mood
▪ Foto background
▪ Foto ornamental
▪ Ilustrasi empty state
Penerapan Citraan
Prinsip dan praktik terbaik (best practice)
Prinsip
Dari Material Design oleh Google, ada tiga prinsip dalam penerapan citraan: informative – membantu
pemahaman dan penyampaian pesan, delightful – menggambarkan konteks yang bisa menyenangkan
pengguna, intentional – harus ada maksud yang jelas, tidak asal pakai

https://material.io/design/communication/imagery.html#principles
Citra vs Ilustrasi
Kapan memakai foto/video?
▪ Menggambarkan kondisi yang
khusus/spesifik
▪ Untuk menunjukkan atau promosi dari
sebuah produk
▪ Menjelaskan sesuatu yang kompleks
Kapan memakai ilustrasi/animasi?
▪ Menyampaikan sesuatu yang abstrak,
konsep, atau belum ada wujud aslinya
▪ Membentuk kesan tersendiri
▪ Memvisualisasikan data
▪ Memandu pengguna atau menyampaikan
cerita
Diambil dari: https://material.io/design/communication/imagery.html#usage
Citraan yang Relevan
Citraan yang informatif berarti relevan. Relevansi terhadap konten dan konteks dari citraan yang
digunakan harus sesuai, dan membantu pemahaman pengguna terkait konten atau fungsi dari aplikasi.
Citraan yang tidak relevan hanya seperti iklan yang justru membingungkan.
Citraan yang Relevan

Diambil dari: https://dribbble.com/stories/2020/05/05/7-best-practices-photography-ui-design

Citraan yang Asli
Citraan yang informatif berarti menunjukkan kondisi
yang asli.
Seringkali untuk mengisi ruang kosong (whitespace),
diberi foto yang diambil dari stock photo – foto
umum/generik dari orang yang memang berpose untuk
itu (staged)
Berdasarkan penelitian eye tracking, foto-foto seperti
itu (contoh disamping yang menggambarkan customer
center) justru seringkali diabaikan dan tidak membantu
apa-apa terhadap pengguna.
Foto-foto seperti itu disebut juga foto ornamental, atau
ornamental graphic – yang sebaiknya dihindari. Karena
hanya akan menjadi pajangan tidak berarti bagi
pengguna.
Citraan yang Asli

Diambil dari: https://dribbble.com/stories/2020/05/05/7-best-practices-photography-ui-design

Citraan yang Fokus
Citraan yang delightful
menunjukkan focal point atau
titik fokus dari citra dengan jelas.
Citra foto yang digunakan harus
memiliki objek dan titik fokus
yang jelas – sehingga akan
membantu pengguna dalam
mengambil keputusan.
Prinsip ini diterapkan berbagai
media sosial dengan machine
learning untuk menghasilkan
thumbnail preview pada focal
point sebuah foto yang diunggah.

Diambil dari: https://material.io/design/communication/imagery.html#usage

Citraan yang Fokus

Diambil dari: https://material.io/design/communication/imagery.html#usage

Citraan yang Beresolusi Tinggi
Citraan yang delightful berarti memiliki resolusi
yang relatif tinggi.
Jangan sampai sebuah citra tampil dengan
resolusi yang terlalu rendah sehingga terlihat
buram atau pixelated. Dalam hal ini yang perlu
diperhatikan adalah optimasi dalam proses
penyimpanan file citraan yang digunakan – tetap
dengan resolusi dan kualitas tinggi, tapi dengan
ukuran sekecil mungkin.
Selain itu juga perlu diperhatikan jika mendesain
untuk perangkat dengan Retina Display milik
Apple yang memiliki kepadatan piksel lebih tinggi
– sehingga juga harus menyediakan file dengan
resolusi 2x dan 3x.
Diambil dari: https://developer.apple.com/design/tips/
Citraan yang Beresolusi Tinggi

Diambil dari: https://material.io/design/communication/imagery.html#usage

Pemanfaatan Hero Image/Banner
Pemanfaatan hero image/banner, atau yang biasa
disebut juga dengan slideshow atau carousel
adalah elemen UI yang mampu menarik perhatian,
menyediakan konteks, atau menguatkan brand.
Keuntungan utama adalah memungkinkan kita
menempatkan banyak konten di tempat yang
terlihat pertama kali oleh pengguna.
Kekurangan utamanya, berdasarkan penelitian,
pengguna sering mengabaikan karena
menganggap seperti iklan yang mengganggu –
kecuali pengguna dalam mindset belanja yang
cenderung lebih memperhatikan (seperti gambar di
samping)
Karena itu penggunaan hero image/banner harus
jelas alasannya – jangan hanya karena ingin
sebuah UI terlihat “keren”
Panduan Hero Image/Banner
1. Isi dengan 5 atau kurang frame dalam slideshow –
pengguna tidak akan melihat lebih dari itu
2. Gunakan teks dan citra yang sesuai dengan konten
yang ingin disampaikan
3. Tunjukkan informasi seberapa banyak konten dalam
slideshow tersebut – yang baik dibuat dalam bentuk
pilihan yang bisa dipilih (jangan bulatan kecil)
4. Gunakan ikon, thumbnail, atau link yang mudah
dipahami
5. Pastikan navigasi dari slideshow ada di dalam kotak
slideshow, bukan di luarnya
6. Pastikan link dan tombol cukup besar untuk
disentuh/diklik
7. Jangan auto-forward (slideshow jalan sendiri) di layar
mobile karena cenderung akan seperti iklan dan
sering diabaikan
Diambil dari: https://material.io/design/communication/imagery.html#usage
Pemanfaatan Ikon
Pemanfaatan ikon dalam UI akan sangat membantu pengguna
dalam menggunakan aplikasi – tapi penerapan ikon yang tidak
tepat justru bisa menyulitkan dan membingungkan pengguna.
Tujuan utama dari penggunaan ikon adalah memberi kejelasan
(provide clarity) dari UI – sehingga pengguna memahami, dan
mudah dalam menggunakan.
Kelebihan ikon adalah mudah terlihat, berukuran kecil, adanya
kesamaan makna lintas budaya, memperkuat brand, dan
meningkatkan pengalaman pengguna.
Kekurangannya adalah ketika ikon memiliki bentuk yang tidak
umum, terdapat makna yang berbeda lintas budaya, dan justru
memberi pengalaman buruk.

Contoh berbagai ikon di Icons8

https://icons8.com/icon/set/popular/wired
Praktik Terbaik Ikon dalam UI
Dalam menggunakan ikon, best practice yang disarankan
adalah sebagai berikut: Wishlist Like Favorite
Ikon memerlukan Label Teks
Seringkali ikon justru membingungkan bagi pengguna karena
ambigu maknanya. Sehingga disarankan untuk sebisa mungkin
diberi label teks agar selalu jelas maksudnya.
Ukuran Relatif akan Membantu Ikon Terlihat
Terkadang untuk semua mode tampilan (mobile/desktop) ikon
memiliki ukuran yang sama – sehingga terkadang ikon yang
terlihat besar di mobile, akan kecil ketika di desktop. Sehingga
sebaiknya ukuran ikon disesuaikan sesuai tampil di mana. MENU
Desain yang Tepat
Desain ikon harus sederhana, warna sedikit, dan konsisten
secara tema dan bentuk. Ikon dengan bentuk kompleks dan
banyak warna justru akan membingungkan pengguna. Jika
pengguna tidak bisa mengenali dalam 5 detik, maka desain
tidak tepat
Sumber Citraan
Dalam mencari citraan yang dipakai dalam UI, pastikan milik
sendiri atau menyewa orang untuk membuat secara
profesional.
Jika terbatas secara waktu dan biaya, bisa mencari di
berbagai situs web yang menyediakan citraan dengan lisensi
yang tidak terlalu ketat:
▪ Fotografi
Unsplash, Pexels, Pixabay, Negative Space, FreeImages
▪ Ilustrasi
Undraw, Humaaans, Freepik, Illustrations, Open Doodles
Jangan pernah:
▪ Mengambil langsung dari Google langsung tanpa
kejelasan sumber (Google Ganking)
▪ Melakukan hotlinking ke gambar di suatu situs
▪ Menggunakan clip art dalam sebuah UI