1 DESAIN GRAFIS Salah satu kriteria penting dari sebuah antar muka adalah tampilan yang menarik. Perancang tampilan selain harus mempunyai jiwa seni yang memadai, juga harus mengerti selera pengguna secara umum Perlu dokumentasi untuk semua pekerjaan yang dilakukan. Dokumentasi yang baik, dapat mengubah rancangannya apabila rancangan tersebut mengalami perubahan disesuaikan dengan usulan dari pengguna atau karena alasan lain. Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa cara : a. Membuat sketsa pada kertas b. Menggunakan peranti prototipe GUI (Graphic User Interface) c. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela lainnya d. Menggunakan peranti bantu yang disebut CASE (Computer- Aided Software Engineering) Desain dibuat berdasarkan pada : - Tugas user - Kemampuan user - Kebutuhan user - Konteks (berkaitan dengan sistemnya)
2 Filosofi Desain Kesukaan personal : o Elemen-elemen visual ekonomi o Less is more (kurang lebih) o Bersih, terorganisasi dengan baik Prinsip Desain Grafik Metaphor (kiasan) o Aplikasi dari nama atau deskripsi istilah obyek lain yang tidak dapat diartikan secara harafiah (jelas/nyata) Clarity (kejelasan) o Harus ada alasan yang kuat mengapa kita menggunakan suatu elemen dalam suatu interface. Consistency (ketetapan) o Konsisten dalam layout, warna, image, icon, typografi, teks, dll. o Konsisten baik dalam layar dan antar layar o Selalu ada metaphora dimanapun o Platform dapat memiliki satu gaya pengarahan Aligment (Perataan) o Untuk perataan gunakan rata kiri. Gaya negara-negara Barat dimulai dari kiri atas o Mengijinkan mata untuk menguraikan tampilan dengan lebih mudah o Grids Garis-garis vertikal dan horizontal (tersembunyi) membantu mengalokasikan komponen-komponen jendela Meratakan yang berkaitan Kelompokkan item-item berdasarkan logika Meminimalisasi jumlah kontrol, mengurangi kekacauan
3 Proximity (Kedekatan) o Item-item yang berkaitan ditampilkan bersama-sama o Jarak mengimplikasikan tidak ada hubungan Contrast (Keserasian tampilan) o Membuat pengguna tertarik o Memandu mata pengguna melihat keseluruhan interface o Memperkuat fokus o Membedakan kontrol yang aktif o Mengatur item yang paling penting Penghematan Elemen Visual Gunakan elemen visual Seperlunya Minimalkan border-border dan outline yang berat Minimalkan ketidakrapihan Minimalkan jumlah dari kendali Teknik Koding Blinking (berkelap-kelip) o Baik untuk menangkap atensi tetapi gunakan dengan hemat Reverse Video, bold o Baik untuk membuat sesuatu sangat menonjol o Sekali lagi gunakan dengan hemat Tipografi Karater-karakter dan simbol-simbol harus mudah dinyatakan dengan jelas dan dapat dibedakan. o Menghindari penggunaan huruf besar yang berlebihan. o Dari penelitian menemukan bahwa dengan mencampur huruf akan meningkatkan kecepatan membaca. Mudah dibaca o Memudahkan membaca dengan teks yang banyak. Mempunyai sifat yang mudah dibaca o Memudahkan untuk mengenali teks
4 Fonts Ukuran huruf yang digunakan Warna (atribut, asosiasi) Atribut warna o Hue (corak) - Native color, pigment o Saturation (penjenuhan) - Kebersihan relatif, keadaan terang, atau mengintensifkan warna o Value (nilai) - Keadaan terang atau gelap dari warna WARNA MAKNA POSITIF MAKNA NEGATIF Merah Kekuatan, energi, tenaga, hasrat, cinta. Dengan sedikit memberikan warna merah bisa menimbulkan gairah, membangkitkan semangat, mendorong keinginan. Bahaya, perang, kekejaman, kekerasan, api, darah. Terlalu banyak warna merah bisa disangka terlalu agresif. Merah Muda Orange Kuning Hijau Biru Kewanitaan (feminim), keremajaan (masa muda). Kehangatan, bersemangat, ceria, keseimbangan, musim gugur, menimbulkan getaran. Sinar matahari, emas, kekayaan, keberuntungan, kehidupan. Alam, lingkungan, hidup, pertumbuhan, stabil, santai kesuburan, harapan. Kepercayaan, kesetiaan, ketenangan, kedamaian, Naif, kelemahan, kekurangan Meminta dan mencari perhatian Tidak jujur, pengecut, cemburu, iri hati, penghianatan, penipuan, kebohongan, resiko, sakit Kecemburuan, nasib buruk, iri hati, dengki. Merupakan warna yang aman dipakai untuk
5 Ungu Coklat Abu abu Putih Hitam ketulusan, kesejukan, air, awan, harmoni, kebersihan, konservatif, percaya diri, penyembuhan. Kebangsawanan, perubahan, spiritual. Tanah, bumi, netral, hangat, keamanan, perlindungan. Modern, cerdas, bersih, kokoh, masa depan, intelektual. Kesucian, kebersihan, kemurnian, kesederhanaan, damai, kebaikan, disiplin, perawan, perkawinan, musim dingin, musim salju. Kekuatan, keanggunan, kemewahan, misteri, kecanggihan, kemakmuran, kepuasan, pengalaman, keras, kokoh, sangat kuat. Kesedihan, kedinginan, depresi, penurunan vitalitas. Kesombongan, keangkuhan, kejam, kasar, duka cita, royal, rumit Tumpul, kotor, membosankan. Umur tua, kesedihan, bosan. Kematian ( budaya timur ), dingin, mandul, steril, klinik, hampa. Kematian ( budaya barat ), takut, setan, kesedihan, duka cita, marah, anonim, penyesalan. Petunjuk pewarnaan o Tampilkan image-image warna pada latar belakang hitam o Pilih warna terang yang mudah dilihat o Hindari coklat dan hijau sebagai warna-warna untuk latar belakang
6 o Pastikan warna-warna foreground (tampilan luar)kontras dalam keadaan terang dan hue dengan warna-warna background o Gunakan warna dengan hemat Desain dalam b/w kemudian tambahkan warna yang sesuai o Gunakan warna untuk mengambarkan atensi, komunikasi organisasi, untuk mengindikasi status, untuk mendirikan hubungan-hubungan o Hindari penggunaan warna dalam cara-cara yang berkaitan dengan non tugas Desain Icon Mempresentasikan obyek atau tindakan yang mudah dikenal secara luas Mewakili obyek atau tindakan dalam cara yang lazim dan dikenali Batasan jumlah icon-icon yang berbeda Buat icon yang menonjol dari latar belakang Pastikan bahwa icon-icon yang telah diseleksi satu persatu secara jelas dapat dilihat jika dikelilingi dengan icon-icon yang tidak terseleksi. Buat setiap icon berbeda Buat anggota-anggota icon-icon yang harmonis dari kumpulan icon Hindari perincian yang berlebihan