NPM : 2A113146
Kelas : 2KB03
TUGAS INTERAKSI MANUSIA DAN KOMPUTER
DESIGN
Pokok Bahasan :
· Prinsip Design
· Ide Membuat Design
· Contoh design
· Design Grafik
DESIGN
Design
adalah salah satu kriteria penting
dari sebuah antarmuka adalah tampilan yang
menarik. Seorang pengguna,
apalagi pengguna baru,
biasanya tertarik untuk
mencoba sebuah program
aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada di
hadapan matanya. Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam
beberapa cara:
- Membuat sketsa pada kertas
- Menggunakan piranti prototype GUI
- Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain,
- Menggunakan peranti bantu yang disebut CASE (Computer Aided Software Engineering)
Prinsip-prinsip Desain
Keselarasan (Harmoni)
Kesealarasan merupakan prinsip desaign yang diartikan
sebagai keteraturan tatanan diantara bagian-bagian suatu karya. Keselarasan
dalam desain merupakan pembentukan unsur-unsur keseimbangan, keteraturan,
kesatuan dan perpaduan masing-masing saling mengisi dan menimbang, Keselarasan
(harmoni) bertindak sebagai factor pengaman untuk mencapai keserasian seluruh
rancangan penyajian.
Kesebandingan (Proporsi)
Kesebandingan (proporsi)
merupakan hubungan perbandingan
antara bagian dengan bagian lain atau bagian dengan elemen keseluruhan.
Kesebandingan dapat dijangkau dengan menunjukkan hubungan antara:
Suatu elemen dengan elemen yang
lain, Elemen bidang ruang dengan dimensi bidang ruangnya,
Dimensi bidang ruang itu sendiri. Dalam grafis komunikasi, semua unsur berperan menentukan
proporsi, seperti hadirnya warna cerah yang diletakkan pada bidang ruang sempit
atau kecil.
Irama (Ritme)
Irama (ritme) dapat kita rasakan.
Ritme terjadi karena adanya pengulangan pada bidang ruang yang menyebabkan kita
dapat merasakan adanya perakan, getaran, atau perpindahan dari unsure satu ke
unsure lain. Gerak dan pengulangan tersebut mengajak
mata mengikuti arah gerakan yang terjadi pada sebuah karya.
Keseimbangan (Balance)
Tujuan utama sebuah karya diskomvis
adalah menarik dilihat. Disain komunikasi visual sebagai media komunikasi yang
bertujuan untuk mentransferi informasi secara jelas sekaligus estetis memerlukan
keadaan keseimbangan pada unsur-unsur yang ada di dalamnya. Bentuk keseimbangan yang sederhana adalah keseimbangan
simetris yang terkesan resmi
atau formal, sedangkan
keseimbangan asimetris terkesan informal dan lebih dinamis. Keseimbangan
dipengaruhi berbagai faktor, antara lain faktor tempat posisi suatu elemen, perpaduan antar elemen, besar
kecilnya elemen, dan kehadiran elemen pada luasnya bidang.
Keseimbangan akan terjadi bila elemen-elemen ditempatkan
dan disusun dengan rsaserasi atau sepadan. Dengan kata lain bila bobot elemen-elemen itu setelah
disusun memberi kesan mantap dan tepat pada tempatnya.
Penekanan (Emphasis)
Dalam setiap bentuk komunikasi ada
beberapa bahan atau
gagasan yang Lebih perlu ditampilkan daripada yang lain. Tujuan utama dalam pemberian penekanan (emphasis)
adalah untuk mengarahkan pandangan pembaca pada suatu yang ditonjolkan. Emphasis dapat
dicapai misalnya mengganti ukuran, bentuk, irama dan arab
dari unsur-unsur karya desain.
Desain dibuat berdasarkan pada:
- Tugas user
- Kemampuan user
- Kebutuhan user
- Konteks
- Tugas user
- Kemampuan user
- Kebutuhan user
- Konteks
Prinsip-prinsip desain grafis
Metaphor
(Metafora), adalah aplikasi dari nama
atau deslaipsi istilah objek
lain yang tidak dapat diartikan secara barafiah. Mengbubungkan
presentasi dan elemen-elemen visual dengan item-item yang berkaitan. Sebagai contoh
yaitu metafora tampilan desktop
Contoh:
Gambar. Tampilan
metfora desktop
Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal mengapa rita menggunakan
setiap elemen yang berada dalam suatu interface yang kita buat Penggunaan yang Sedikit akan lebih baik.
WhiteSpace:
- Berperan penting bagi mata.
- Menyediakan simetris dan keseimbangan melalui penggunaannya.
- Memperkuat dampak pesan.
- Membiarkan mata beristirahat dari setiap kegiatan elemen.
- Digunakan untuk mengembangkan kesederhanaan, keanggunan, kemewahan, dan kemurnian.
Contoh:
Gambar.
Tampilan white space
Consistency (Ketetapan)
Konsistensi dalam tampilan, pewrnaan, gambar, ikon, typography ,teks, dan Iain-lain. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga
Setiap platform mungkin memliki panduannya.
Contoh:
Gambar. Tampilan web dengan consistency
Alignment (Perataan)
Untuk: perataan dapat
digunakan rata kiri, kanan atau
tengah. Dunia barat dimulai dari kiri atas.
Mengijinkan mata untuk
menguraikan tampilan dengan lebih mudah.
Grids:
- Garis horisontal dan vertikal (tersembunyi) untuk: membantu mengalokasikan komponen-komponen jendela.
- Meratakan konteks yang berkaitan.
- Mengelompokan item-item secara logis.
- Meminimalisasi banyaknya kendali, mengurangi kekacauan.
Gunakan
grids
Gambar. Penggunaan grid
Proximity
Item-item yang berikaitan ditampilkan bersama. Karena
jarak yang jauh mengimplitasikan bahwa tidak ada hubungan antar item-item
tersebut.
Gambar.
Untuk proximity
Contranst (keserasian tampilan)
Membuat anda tertarik memandu mata Anda melihat
keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus
atau untuk memperkuat suatu interface.
Contrast dapat digunakan untuk membedakan aktifitas
kendali. Juga dapat digunakan utnuk men-sel item yang paling utama. Item yang
paling utama diberi highlight.
Gunakan goemetri untuk membantu pengurutan.
Gambar. Tampilan web contranst
Konsep warna
Kita melihat dunia melalui reflektif model warna :
-
Cahaya mengenai suatu
permukaan dan dipantulkan ke mata kita
-
Printer
Pada monitor, umumnya berdasarkan skema RGB :
- Masing-masing warna
merah;hijau; biru mempunyai nilai 0 – 255 - R =170; G = 43; B= 211
Gunakan warna untuk suatu tujuan jangan hanya untuk
membuat tampilan lebih berwarna :
Atribut warna :
-
Hue
warna asli, pigmen - Saturation relative lebih asli, lebih terang, atau intensitas warna
- Value tingkat kegelapan atau terangnya suatu cahaya.
Hal-hal yang harus diperhatikan dalam penggunaan warna
:
1.
Tampilkan gambar berwarna
pada warna latar hitam 2. Pilih warna latar delapan yang terang (putih, cyan, dll)
3. Hindari warna coklat dan hijau sebagai warna latar
4. Pastikan bahwa warna latar depan dan warna latar belakang serasi baik segi
brightness maupun hue
5. Gunakan warna sedikit mungkin–pada rancangan hitam-putih tambahkan warna yang
sesuai.
6. Gunakan warna untuk menarik perhatian, menghubungkan organisasi, menyatakan
status, atau untuk mengadakan suatu hubungan.
7. Hidari penggunaan warna yang tidak diinginkan oleh user.
8. Pewarnaan sangat baik untuk mendukung pencarian.
Pasangan
warna
Asosiasi warna
-
Merah : panas, peringatan,
agresi, cinta - Pink : wanita, cute kembang gulan
- Oranye : musim semi, hangat, Halloween
- Kuning : gembira, perhatian, sukacita
- Coklat : hangat, musim gugur, kotor, bumi
- Hijau : lush, pastural, bingung
- Ungu : kekayaan, lembut, “barney”.
Parancangan ikon
- Merepresentasikan object
atau tindakan yang mudah dikenal secara luas - Jumlah icon yang berbeda terbatas
- Ikon lebih ditonjolkan dari latar belakang
- Pastikan bahwa ikon-ikon yang terpilih dapat terlihat jelas di antara ikon-ikon yang tidak
terpilih
- Buat setiap ikon berbeda
- Buat ikon sesuai dengan ikon-ikon yang satu kelompok
- Hindari detail yang berlebihan
Gambar. Jenis-jenis ikon
Aspek ekonomi dari elemen-elemen visual
1.
Penggunaan yang sedikit
akan lebih baik 2. Minimalisasi ketebalan garis dan border, batasan antar sesi (gunakan whitespace)
Teknik pengkodean :
1.
Blinking (sangat cocok
untuk menarik perhatian, tapi gunakan sedikit mungkin. 2. Video yang diputar ulang, cetak tebal (sangat baik untuk membuat sesuatu yang ingin
ditonjolkan dan gunakan sedikit mungkin)
Sumber :
1. Buku Interaksi Manusia dan Komputer, karangan Sudarmawan & Dony Ariyus(Andi Offset)
2. http://ebook.gunadarma.ac.id/Interaksi-Manusia-komputer.pdf
3. http://id.wikipedia.org/wiki/Antarmuka_pengguna
