Dindaprasetia@staff.gunadarma.ac.id DESAIN.

Presentasi berjudul: "Dindaprasetia@staff.gunadarma.ac.id DESAIN."— Transcript presentasi:

1 DESAIN

2 Pendahuluan 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.

3 Rancangan Dokumentasi
Membuat sketsa pada kertas Menggunakan peranti prototipe GUI (Graphic User Interface) Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela lainnya Menggunakan peranti bantu yang disebut CASE (Computer-Aided Software Engineering)

4 Dasar Pembuatan Desain
Tugas user Kemampuan user Kebutuhan user Konteks (berkaitan dengan sistemnya)

5 Filosofi Desain Elemen visual ekonomi Less is more (tidak berlebihan)
Bersih, terorganisasi dengan baik

6 Prinsip Desain Grafik (1)
Metafora (kiasan) Aplikasi dari nama atau deskripsi istilah obyek lain yang tidak dapat diartikan secara harafiah (jelas/nyata)

7 Contoh Metaphora Metapora Desktop (Kiasan Desktop)
Jika kamu membuat interface untuk aplikasi bahan makanan, mungkin kamu dapat menirukan seorang yang sedang melewati lorong toko dengan gerobak/trolly.

8 Prinsip Desain Grafik (2)
Clarity (kejelasan) Harus ada alasan yang kuat mengapa kita menggunakan suatu elemen dalam suatu interface. Buatlah alasan yang sedetail dan se-spesific mungkin

9 Contoh Clarity Pemilihan Ruang yang putih Menuntun mata kita.
Menyediakan simetri dan menyeimbangkan ketika kita menggunakannya. Memperkuat tubrukan (pengaruh yang kuat) terhadap pesan. Mempersilahkan mata untuk beristirahat di antara elemen pada saat beraktivitas. Membiasakan kita untuk menaikkan kesederhanaan, keanggunan, berkelas, kehalusan budi bahasa

10

11 Prinsip Desain Grafik (3)
Consistency (ketetapan) Konsisten dalam layout, warna, image, icon, typografi, teks, dll. Konsisten baik dalam layar dan antar layar Selalu ada metaphora dimanapun Platform dapat memiliki satu gaya pengarahan

12 Contoh Consistency

13 Prinsip Desain Grafik (4)
Aligment (Perataan) Untuk perataan gunakan rata kiri . Gaya negara-negara Barat dimulai dari kiri atas Mengijinkan mata untuk menguraikan tampilan dengan lebih mudah Grids Garis-garis vertikal dan horizontal (tersembunyi) membantu mengalokasikan komponen-komponen jendela Meratakan elemen yang berkaitan Kelompokkan item-item berdasarkan logika Meminimalisasi jumlah kontrol, mengurangi kekacauan

14 Contoh Grids

15 Prinsip Desain Grafik (5)
Proximity (Kedekatan) Item-item yang berkaitan ditampilkan bersama-sama Jarak mengimplikasikan tidak ada hubungan

16 Contoh Proximity

17 Prinsip Desain Grafik (6)
Contrast (Keserasian tampilan) Membuat pengguna tertarik Memandu mata pengguna melihat keseluruhan interface Memperkuat fokus Membedakan kontrol yang aktif Mengatur item yang paling penting

18 Contoh Contrast

19 Penghematan Elemen Visual
Gunakan elemen visual Seperlunya Minimalkan border-border dan outline yang berat Minimalkan ketidak-rapihan Minimalkan jumlah dari kendali

20 Teknik Koding Blinking (berkelap-kelip) Reverse Video, bold
Baik untuk menangkap atensi tetapi gunakan dengan hemat Reverse Video, bold Baik untuk membuat sesuatu sangat menonjol Sekali lagi gunakan dengan hemat

21 Tipografi Karater-karakter dan simbol-simbol harus mudah dinyatakan dengan jelas dan dapat dibedakan. Menghindari penggunaan huruf besar yang berlebihan. Dari penelitian menemukan bahwa dengan mencampur huruf akan meningkatkan kecepatan membaca. Mudah dibaca Memudahkan membaca dengan teks yang banyak. Mempunyai sifat yang mudah dibaca Memudahkan untuk mengenali teks

22 Contoh Tipografi

23 Font Ukuran huruf yang digunakan 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 point ukuran hati-hati dengan penggunaan warna teks untuk warna

24 Font Control Mana yang kamu pilih?

25 Warna (1) Atribut warna Hue (corak) Saturation (penjenuhan)
Native color, pigment Saturation (penjenuhan) Kebersihan relatif, keadaan terang, atau mengintensifkan warna Value (nilai) Keadaan terang atau gelap dari warna

26

27 Warna (2) Petunjuk pewarnaan
Tampilkan image-image warna pada latar belakang hitam Pilih warna terang yang mudah dilihat Hindari coklat dan hijau sebagai warna-warna untuk latar belakang

28 Warna (3) Pastikan warna-warna foreground (tampilan luar)kontras dalam keadaan terang dan hue dengan warna-warna background Gunakan warna dengan hemat—Desain dalam b/w kemudian tambahkan warna yang sesuai Gunakan warna untuk mengambarkan atensi, komunikasi organisasi, untuk mengindikasi status, untuk mendirikan hubungan-hubungan Hindari penggunaan warna dalam cara-cara yang berkaitan dengan non tugas

29 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

30 Hampir semua icon-iconmu disertai dengan teks label
Apa fungsi setiap icon di bawah ini?