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
Media komunikasi visual yang ditampilkan
dalam bentuk gambar

● “Look & Feel” bagian dari Interface.

● Apa yang dihadapi seseorang pertama
membuka aplikasi.
○ Penyampaian sebuah kesan, suasana hati
Filosofi-filosofi Desain
○ Unsur-unsur visual ekonomi
○ Sedikit adalah lebih (simplisitas/kesederhanaan)
○ Jelas, terorganisasi baik
Elemen-elemen Ekonomi Visual
● Makin sedikit makin baik
● Memperkecil batasan-batasan dan mempertajam skema, serta
batasan-batasan antar bagian

● Mengurangi ketidak aturan

● Meminimalkan sejumlah kontrol-kontrol
Filosofi-filosofi Desain
○ Unsur-unsur visual ekonomi
○ Sedikit adalah lebih (simplisitas/kesederhanaan)
○ Jelas, 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.

○ Jika kamu membuat interface untuk

aplikasi toko buku, anda bisa
meniru orang berjalan mengelilingi
toko buku.
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.
○ Simetris dan Seimbang.
○ Memperjelas pesan yang diberikan.
○ Memberikan relax pada mata dalam menatap elemen-elemen saat beraktifitas.
○ Menawarkan kesederhanaan, enak dilihat , berkelas, jelas
Prinsip Desain Grafis - Clarity (Kejelasan)
Prinsip Desain Grafis - Clarity (Kejelasan)
Prinsip Desain Grafis - Konsistensi
● Dalam susunan, warna,
gambar, icon, tipografi,
teks, …
● Dalam layar, perpindahan
antar layar satu ke layar
lainnya.
● Konsisten pada desain
interface yang dirancang
Prinsip Desain Grafis - Alignment
● Dunia barat
○ Dimulai dari kiri atas
● Memperindah tampilan

● Grids
○ (Yang tersembunyi) garis horizontal dan garis verticaluntuk
membantu menempatkan komponen jendela

○ Menghubungkan apapun yang ingin ditampilkan menjadi

terhubung
○ Mengelompokan item dengan logis
○ Memperkecil jumlah kontrol, mengurangi kacauatau
ketidak rapihan dalam pengetikan.
Prinsip Desain Grafis - Alignment (Contoh GRID)
Prinsip Desain Grafis - Alignment (Contoh GRID)
Prinsip Desain Grafis - Alignment (Contoh ALIGNMENT)
● Posisi : Kiri, tengah, atau kanan
● Pilih salah satu, gunakan di
semua tempat
● Pengguna baru sering
menggunakan posisi Center
dalam pengetikan.
Prinsip Desain Grafis - Proximity
● Kerapatan item satu sama lain
menunjukan keterhubungan antar
item.

● Adanya jarak menunjukan tidak

ada keterhubungan.
Prinsip Desain Grafis - Contrast
● Menarik perhatian
● Mendukung skimming
● Mendukung semua item dalam interface

● Dapat digunakan untuk membedakan kontrolaktif

● mengevaluasi item yang paling penting di interface, beri
highlight
● Penggunaan bidang geometris untuk membantu
keteraturan interface.
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 dilihat dan
dapat dibedakan

○ Hindari penggunaan semua huruf besar

○ Kombinasi huruf besar dan kecil mempercepat
proses membaca
● mudah dibaca
Tipografi
Fonts
Fonts
Baris Petunjuk

● Gunakan tipe Serif untuk badan teks; sans serif untuk headline
○ Gunakan 1-2 fonts/typeface (maks 3)
○ Penggunaan jenis huruf : normal, italic, dan bold
○ Jangan pernah gunakan normal, italic, capital untuk sebagian besar
teks

○ Gunakan maksimal 1-3 jenis ukuran

○ Perhatikan warna dari background teks
Font Control
Color
● Proses terlihatnya warna karena adanya cahaya yang menimpan suatu
benda, dan benda tersebut memantulkan cahaya ke mata (retina) kita
hingga terlihat warna.
Color
● Atribut warna
○ Hue
■ Nama dari warna : merah, hitam, dll
○ Saturation
■ Cerah atau suramnya warna
○ Nilai
■ Terang gelapnya warna.
Color
Garis –garis pedoman warna

● Untuk background pakai warna gelap

● Pilih warna latar depan yang cerah (seperti: putih, hijau tebal, dll)
● Hindari menggunakan warna coklat dan hijau sebagai 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.
Desain Icon
● Merancang Tugas
● Menampilkan objek atau aksi dengan tata cara yang
mudah dikenali dan diingat

● Batasi jumlah dari icon-icon yangberbeda.

● Icon dimunculkan pada latar belakang.
● Pastikan icon yang dipilih terlihat lebih terang
● Gunakan symbol yang berbeda untuk setiap icon
TERIMA KASIH