DESAINInteraksi 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

FontsBaris 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

ColorGaris – 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.

ColorGaris – 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