DESAIN. Interaksi Manusia & Komputer

Transkripsi

1 DESAIN Interaksi Manusia & Komputer

2 Course Overview Design Grafis Filosofi Desain Prinsip-prinsip Desain Grafis Unsur-unsur visual ekonomi Teknik-teknik kode Tifografi Fonts Warna Desain icon

3 Desain Grafis Look & Feel porsi dari sebuah tampilan. Apa yang dihadapi seseorang pada awalnya Penyampaian sebuah kesan, suasana hati

4 Filosofi-filosofi Desain Pilihan pribadi : Unsur-unsur visual ekonomi Sedikit adalah lebih (simplisitas/kesederhanaan) Bersih, terorganisasi baik

5 Prinsip-prinsip Desain Grafis Metafora Clarity (kejelasan) Konsistensi Alignment (kelurusan) Proximity (kedekatan) Kontras

6 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.

7 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

8 Prinsip Desain Grafis - Clarity (Kejelasan)

9 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!

10 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

11 Prinsip Desain Grafis - Alignment (Contoh GRID)

12 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

13 Prinsip Desain Grafis - Proximity Item yang menutup bersama-sama nampak mempunyai suatu hubungan Jarak tidak menyiratkan hubungan

14 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

15 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

16 Teknik Pengkodean Blinking Bagus untuk menarik perhatian, tapi penggunaanya masih sedikit Reserve video, Bold Bagus untuk membuat sesuatu Penggunaannya juga masih sedikit

17 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)

18 Tipografi

19 Fonts

20 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

21 Font Control

22 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 nilai masing-masing merah (red), hijau (green), biru (blue) R: 170 G:43 B: 211 Gunakan untuk suatu tujuan, tidak hanya menambahkan beberapa warna

23 Color Atribut warna Hue Warna asli, pigmen Saturation Kemurnian relatif, kecerahan, atau intensitas warna Nilai Terang atau gelap warna

24 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.

25 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)

26 Color

27 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.

28 TERIMA KASIH