DESAIN

Interaksi Manusia & Komputer

Course Overview
● Design Grafis
● Filosofi Desain
● Prinsip-prinsip Desain Grafis
● Unsur-unsur visual ekonomi
● Teknik-teknik kode
● Tifografi
● Fonts
● Warna
● Desain icon
Desain Grafis
● “Look & Feel” porsi dari sebuah tampilan.
● Apa yang dihadapi seseorang pada awalnya
○ Penyampaian sebuah kesan, suasana hati
Filosofi-filosofi Desain
● Pilihan pribadi :
○ Unsur-unsur visual ekonomi
○ Sedikit adalah lebih (simplisitas/kesederhanaan)
○ Bersih, terorganisasi baik
Prinsip-prinsip Desain Grafis
● Metafora
● Clarity (kejelasan)
● Konsistensi
● Alignment (kelurusan)
● Proximity (kedekatan)
● Kontras
Prinsip Desain Grafis - Metafora
● Mencoba mempresentasikan
dan memberikan hubungan
yang lebih familiar dengan
elemen visual.
○ Contoh : Metapora Desktop (Kiasan
Desktop)
○ Jika kamu membuat interface untuk
aplikasi bahan makanan, mungkin
kamu dapat menirukan seorang
yang sedang melewati toko dengan
gerobak.
Prinsip Desain Grafis - Clarity (Kejelasan)
● Setiap elemen di dalam interface sebaiknya mempunyai alasan mengapa elemen tersebut ada.
○ Buatlah alasan yang sedetail dan se-spesific mungkin
● Less is more
● White space
○ Menuntun mata kita.
○ Menyediakan simetri dan menyeimbangkan ketika kita menggunakannya.
○ Memperkuat impact (dampak) terhadap pesan.
○ Mempersilahkan mata untuk beristirahat di antara elemen pada saat beraktivitas.
○ Membiasakan kita untuk meningkatkan kesederhanaan, keanggunan, berkelas,
kehalusan budi bahasa
Prinsip Desain Grafis - Clarity (Kejelasan)
Prinsip Desain Grafis - Konsistensi
● Dalam susunan, warna,
gambar, icon, tipografi,
teks, …
● Dalam layar, tampilan layar
● Tampilan yang tetap
dimana saja
● Dapat mempunyai
panduan dalam penentuan
style
○ Ikutilah !
Prinsip Desain Grafis - Alignment
● Dunia barat
○ Dimulai dari kiri atas
● Mengijinkan mata untuk menguraikan (kalimat) pajangan dengan
lebih mudah
● Grids
○ (Yang tersembunyi) garis horizontal dan garis vertical untuk
membantu menempatkan komponen jendela
○ Membariskan hal-hal terkait
○ Menggolongkan item dengan logis
○ Memperkecil jumlah kendali, mengurangi kacau balau
● Grids - gunakan mereka
Prinsip Desain Grafis - Alignment (Contoh GRID)
Prinsip Desain Grafis - Alignment (Contoh ALIGNMENT)
● Kiri, tengah, atau kanan
● Pilih salah satu, gunakan di
semua tempat
● Orang sering fokus pada hal-hal
baru
○ Tidak ada definisi, calm,
sangat formal
Prinsip Desain Grafis - Proximity
● Item yang menutup bersama-sama
nampak mempunyai suatu
hubungan
● Jarak tidak menyiratkan hubungan
Prinsip Desain Grafis - Contrast
● Menarik perhatian
● Mendukung skimming
● Mengambil keuntungan dari kontras untuk menambah
fokus atau untuk menguatkan suatu interface
● Dapat digunakan untuk membedakan kontrol aktif
● Dapat digunakan untuk dipasang item paling penting
○ Mengijinkannya untuk mendominasi
● Tanyakan diri anda apa yang merupakan item yang paling
penting di interface, beri highlight
● Penggunaan ilmu ukur (geometri)untuk membantu
pengurutan
Elemen-elemen Ekonomi Visual
● Makin sedikit makin baik
● Memperkecil batasan-batasan dan mempertajam skema, serta
batasan-batasan antar bagian
● Mengurangi kekacauan
● Meminimalkan sejumlah kontrol-kontrol
Teknik Pengkodean
● Blinking
○ Bagus untuk menarik perhatian, tapi penggunaanya masih sedikit

