Proses Desain UI

Graphics
Icons
Images
Color
 Layar Grafis
• Dapat menjadi teknik yang tepat dalam berkomunikasi dan
menarik perhatian pengguna
• Berfungsi untuk :
 Menarik perhatian
 Meningkatkan ketertarikan pada layar
 Mendukung interaksi dengan komputer
 Membantu mengatasi hambatan bahasa

Penggunaan GRAFIS dapat Meningkatkan

PEMBELAJARAN DAN INGATAN
 ICON
• Gambar yang sering digunakan untuk mewakili objek dan
tindakan, dimana pengguna dapat berinteraksi dan atau
memanipulasi
• Icon dapat berdiri sendiri atau berupa sekumpulan Icon yang disebut
Toolbar
• Fungsi Icon juga bisa sebagai Penguat Informasi yang penting, seperti
“Warning Icon” pada Message Box
 Faktor-Faktor dalam Penggunaan Icon

Jelas dan
Familiar Simple Konsisten
Terbaca

Langsung Efisien Perbedaan Konteks

Kompleksitas
Ekspektasi Tugas
Contoh Icon
 Icon yang Sukses

Jelas Tetap
Terlihat
Terlihat terlihat apa dikenali
baik dalam
berbeda yang akan walau lebih
warna
dari yang dilakukan kecil
hitam dan
lainnya atau yang daripada
putih
diwakilinya 16 pixels
Icon yang sering digunakan
 Memilih Icon
Menggunakan Icon yang sudah
tersedia

Gunakan gambar untuk kata

benda, bukan kata kerja

Gunakan gambar tradisional

Pertimbangkan pengguna
norma-norma budaya dan sosial
 Memilih Warna
• Warna menambah dimensi atau realitas untuk kegunaan
layar
• Warna dapat menarik perhatian karena mempengaruhi mata
seseorang
• Menekankan organisasi • Menganggu dan
logis dari informasi Melelahkan secara visual
• Menfasilitasi diskriminasi • Merusak kegunaan sistem
komponen layar
• Menekankan perbedaan
antar unsur
• Membuat tampilan lebih
menarik dan atraktif

Digunakan Digunakan
dengan Benar dengan Salah
 Apakah Warna Itu?
• Hasil dari stimulasi reseptor mata yang
menerima gelombang cahaya
• Warna Primer:
Red
Green
Blue
 Warna Sekunder
• Campuran dari dua warna primer dalam
sebuah ruang warna
 RGB vs CMYK

CMY
RGB
K
Model warna
berbasis
Model warna pengurangan
pencahayaan sebagian
gelombang
cahaya

Digunakan oleh Umumnya

media elektronik digunakan untuk
(monitor komputer, pencetakan
scanner, televisi) berwarna
Perbedaan RGB dan CMYK
 Kegunaan Warna
Menggunaka
Membantu Kode Visual
n Warna
Format Layar Identifikasi
untuk:
Komponen layar
Realistis yang
Mengelompokkan
menggambarkan
elemen
Struktur logis dari obyek alam
ide, proses atau
urutan

Sumber Informasi
Menyorot suatu
informasi agar Meningkatkan daya
terlepas dari tarik layar
informasi lainnya Status Informasi
 Berhati-hatilah

“Kurang Menggunakan
warna akan berdampak
Lebih Buruk daripada Tidak
Menggunakan
warna sama sekali”
Contoh Penggunaan Warna yang
bermasalah
Kombinasi Foreground dan
Background yang Efektif
 Daftar Pustaka
1. Galitz, W. O., 2007, The Essential Guide to User Interface
Design an Introduction to GUI Design Principles and
Techniques, Third Edition, John Wiley Sons, Inc
2. Tidwel, J., 2011, Designing Interfaces, Second Edition,
Sebastopol, CA, USA: O’Reilly Media, Inc.