Elemen
Penting Desain Web
Desain web, sama seperti fesyen, selalu berubah
mengikuti perkembangan zaman. Ada trend yang sama sekali baru, ada pula yang
merupakan pengulangan dari trend beberapa tahun ke belakang. Tapi,
elemen-elemen esensial di dalamnya tidak banyak berubah.
Elemen desain web bukan hanya agar web elok
dipandang, tapi juga agar memudahkan pembaca dan Google Crawler ketika
menjelajahi web kita. Dengan kata lain, meningkatkan user experience (UX).
Elemen #1: Layout
Layout sebuah
situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen
desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan
hierarki dan keseimbangan layout secara keseluruhan. Susunan
paling umum adalah atas-bawah-kiri-kanan.
Tip:
- Buat
susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.
- Susun
elemen berdasarkan skala prioritas dari paling penting → penting →
kurang penting.
- Sebagian
besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main
post di sebelah kiri sedangkan sidebar di
sebelah kanan.
- Perhatikan
pula keseimbangan susunan elemen desain.
Elemen #2: White Space
White space berguna
untuk membantu mata manusia mengorganisasi data. Bagi Anda yang belum begitu
familiar dengan istilah desain, white space bisa diartikan sebagai
ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya. Situs
web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat
diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai
jeda.
Fungsi ruang kosong (Lia Anggraini S.
& Kirana Nathalia, 2014:82):
- Berfungsi
sebagai separator untuk setiap elemen desain.
- Memberi
fokus terhadap elemen yang ingin ditonjolkan.
- Memberi
kesan desain yang lebih clean dan relaxing.
- Menciptakan layout yang
lebih seimbang dan harmonis.
- Meningkatkan
keterbacaan teks.
Tip:
- Gunakan
ruang kosong dengan jarak yang sama antara satu elemen dengan elemen
lainnya.
- White
space juga termasuk jarak antarbaris dan
antarparagraf dalam body text.
Elemen #3: Jenis Huruf
Prinsip memilih huruf untuk web (web fonts)
agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur,
pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di layar, mata
manusia lebih cepat lelah daripada ketika membaca di atas kertas.
Berikut beberapa hal yang harus diperhatikan ketika
memilih jenis huruf untuk web:
- Klasifikasi
huruf. Kenali klasifikasi huruf dan
karakternya masing-masing. Setidaknya ada 4 klasifikasi dasar huruf:
serif, sans serif, script, dan dekoratif.
- Serif memberikan
kesan klasik, resmi, dan elegan. Biasanya digunakan pada buku, surat
kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR),
Garamond, Georgia, Cambria.
- Sans
Serif adalah huruf yang paling
cocok untuk digunakan karena memiliki tingkat readibility yang
lebih tinggi di layar komputer jika dibandingkan dengan huruf serif.
Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial,
Trebuchet, Verdana, Josefin Sans.
- Script memiliki
banyak sekali variasi (brush, handwriting, kaligrafi, dll),
memberikan kesan klasik, santai, dan kasual. Karena karakternya yang
seperti huruf tegak bersambung (well, ini memang huruf tegak
bersambung), jenis huruf script lebih sulit dibaca di
layar. Anda bisa menggunakan jenis huruf ini untuk judul post,
tapi hindari menggunakannya untuk body text.
- Dekoratif,
sama seperti script, huruf dekoratif juga memiliki banyak
sekali variasi dari mulai yang betul-betul alfabet, simbol, hingga
ikon-ikon tertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk
web fonts baik untuk judul maupun body text. Tapi, Anda
bisa menggunakan huruf jenis ini untuk tulisan di image asalkan
hanya untuk satu atau dua kata, bukan untuk kalimat panjang.
- Karakter. Huruf
memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai
dengan karakter situs web atau produk Anda.
- Legibility.
Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus
bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada
beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin
disampaikan pun sulit diolah oleh pembaca, misalnya jenis-jenis
huruf script atau dekoratif. Perhatikan contoh huruf di
bawah, keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang
berbeda. Kata pertama menggunakan tittle case atau
kombinasi huruf besar dan kecil, sedangkan yang kedua memakai all
capsatau kapital.
- Readibility. Readibility berkaitan
dengan bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf
yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang
memiliki tinggi sama. Readibility juga berhubungan dengan
jarak antarhuruf dan jarak antarkata.
- Warna.
Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda,
Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna
paling baik untuk body text adalah hitam atau gradasi
abu-abu tua. Warna lain di dalam body text hanya
dipergunakan untuk link atau subjudul. Judul? Boleh, Anda
boleh memakai huruf berwarna-warni untuk judul atau judul sidebar,
tapi pastikan warna yang Anda gunakan konsisten.
- Ukuran.
Ukuran berpengaruh terhadap readibility. Dalam jarak dekat,
mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang
terlalu besar. Ukuran paling pas untuk body text biasanya
antara 10-12px. Untuk judul, header, sidebar, dan elemen
lainnya bisa Anda sesuaikan dengan bidang layout.
Tip:
- Jenis
huruf sans serif paling baik untuk digunakan di layar.
- Gunakan
MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa mengkombinasikan
antara huruf serif dengan sans serif atau script dengan
sans serif. Misalnya, Georgia untuk judul dan Helvetica untuk body
text.
- Gunakan
variasi ukuran huruf untuk menandai skala prioritas aliran informasi.
Misalnya, 12px untuk body text, 10 px untuk text
snippet di sidebar, 8 atau 9px untuk footer.
- Anda
bisa memilih kombinasi huruf yang paling cocok di Google
Fonts.
Elemen #4: Pilihan Warna
Situs web bukan kanvas berisi lukisan abstrak, kita
sedang menyampaikan informasi kepada pembaca, bukan sedang mendistraksi mata
mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar
yang Anda gunakan lebih ramai dari konten itu sendiri.
Warna juga memengaruhi psikologi pembaca,
menciptakan mood, bahkan menyelusup ke alam bawah sadar. Warna,
bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks.
Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari
desain sebuah web.
Tip:
- Gunakan
warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya.
Misalnya, latar putih atau abu-abu muda untuk latar dan hitam atau
abu-abu tua untuk huruf body text.
- Jika
Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu
(grayscale).
- Hindari
menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada
jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.
- Pilih
hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa
menggunakan warna lain tapi dengan tone yang sama atau
gradasi dari warna utama.
Elemen #5: Navigasi
Navigasi ibarat denah atau petunjuk jalan yang
memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang
mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih
bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs
Anda. Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan
dan menemukan data.
Tip:
- Letakkan
navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
- Kategorikan
navigasi berdasarkan produk atau subtopik utama dari situs web Anda.
- Untuk
pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris
navigasi.
- Gunakan
menu dropdown untuk memisahkan antara subtopik dengan
sub-subtopik.
- Anda
bisa menggunakan navigasi linear atau navigasi hamburger.
Elemen #6: Tombol “Search”
Tidak ada yang lebih menyebalkan selain ketika
berkunjung ke sebuah situs web dan tidak menemukan tombol search.
Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang
ke situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan,
sedangkan tombol search adalah kebebasan. Pembaca tidak
memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain
atau dari satu konten ke konten lain.
Tip:
- Letakkan
tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di
bawah header.
- Gunakan
tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA gunakan
simbol lup yang merupakan simbol universal.
- Untuk
pengalaman pengguna yang lebih baik, Anda bisa menggunakan fitur Google
custom search.
Elemen #7: Laman “About Me/Us”
Jika Anda bukan perusahaan besar, tidak memiliki
jenis bisnis yang spesifik, bergerak di bidang bisnis yang sama sekali
baru, atau bukan pemilik situs web yang sangat terkenal, laman “About Me/Us”
memiliki beberapa fungsi:
- Memperkenalkan
diri/perusahaan Anda.
- Memperkenalkan
jasa/produk yang Anda miliki.
- Menjelaskan
secara spesifik bidang yang Anda geluti.
- Membangun engagement dengan
pembaca. Percaya atau tidak, pembaca lebih suka membaca tulisan dari
seseorang yang dia “kenal” daripada dari penulis misterius.
- Jika
Anda adalah blogger, laman “About Me” akan memudahkan calon klien
menemukan informasi tentang siapa Anda.
Tip:
- Letakkan
laman “About Me/Us” di navigasi agar mudah ditemukan.
- Laman
“About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan
atau organisasi.
- Berikan
informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan
tentang siapa diri Anda, tapi hanya jika itu relevan atau berpengaruh
terhadap citra diri yang ingin Anda tonjolkan. Tidak, tidak usah terlalu panjang,
ini profil, bukan cerpen.
- Anda
juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni,
atau seluruh akun media sosial. Kontak? Ya, Anda bisa memasukkan juga
kontak di laman “About Me”.
- Foto? Well,
ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose
yang sekiranya membentuk citra diri Anda.
- Sejarah
Anda ngeblog? Kalau Anda bisa menceritakan itu dalam satu paragraf berisi
tidak lebih dari lima kalimat, silakan. Kalau cerita itu menghabiskan 500
kata, sebaiknya buat posttersendiri.
- Jika
Anda adalah profesional, sertakan juga skill dan jasa
yang Anda berikan. Ratecard? Nggg … sebaiknya tidak.
Elemen #8: Laman Kontak
Laman kontak berpengaruh terhadap autoritas. Pembaca
dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar
dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga
mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang yang
sulit dihubungi sering kali membuat frustrasi.
Apa saja yang harus ada di laman kontak:
- Perusahaan:
Alamat lengkap, jam operasional, nomor telepon, surel.
- Personal:
Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.
- Form
(opsional).
Elemen #9: Footer yang Informatif
Footer bisa saja
berisi pengulangan informasi dengan catatan informasi tersebut memang krusial.
Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy
policy, atau informasi lain yang memudahkan pembaca.
Elemen #10: Kualitas Image
Walau bagaimanapun, kita harus tetap
mempertimbangkan aspek-aspek visual untuk memikat pembaca. Selain itu,
ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten.
Tip:
- Gunakan
foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal
150 PPI. Jika Anda belum familiar dengan ini, Anda bisa melihatnya
di properties. Klik kanan image →
properties → details.
- Gunakan
file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman
warnanya tidak berubah.
- Akan
lebih baik jika Anda menggunakan foto atau ilustrasi sendiri.
- Jika
Anda menggunakan foto dari stock images, pastikan Anda memakai
foto gratis, bukan yang berlisensi seperti Shutterstock, Depositphotos,
dll. Jika menggunakan dari penyedia images berbayar,
pastikan Anda memang MEMBELINYA, bukan hanya mencomot begitu saja dari
Internet lalu menggunakannya di blog Anda. Oh, dan tolong jangan coba-coba
mengedit atau menghilangkan watermark-nya.
- Gunakan
foto yang relevan dengan konten.
- Jika
menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct
link, bukan hanya menyebutkan “Foto: Google”. Sebab Google adalah
mesin pencari, bukan penyedia foto gratis.
- Jika
Anda menggunakan foto sendiri dan ingin menggunakan watermark,
gunakan watermark sewajarnya. Iya, itu foto Anda dan Anda
tidak ingin siapapun mencurinya, tapi jangan sampai watermark mengganggu
images secara keseluruhan.
- Anda yang
menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk
mengatur tampilan images.
*
Template apa
pun yang Anda gunakan, CMS apa pun yang terbiasa Anda pakai, tampilan web tetap
saja impresi pertama yang akan mengatakan siapa Anda, seberapa profesionalkah
bisnis Anda, atau sampai di mana pengetahuan Anda tentang teknologi. Apakah
Anda harus jago mendesain web untuk mempraktikkan poin-poin di atas? Tidak,
tidak perlu. Elemen-elemen tersebut biasanya sudah bawaan template,
kok. Anda hanya perlu mengeditnya sedikit-sedikit.
Tidak ada komentar:
Posting Komentar