● Reserve video, Bold

○ Bagus untuk membuat sesuatu
○ Penggunaannya juga masih sedikit
Tipografi
● Karakter dan symbol-simbol harus mudah dinotasikan
dan dapat dibedakan
○ Hindari penggunaan semua huruf besar
○ Pelajari cara menemukan kombinasi huruf untuk
meningkatkan kecepatan membaca
● Kemampuan membaca
○ Seberapa mudah jika membaca tulisan dalam
jumlah banyak
● Sifat mudah dibaca
● Seberapa mudah untuk mengidentifikasi teks
● Typefaces = font (tidak mirip, tapi hampir mirip)
Tipografi
Fonts
Fonts
Baris Petunjuk

● Gunakan tipe Serif untuk format yang panjang, teks tambahan; sans serif
untuk headline
○ Gunakan 1-2 fonts/typeface (maks 3)
○ Penggunaan normal, italic, dan bold = OK
○ Jangan pernah gunakan normal, italic, capital untuk sesi teks yang
besar
○ Gunakan maksimal 1-3 ukuran point
○ Hati-hati dengan penggunaan warna teks untuk warna
Font Control
Color
● Kita melihat dunia melalui model warna reflektif
○ Cahaya muncul ke permukaan dan dipantulkan ke mata kita - Sifat
warna mendikte permukaan
○ Printer
● Warna pada layar mengikuti model yang dipancarkan
● Pada monitor, biasanya skema RGB
○ 0-255 nilai masing-masing merah (red), hijau (green), biru (blue)
○
○ R: 170 G:43 B: 211
○ Gunakan untuk suatu tujuan, tidak hanya menambahkan beberapa
warna
Color
● Atribut warna
○ Hue
■ Warna asli, pigmen
○ Saturation
■ Kemurnian relatif, kecerahan, atau intensitas
warna
○ Nilai
■ Terang atau gelap warna
 Color
Garis – garis pedoman warna

● Perlihatkan warna gambar pada latar belakang berwarna hitam.

● Pilih warna latar depan yang cerah (seperti: putih, hijau tebal, dll)
● Hindari menggunakan warna coklat dan hijau sebagai warna - warna latar belakang.
● Pastikan warna – warna latar depan serasi dengan terang dan warna – warni pada warna – warna latar belakang.
● Gunakan warna dengan hemat → Rancang pada warna hitam atau putih kemudian tambahkan warna yang cocok.
● Gunakan warna untuk menarik perhatian, bicarakan dengan kelompok, untuk mengindikasikan status, dan untuk
membuat hubungan.
● Hindari menggunakan warna pada tugas – tugas yang tidak ada relasi.
Color
Garis – garis pedoman warna

● Warna, baik untuk membantu dalam pencarian.

● Jangan gunakan warna tanpa beberapa isyarat yang jelas, misalnya:
○ Kebutaan akan warna
○ Monitor – monitor yang hanya satu warna
○ Mempertinggi pertunjukkan kode yang berlebihan.
● Jangan sering berubah – ubah dalam menyatukan warna dari pekerjaan dan kebudayaan.
● Batasi kode untuk 8 warna – warna terang ( tetapi 4 lebih baik )
● Hindari menggunakan warna biru yang penuh untuk tulisan atau pun garis – garis yang kecil dan tipis.
● Gunakan warna - warni pada warna hitam atau putih ataupun abu – abu, atau dapat juga gunakan warna hitam
atau putih pada warna – warna lain.
● Untuk memperlihatkan perbedaannya, gunakan warna - warna yang tingkat keserasiaannya tinggi ( dan vice
versa)
Color
Desain Icon
● Merancang Tugas
● Merepresentasikan objek atau aksi dengan cara yang
mudah dikenal dan bersahabat
● Batasi jumlah dari icon-icon yang berbeda.
● Membuat icon menonjol daripada background
● Menjamin bahwa icon yang terpilih terlihat jelas
disekitar icon-icon yang tak terpilih.
● Membuat setiap icon berbeda
● Membuat kerukunan anggota icon-icon dari keluarga
icon
● Menghindari penjelasan yang berlebihan.
TERIMA KASIH