8 Prinsip Desain Grafis
Desain Grafis merupakan suatu porsi dari apa yang dilihat dan dirasakan pada tampilan suatu website. Desain grafis memiliki enam buah prinsip yang mendasar. Prinsip-prinsip tersebut adalah sebagai berikut :
1.Metaphor (Metafora)
Metaphor atau metafora adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan. Metafora akan membuat para pengunjung seolah-olah berada di tempat yang sebenarnya, atau bisa dikatakan juga bahwa metafora dibuat mirip seperti tempat yang dikunjungi. Contohnya, website suatu toko online yang memiliki metafora, dimana pengunjung dibawa ke tempat seolah-olah mereka benar ada di toko online tersebut.
2.Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal dan jelas mengapa menggunakan setiap elemen yang berada dalam suatu interface yang kita buat,contohnya dalam peletakan suatu button,pembuat harus memiliki alasan mengapa diletakkan di tempat tersebut. Penggunaan elemen yang lebih sedikit akan lebih baik. Penggunaan background berwarna putih dianjurkan untuk memimpin mata dan membuat mata tidak lelah dengan aktifitas elemen yang ada pada suatu website
3.Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography (model form yang digunakan pada suatu website), teks, dll. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya.
4.Alignment (Perataan)
Untuk perataan dapat digunakan rata kiri, kanan atau tengah. Pada umumnya suatu teks pada website dimulai dari kiri atas (left alignment), dimana left alignment akan mengijinkan mata untuk menguraikan tampilan dengan lebih mudah. Selain itu dengan menggunakan bantuan garis akan membantu dalam hal perataan. Sembunyikan garis horizontal dan vertical untuk membantu mengalokasikan komponen window/jendela. Garis juga membantu menghubungkan hal-hal yang berhubungan dan memudahkan perataannya.
5.Proximity
Item-item yang berkaitan ditampilkan bersama pasti memiliki hubungan karena jarak yang jauh mengimplikasikan bahwa tidak ada hubungan antara item-item tersebut.
6.Contrast (Keserasian Tampilan)
Keserasian tampilan akan membuat pengunjung web tertarik pada web tsb. Kontras juga dapat memandu mata pengunjung untuk melihat keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface. Kontras digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang paling utama diberi highlight. Dengan mempergunakan geometri dapat membantu pengurutan. Kontras juga mendukung skimming secara cepat..
7.Warna
Atribut Warna:
- Hue (corak) warna asli, pigmen
- Saturation (penjenuhan) relatif lebih asli, lebih terang, atau intensitas warna
- Value (nilai) tingkat kegelapan atau terangnya suatu cahaya
1. Tampilkan gambar berwarna pada warna latar hitam.
2. Pilih warna latar depan 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. Hindari penggunaan warna yang tidak diinginkan oleh user.
8. Pewarnaan sangat baik untuk mendukung pencarian.
Asosiasi Warna
- Merah panas, peringatan, agresi, cinta.
- Pink wanita, cute, kembang gula.
- Oranye musim semi, hangat, Halloween.
- Kuning gembira, perhatian, sukacita.
- Coklat hangat, musim gugur, kotor, bumi.
- Hijau lush, pastural, bingung.
- Ungu kekayaan, lembut, “Barney”.
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
♥Metaphor : Pada website Mandiri ditemukan unsur metaphor. Banner iklan dan pengumuman dibuat dengan menggunakan flash objek dan beberapa slide gambar yang interaktif. Tetapi unsur metaphor tersebut hanya sebagai media untuk masuk ke halaman lain dan hanya untuk mendeskripsikan beberapa informasi.
♥Clarity: disini cukup jelas, karena menggunakan warna yang tidak menyakiti mata cukup bervariasi sehingga tertarik untuk dilihat secara keseluruhan. Pada web MANDIRI memiliki white space atau background putih yang sangat membantu untuk membaca setiap informasi yang ada bagi pengunjung.yang berperan penting bagi mata, menyediakan simetris dan keseimbangan melalui penggunannnya, memeperkuat dampak pesan, di gunakan untuk mengembangkan kesederhanaan, keanggunan, kemewahan dan kemurnian. Tampilan awal pada Mandiri juga menarik karena kemurnian terdapat ikalan promosi dari Mandiri sehingga pengunjung tertarik untuk mengetahui penjelasannya.
♥Consistency : Konsistensi dari web MANDIRI cukup menarik, dalam hal tampilan, pewarnaan,ikon, serta typography yang digunakan. penggunaan tipe huruf dlm bank mandiri ini manggunakan tipe huruf Calibri untuk semua bentuk penulisannya, warna yang digunakan untuk tiap – tiap menu itu sudah consisten dengan tampilan menu – menu yang lain. Sehingga tidak membingungkan nasabah dalam membaca website Bank ini. Hanya saja menu pilihan pada tampilan web tidak terlalu jelas. Sedangkan typographynya sendiri dapat dilihat dengan penggunaan SEARCH (pencarian dan SELECT LANGUAGE (pemilihan bahasa) pada halaman utama web ini.
♥Aligment : Pada web MANDIRI menggunakan perataan yang dimulai dari kiri atas dan tengah seperti web pada umumnya. Penggunaan rata tengah terdapat pada kolom untuk login, sedangkan justify terdapat dalam menu – menu di dalamnya sehingga tidak ada penyusunan kata yang berantakan . Web ini juga menggunakan bantuan garis (grid) untuk menghubungkan hal-hal yang saling berkaitan dan berhubungan sehingga memudahkan perataan dan memudahkan pengunjung untuk mengambil kesimpulan dengan cepat karena pembuat web ini sudah menghubungkan hal-hal yang saling berkaitan. Disini penggunaan ukuran tulisannya kurang jelas karena ukurannya tersebut bisa dibilang kecil, sehingga menyulitkan bagi pengguna yang matanya kurang baik untuk dapat melihat dengan jelas.
♥Proximity : Pada web MANDIRI unsur Proximity sangat diperhatikan oleh pembuat web. Karena item-item yang ditampilkan saling berhubungan. Hal-hal yang saling berhubungan dibuat berdekatan sedangkan yang tidak berhubungan dibuatkan jarak yang jauh oleh pembuat web. jarak yang digunakan sama semua, jeda – jeda cukup jelas & teratur, tidak ada yang lebih atau kurang dalam jeda, untuk select item juga cukup jelas jedanya. Sehingga membuat tampilan web ini terlihat rapi dan mudah dibaca.
♥Contrast : untuk tampilannya disini standart dengan menggunakan latar belakang putih & penggunaan warna yang tidak terlalu gelap sehingga cukup enak untuk dilihat oleh pengguna. Tampilan contrast pada web MANDIRI tidak membuat para pembaca jenuh, karena keserasian warna maupun tulisannya cukup menarik. Penggunaan warna kuning pada web ini sangat mencolok sekali, memberi efek yang sangat terang. Tetapi pada dasarnya pemilihan warna pada web ini sudah sanagt bagus dan sesuai dengan mata pengguna sehingga pengguna tertarik untuk melihatnya.
♥Warna : bank mandiri menggunakan warna biru tua sebagai headernya, biru muda sebagai footernya, kuning untuk tab – tabnya warna abu – abu untuk tampilan login & putih untuk latar belakangnya. Warna biru pada web MANDIRI bermakna kepercayaan, kesetiaan, ketenangan, dan kedamaian. Dan warna kuning pada web MANDIRI bermakna sinar matahari, emas, kekayaan, keberuntungan dan kehidupan. Tampilan dua warna yang terdapat pada web MANDIRI cukup contrast dan enak dilihat karena tidak terdapat banyak warna sehingga menarik untuk dilihat.
♥Icon : disini bank mandiri tidak menggunakan icon sama sekali, hanya menggunakan hyper link saja untuk memilih menu yang diinginkan oleh pengguna.
♥Tekhnik : tekhniknya disini bisa di bilang cukup simple karena tidak menggunakan icon sama sekali hanya menggunakan penulisan untuk membantu pengguna memilih menu yang diinginkan. Dalam bank mandiri ini ada pilihan menu bahasa seperti bahasa inggris atau Indonesia sehingga bagi pengguna yang hanya terbiasa dengan bahasa inggris atau Indonesia saja bisa mengerti ap saja yang terdapat dalam link tersebut.
♥Metaphor (kiasan): Pada website Bank Panin ini tidak memakai banyak kiasan,kata yang tertera pada website ini pun cukup bisa dimengerti oleh user yang mengkases. Hanya saja tampilan pada web tersebut masih terlihat sangat kaku,sepertinya tidak pernah dilakukan pembaharuan atau maintenance.
♥Clarity (kejelasan): Pada web Bank Panin ini memiliki white space atau background putih yang sangat membantu untuk membaca setiap informasi yang ada bagi pengunjung.sehingga pesan-pesan yang terdapat didalamnya sangat jelas terlihat.
Consistensy (ketetapan) : Warna yang digunakan pada website ini cukup kontras,campuran warna merah,biru dan putih untuk display web ini sudah cocok. Hanya warna merah yang digunakan terlalu mencolok,meskipun tidak semua di dominasi dengan warna merah. Teks yang digunakan pada website ini pun sudah bisa dikatakan baik,dengan warna latar merah menggunakan teks berwarna putih,sedangkan yang berlatar putih menggunakan tulisan berwarna hitam. Dengan begitu tidak ada kontras yang bentrok dan memberikan kenyamanan pada user dalam mengakses website tersebut.
♥Alignment (kerataan) : Kerataan yang digunakan pada website ini menggunakan rata tengah untuk tampilan iklan baris dan pada icon kata yang ditampilkan. Sedangkan untuk teks pada kotak info bank menggunakan rata kiri mengikuti negara bagian barat .
Proximity: Item yang digunakan sangat friendly user,dengan mudah nasabah atau user dapat mengakses setiap menu yang diinginkan. Hanya saja,jarak atau penempatan menu box dan menu iklan pada web ini sangat berdekatan sekali,sehingga membuat tampilan website terlihat penuh dan tidak teratur.
♥Contrast (keserasian tampilan) : Pada website panin bank ini sebetulnya tampilan yang ada belum terlihat sempurna karena masih terlihat sangat menumpuk setiap menu yang tersedia,penggunaan warna sudah cukup kontras hanya saja penggunaan warna merah pada web ini dapat diartikan sebagai kemarahan meskipun mungkin arti yang diinginkan tidak seperti itu. Pembeda kontrol yang aktif sudah terlihat jelas,karena tombol yang aktif diberikan warna yang berbeda dengan tobol menu yang tidak aktif.
♥Warna : Pewarnaan pada interface diatas kurang memadai karena campuran antara warna latar,warna form dan juga warna teks kurang seimbang. Putih menjadi warna latar untuk web tersebut sedangkan merah untuk warna form,putih,hitam dan abu abu menjadi warna teks. Tampilan yang kurang memadai pada web ini membuat tampilannya terlihat tidak rapih dan beantakan.
♥icon menu yang ada pada interface diatas adalah seperti dibawah ini,tampilan masih sangat terlihat tidak teratur dengan warna yang terlalu mencolok sehingga membuat ketidaknyamana pada user ketika mengakses interface ini.
PENGHEMATAN ELEMEN VISUAL
• Penggunaan elemen visual seperlunya
Pada interface ini elemen visual yang digunakan sangat tidak sesuai dan
terlihat sangat berantakan. Elemen visual yang ada pada website ini kurang
tertata dengan rapih.
• Minimalkan border – border dan outline yang berat
Border yang digunakan pada interface diatas memang sederhana,tidak terlalu
banyak border tetapi tampilan dan penempatan form nya terlampau banyak
sehingga meberikan ketidaknyamanan kepada user untuk mengakses.
• Minimalkan ketidakrapihan
• Minimalkan jumlah dari kendali
TEKHNIK KODING
• Blinking (berkedap kedip )
Interface ini tidak menggunakan teks blinking,penulisan kata dan huruf pada
web ini hanya menggunakan campuran serta ketebalan berbagai macam warna.
• Reverse video,bold
Penggunaan ketebalan huruf pada website ini tidak cukup baik,kurang terlihat
jelas perbedaan pada judul teks dan keterangan teks yang ada disetiap menu
apakah huruf tersebut tebal atau tidak.
TIPOGRAFI
• Karakter – karakter dan simbol harus mudah dinyatakan dengan jelas dan dapat
dibedakan
Simbol dan karakter yang terdapat pada website interface diatas belum terlihat
baik,karena penempatan setiap simbol pada form menu seperti menumpuk,membuat
tampilan terkesan penuh dan berantakan.
• Mudah dibaca,web diatas mudah dipahami dan dibaca bagi user yang mempunyai
penglihatan normal,tetapi untuk user yang memiliki masalah pada
penglihatan,web diatas tidak memberikan kenyamanan pada user tersebut.
• Mempunyai sifat mudah dibaca.
FONT
Interface diatas menggunakan font berjenis arial,hanya saja ukuran dan warna
pada font kurang mendukung sehingga membuat penglihatan menjadi kurang nyaman.
ICON
Icon pada interface ini terlihat sangat menumpuk,sehingga tampilan terlihat
tidak rapih dan berantakan. terlalu banyak icon iklan pada interface ini yang
dirasa kurang diperlukan dan membuat tampilan kurang menarik.
Kesimpulan:
Dari hasil analisi dua Web Bank berbeda, dapat ditarik kesimpulannya sebagai berikut:
Untuk web Bank Mandiri, tampilan webnya lebih bagus, rapi, warna yang bervariasi tetapi tidak terlalu mencolok dan tetap menarik, dan terkesan lebih mewah. Tetapi untuk menu-menu yang terdapat didalamnya, seharusnya gunakan Hyperlink yang warnanya lebih cocok agar terlihat dengan jelas. Untuk web Bank Panin, tampilan webnya sudah cukup bagus, tetapi masih terdapat kekurangannya yaitu: tampilannya masih terlihat biasa saja, terdapat banyak iklan-iklan, penggunaan warna yang standart sehingga terkesan kurang mewah dan sangat sederhana. Untuk menu-menu yang ada, walaupun tidak menggunakan icon-icon tapi dapat terlihat dengan jelas
Saran: Untuk bank Mandiri sebaiknya tetap menggunakan Desain Grafis seperti web ini. Karena desain yang digunakan sudah sangat bagus.untuk bank Panin masih banyak yang haru diperbaiki dari webnya. Agar tampilan web tersebut lebih modern dan lebih bagus.
0 komentar:
Posting Komentar