Pemetaan Visual

Desainer web yang baik akan

mempertimbangkan kemudahan bagi
pengguna dan membantunya untuk
menjelajah keseluruh bagian sebuah halaman
web. Layout yang baik tidak melelahkan bagi
pembacanya untuk membaca dan mengikuti
keseluruhan isi layout tersebut.
Untuk membuat layout yang baik dan efektif,
buatlah layout tersebut mudah untuk diikuti.
Pemetaan Visual
Penataan dan penekanan pada beberapa
titik informasi akan lebih memperjelas
informasi yang akan disajikan. Hal ini seperti
membuat sebuah peta bagi orang asing dan
menuntunnya ke suatu tempat. Pilihlah apa
yang mesti dilihat atau dibaca dahulu,
dimanakah letaknya, atau bagaimanakah
perbedaannya dengan item yang lain???
Pemetaan Visual
Semakin baik pendefinisian urutan
dalam sebuah layout maka semakin
akan cepat bagi seorang pengguna
untuk langsung sampai pada titik akhir
urutan informasi dan akan semakin
cepat memahami informasi yang
disampaikan.
Pemetaan Visual
Berikut ini beberapa tips untuk membuat layout
dengan urutan informasi yang baik :
Gunakan ukuran font yang berbeda untuk masing-
masing elemen layout. [Headline biasanya lebih besar
dari bodytext]
Gunakan warna yang berbeda untuk informasi yang
penting.
Gunakan pemisah untuk memisahkan informasi
kedalam beberapa kelompok.
Gunakan font style bold, italic atau lainnya untuk
menegaskan makna.
Pemetaan Visual
Pilihlah letak yang baik. [Pojok kiri atas biasanya dibaca
lebih dahulu]
Letakkan tulisan dalam sebuah kotak atau berikan satu
bentuk tertentu.
Berikan bullet untuk tulisan yang terdiri dari beberapa
item, seperti tulisan ini.
Gunakan warna yang berbeda atau reverse (contrast)
untuk tulisan, misalnya font warna putih dengan
background hitam.
Menarik Perhatian
Layout tidak akan bisa berkomunikasi dan
menyampaikan informasinya bila layout itu tidak
diperhatikan. Untuk itu, layout itu harus memiliki
tampilan yang berbeda dari yang lain yang
mampu menarik perhatian yang melihatnya.
Sebuah layout yang menarik bisa jadi adalah
layout yang cantik, mengejutkan, menghibur,
aneh/tidak biasa atau bisa juga layout yang
sederhana dan lugas.
Menarik Perhatian
Untuk memilih image apakah yang akan
ditampakkan oleh sebuah layout, kita dapat
mendekatinya dari target audience yang akan
membaca layout tersebut dan juga bagaimanakah
layout halaman-halaman web sejenis lainnya.
Misalnya saja bila beberapa halaman web sejenis
dirancang secara sederhana kita bisa
menggunakan warna lain yang lebih mencolok
dan pemilihan layout yang berbeda.
Menarik Perhatian
Berikut ini beberapa tips untuk membuat layout yang
menarik :
Mengatur informasi penting dengan satu cara tertentu,
misalnya : meletakkan headline dalam sebuah lengkung
kurva, atau menggunakan jenis font yang berbeda
Gunakanlah ukuran font yang sangat besar untuk
headline yang lucu atau provokatif.
Potonglah (crop) sebuah image dengan cara yang tidak
biasa, misalnya hanya gambar mata bukan keseluruhan
wajah.
Menarik Perhatian
Gunakan warna-warna terang bila informasi yang
ditampilkan pada background berwarna kelam.
Berikan ruang kosong yang cukup untuk gambar atau
tulisan yang kecil.
Miringkan sebuah gambar atau blok tulisan.
Perbesar sebuah foto atau gambar pada proporsi yang
cukup lebar.
Elemen Desain
Untuk membuat sesuatu, biasanya kita
akan memulainya dari masterial-
material dasar. Demikian pula saat kita
harus membuat sebuah layout yang
baik, kita harus mengenal dahulu
material-material dasar dalam desain.
Material dasar ini disebut sebagai
elemen desain.
Elemen Desain
Elemen-elemen desain antara lain :
Garis : Tanda apapun yang menghubungkan satu
titik dengan titik yang lain. Garis dapat digunakan
untuk mengatur layout, mengarahkan pembaca
ataupun membawa emosi pembaca.
Bentuk : Sesuatu yang memiliki tinggi dan lebar.
Dengan bentuk pembaca dibantu untuk mengenali
sebuah obyek, menarik perhatiannya,
mengkomunikasikan ide perancang dan menambah
daya tarik sebuah layout.
Elemen Desain
Teksture : Tampilan atau perasaan sebuah
permukaan. Teksture menambah dimensi dan
kekayaan sebuah layout, menegaskan atau membawa
kedalam sebuah rasa/emosi tertentu.
Ruang kosong : Jarak atau area antara atau di sekitar
sesuatu. Ruang kosong memisahkan atau menyatukan
elemen-elemen layout, menegaskan sebuah elemen,
atau sebagai tempat istirahat bagi mata.
Elemen Desain
Ukuran : Seberapa besar atau kecil sesuatu. Ukuran
menunjukkan elemen yang terpenting, menarik
perhatian, dan mengepaskan seluruh elemen layout.
Value : Seberapa gelap atau terang sebuah area.
Value memisahkan elemen-elemen layout,
memberikan suasana tertentu dan membuat sebuah
ilusi kedalaman.
Elemen Desain
Warna : Media paling akhir pada komunikasi
simbolik. Warna membawa suasana tertentu, menarik
perhatian, menegaskan sesuatu dan mengatur
elemen-elemen layout.
Garis
Beberapa hal yang dapat dilakukan dengan garis :
Mengatur informasi [meletakkan garis vertikal antara
kolom-kolom di laporan berbentuk tabulasi]
Menekankan kata [meletakkan headline dengan garis
pemisah]
Menghubungkan titik-titik informasi [mengkaitkan
sebuah gambar dengan keteranggannya dengan
sebuah garis]
Garis
Membuat satu bentuk tertentu
Memberikan garis outline pada sebuah gambar untuk
memisahkan dari item layout yang lain.
Membuat sebuah gambar atau grafik [grafik
keuntungan terhadap tahun buku]
Membuat patren atau ritem dengan menggambar
banyak garis.
Garis
Mengarahkan pandangan pembaca atau membuat
efek gerakan [garis diagonal lebih aktif dibandingkan
dengan garis horisontal]
Menampilkan emosi [garis lengkung untuk informasi
tarian atau seni]
Bentuk
Dalam desain ada tiga macam bentuk, yaitu :
Bentuk Geometrik yaitu segitiga, segiempat (kotak),
dan linkaran. Bentuk ini sangat umum dan
terstruktur.
Bentuk Natural yaitu hewan, tumbuhan dan manusia
adalah bentuk-bentuk yang tidak beraturan dan
mudah berubah.
Bentuk Abstrak adalah bentuk Natural yang
disederhanakan, misalnya simbol pada fasilitas untuk
orang cacat.
Bentuk
Yang dapat dilakukan dengan bentuk antara lain:
Memotong (crop) foto dengan suatu cara tertentu
yang menarik
Menyimbolkan sebuah ide [hati menyimbolkan
hati]
Membuat format baru
Memperjelas informasi
Membentuk huruf [segitiga untuk huruf A]
Tekstur
Penggunaan tekstur dapat memperkaya layout
dan menambah dimensi layout tersebut. Secara
umum tekstur dibagi dalam dua jenis yaitu :
Tekstur Tactile adalah tektur yang dapat
dirasakan dengan meyentuhnya. Misalnya: tekstur
kulit jeruk, cetakan embose, dll.
Teksture Visual adalah tekstur yang timbul akibat
ilusi rangkaian gambar.
Tekstur
Gunakanlah tekstur untuk :
Menghubungkan gambar muka
(foreground) dengan latar belakangnya.
Menciptakan kontras untuk menarik
perhatian.
Menghidupkan layout dan menambah
aktivitas.
Space
Gunakanlah space untuk :
Tempat istirahat mata pembaca.
Membuat hubungan antara elemen-
elemen dalam sebuah layout [mendekatkan
untuk memberi kesan berhubungan].
Membuat bentuk positif dan negatif.
Space
Memberikan nuansa 3 dimensi.
Menegaskan sebuah elemen.
Mempermudah pemahaman layout.
Membuat halaman tampak dinamis.
Mempermudah pembacaan teks.
Ukuran
Ukuran berarti fungsi : kita membeli mobil yang
sesuai ukurannya dengan anggota keluarga kita.
Ukuran berarti ketertarikan : kita tertarik dengan
konstruksi gedung pencakar langit atau dengan
bayi yang mungil.
Ukuran berarti pengaturan : kita urutkan baris
berbaris dari yang paling pendek sampai yang
paling tinggi.
Ukuran
Ukuran elemen layout dapat digunakan untuk :
Menentukan elemen yang terpenting dengan
membuatnya yang terbesar
Membuat sebuah elemen tampil di muka
(foreground) ataupun di belakang (background).
Semakin besar elemen biasanya semakin di depan
posisinya.
Memberikan nuansa skala ukuran kepada pembaca
Membuat semua elemen layout mudah untuk diikuti.
Ukuran
Membuat sebuah elemen mendapatkan perhatian.
Mengkontraskan dua elemen yang berbeda ukuran
untuk menarik perhatian.
Mengatur elemen-elemen layout sehingga sesuai
berada di sebuah layout.
Konsistensi tampilan dalam sebuah layout, misalnya
kesamaan ukuran headline.
Value
Value dapat digunakan untuk :
Secara visual memisahkan elemen-elemen
yang berlainan jenis [headline dengan
huruf besar dan tebal sedangkan bagian
lain dengan huruf lebih kecil dan tipis].
Menuntun perhatian pembaca ke seluruh
halaman [membimbing dari gelap ke
terang].
Value
Membuat ilusi tentang kedalaman dan
ruang [pemberian bayangan untuk efek 3
dimensi].
Menegaskan sebuah elemen [elemen yang
penting dibuat lebih terang dan yang lain
lebih gelap].
Warna
Warna sangat berpengaruh dan berperan banyak
dalam kehidupan umat manusia.
Warna membantu kita mengenali suatu obyek
tertentu: apel berwarna merah, jeruk berwarna
kuning, dst.
Warna membantu memahami sesuatu: hijau berartti
terus jalan.
Warna juga mengkomunikasikan perasaan dan
keinginan: Warna tinta merah bila kita sedang marah.
Warna
Di dalam layout, warna juga berfungsi
untuk mengekspresikan keinginan,
membantu mengenali suatu object tertentu
dan meneruskan pesan yang harus
disampaikan. Misalnya, penggunaan warna-
warna pastel memberikan kesan tenang dan
romantis. Tanda-tanda bahaya diwarnai
dengan merah menyala.
Warna
Warna dapat berfungsi dan berperan sangat
banyak dalam sebuah layout, akan tetapi
saat kita memilih sebuah warna, kita perlu
berhati-hati dengan efek-efek warna yang
dipilih. Warna yang paling sesuai dengan
tujuan layout? Apakah konsistensi warna
untuk tujuan yang mirip perlu
dipertahankan atukah malah harus diubah.
Warna
Warna dapat digunakan untuk :
Menegaskan elemen yang dianggap penting
Menarik perhatian
Membimbing pembaca daerah mana yang lebih
dahulu dibaca
Menghubungkan antara satu elemen dengan yang
lain [penggunaan warna background halaman yang
sama dengan background foto].
Warna
Mengatur informasi yang ditampilkan [kode warna
pada sebuah manual].
Menentukan bagian-bagian yang berbeda dari sebuah
grafik.
Mengelompokkan atau memisahkan antara elemen
yang satu dengan yang lain.
Membangkitkan respon yang emosional.