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
kehalusan budi bahasa
meningkatkan
kesederhanaan,
keanggunan,
berkelas,
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 pengurutan
ilmu
ukur
(geometri)untuk
membantu
Elemen-elemen Ekonomi Visual ●
Makin sedikit makin baik
●
Memperkecil
batasan-batasan
dan
batasan-batasan antar bagian ●
Mengurangi kekacauan
●
Meminimalkan sejumlah kontrol-kontrol
mempertajam
skema,
serta
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
