Merancang Web

Sebelum membuat web secara profesional, tugas penting sebagai

seorang pengembang web adalah memberikan ide dan gagasan

tentang point apa saja yang akan ditampilkan dalam sebuah halaman

web. Dengan demikian, seorang pengembang web juga perlu

berkonsultasi dengan pemilik web itu sendiri agar segala sesuatu

yang menjadi tujuan pemilik web dapat terpenuhi.

Lain halnya dengan seorang pengembang web (web developer) yang

diberikan kebebasan dalam membuat sebuah web. Pemiliki web

umumnya mempercayakan sepenuhnya kepada pengembang web

(web developer). Nah, jika demikian maka sebagai seorang

pengembang web harus benar-benar membuktikan keterampilannya

dalam membuat web secara profesional agar para pemiliki web tidak

kecewa dengan karya yang telah dibuat.

Untuk menjadi seorang pengembang web profesional tidaklah mudah

karena harus memadukan antara bahasa pemrograman web dengan

nilai seni yang terdapat dalam setiap halaman web. Keduanya harus

dimiliiki, jika salah satu saja maka belum bisa disebut sebagai

seorang pengembang web profesional. Meskipun pintar bahasa php

dalam membuat web, tapi jika tidak didukung oleh jiwa seni maka

hasilnya kurang maksimal. Begitu pula sebaliknya, jika hanya pandai

membuat tampilan halaman web tapi tidak didukung oleh

pengetahuan tentang bahasa pemrograman web maka hal itu akan

sia-sia saja.

Sebagai seorang pengembang web pemula, tidak perlu berkecil hati

jika ingin menjadi seorang pengembang web profesional. Yang

terpenting adalah adanya kemauan untuk terus belajar dan belajar

lagi agar wawasan tentang pengembangan web terus bertambah.

Ada beberapa hal yang perlu diketahui oleh para pengembang web

pemula ketika pertama kali ingin membangun sebuah web dari awal.

Agar web yang dibuat nampak profesional perlu memahami beberapa

konsep dasar dalam mengolah web, mulai dari tool yang digunakan,

format gambar yang sesuai, hingga pemilihan warna teks dan latar

belakang sebuah halaman web.

Berikut ini terdapat beberapa aspek yang perlu diperhatikan dalam

membuat sebuah website.

DAPAT DIGUNAKAN (USABILITY)

Usabilitas merupakan hal yang sangat penting dalam merancang web

(web design). Memang sangat baik jika memiliki sebuah website

dinamis yang nampak profesional dan bagus , namun jika perlu waktu

yang sangat lama untuk mendownload sebuah artikal atau

penggunaan navigasinya sangat rumit maka tidak heran jika

pengguna akan “hengkang” dari website Anda dan tidak akan kembali

lagi. Perlu diketahui, umumnya pengguna (user) ingin mendapatkan

informasi secara cepat meskipun tampilan website-nya biasa saja.

Jika terlalu lama saat mencari informasi maka para pengguna akan

langsung menutup halaman web tersebut. Ingat, jangan

mengorbankan aspek usabilitas dalam mendesain website.

NAVIGASI (NAVIGATION)

Navigasi juga menjadi hal yang sangat penting dalam sebuah website

yang berfungsi untuk membantu pengguna (user) dalam menjelajah

website kita untuk mencari informasi yang diinginkan secara mudah.

Navigasi yang bagus mencerminkan struktur website yang sangat

baik.

Kadangkala ditemukan beberapa format navigasi, diantaranya:

- Papan Navigasi (Navigation Panel)

o Bisanya dalam bentuk menu-menu yang tersusun rapi.

o Sebaiknya diatur link pada bagian kiri (dari tangan

Anda) atau di bagian atas dari sebuah halaman web.

o Dapat berupa teks maupun grafik.

o Harus mengambil ruang yang tidak terlalu banyak.

o Posisi navigasi sebaiknya konsisten pada setiap

halamannya. Jika terpaksa menggunakan warna yang

berbeda, pastikan bagian tersebut masih merupakan

satu kesatuan.

10

Gambar Papan Navigasi

- Tombol Home (Home Button) :

o Tombol ini sangat familiar di kalangan pengembang web.

Fungsi utama tombol ini adalah untuk kembali ke

halaman utama (homepage).

o Tombol home dapat ditempatkan pada setiap halaman

web kecuali halaman utama (homepage).

o Tombol home maupun logo perusahaan dapat berfungsi

sebagai navigasi dan sebaiknya diletakkan di bagian kiri

atas (dari tangan Anda).

o Pastikan tombol home maupun logo ada pada setiap

halaman (kecuali halaman utama) agar pengunjung

(visitor) lebih familiar dengan navigasi tersebut.

Gambar Tombol Home

- Link

o Jika teks memiliki hyperlink sebaiknya diberi garis

bawah (underlined).

o Pengunjung mestinya tidak harus disajikan dalam

bentuk mouse over atau hover pada sebuah link untuk

menyadarkan pengunjung bahwa teks tersebut adalah

sebuah link – buatlah link yang nyata.

o Sediakanlah lebih banyak teks link (textual link) dalam

sebuah website untuk mengijinkan pengunjung ke

informasi referensi secara silang.

o Usahakan menyediakan daftar susunan link secara

nyata dibandingkan hidden (adanya hal yang

tersembunyi) dalam sebuah teks. Adanya link dalam

sebuah teks mengakibatkan proses membaca sedikit

lambat, namun hal ini mungkin saja menjadi hal yang

bagus dengan tujuan menandai (highlight) kata-kata

yang khusus.

o Buatlah perbedaan antara internal link (link dalam satu

website) dengan external link (link dengan website lain).

o Jika link tersebut masih dalam satu website (internal

link) buatlah link menggunakan teks yang simple. Jika

link tersebut mengarah ke website lain (external link)

usahakan memasukkan alamat lengkap website

tersebut dalam teks (misal: http://www.websitelain.com).

Hal itu akan memberikan informasi kepada pengunjung

tentang website yang berbeda sebelum mengklik link

tersebut.

Gambar External link

o Apabila menyertakan link eksternal dalam website Anda,

jangan membuat link dengan cara membuka jendela

baru (new window) menggunakan target “_blank”. Ini

dapat mengakibatkan pengunjung merasa terganggu.

o Hindari tombol kembali (back button) – yang merupakan

perintah umum untuk kembali ke halaman sebelumnya.

o Jika memiliki link dalam bentuk file berukuran besar

seperti .avi atau .pdf, sediakan ukuran dalam bentuk KB

dalam tanda kurung untuk memberikan informasi

kepada pengunjung tentang ukuran file tersebut

sebelum mendownloadnya.

o Buatlah kepastian pengunjung untuk mengetahui

tentang link yang sudah dikunjungi (diklik) dengan cara

memberi warna yang berbeda. Misalkan dari warna biru

ke merah (artinya: warna biru memberi arti link tersebut

belum dibuka sedangkan warna merah menandakan

link tersebut telah dikunjungi/dibuka).

- Judul html (HTML Title)

o Umumnya berada pada tag html header.

o Judul html (sebagai header) masih relevan dengan

halaman sekarang.

o Ditampilkan di bagian atas (top title bar) pada sebuah

browser.

o Judul html sangat berguna bagi yang membutuhkan

sebagai bookmark situs Anda.

Gambar Judul

- Peta situs (Site Map)

o Site map merupakan salah satu bagian dari halaman

website yang memberikan informasi tentang peta situs.

o Site map merupakan struktur yang hirarkis dari sebuah

situs dengan link untuk seluruh halaman yang relevan.

o Memiliki link yang menyolok ke peta situs dari setiap

halaman.

Gambar Site Map

- Fasilitas Pencarian (Search Facility)

o Beberapa pengunjung/pengguna lebih memilih fasilitas

pencarian sebelum menggunakan navigasi lain yang

disediakan.

o Ada juga beberapa pengguna menggunakan fasilitas

pencarian sebagai fasilitas terakhir yang akan

digunakan.

o Pastikan situs Anda memiliki sebuah fasilitas pencarian

(search facility).

o Letakkan kotak pencarian dalam posisi yang menyolok

pada setiap halamannya.

Gambar Fasilitas Pencarian

- Grafik sebagai Navigasi dan/atau Link (Graphic as

Navigation and/or Link)

o Sebagian pengembang web menggunakan grafik/

gambar sebagai link maupun navigasi. Berhati-hatilah

jika melakukan hal tersebut.

o Jika garis tepi (border=”0”) pada tag grafik, hal itu

mungkin menjadi jalan yang tidak jelas bagi pengunjung

ketika memberitahukan bahwa gambar tersebut

merupakan sebuah link.

o Jika grafik/gambar tersebut bukan dalam mouseover,

pengunjung mungkin tidak akan melihat kursor berubah

menjadi sebuah tangan.

14

Gambar Grafik sebagai navigasi atau link

o Usahakan dan sediakan link teks (textual link) untuk

informasi yang sama sebagai grafik.

Gambar Textual link

o Jika nilai estetika lebih penting, berilah garis tepi

(border=”1”) pada grafik/gambar sebagai link.

KONSEP PENULISAN (WRITING CONCEPT)

Teknik penulisan dalam web berbeda dengan penulisan untuk

publikasi (cetak). Waktu merupakan hal sangat penting bagi mereka

yang menggunakan Internet, sehingga para pengguna Internet tidak

akan membuang waktunya hanya untuk membaca teks yang sangat

banyak sekali. Riset membuktikan bahwa para pengguna cenderung

meneliti teks dalam layar monitor. Selain itu, lebih cepat membaca di

layar monitor dibandingkan membaca di atas kertas.

Terdapat beberapa konsep penulisan dalam sebuah web, yaitu:

- Sedikit itu lebih baik – pertahankan konsistensi: buatlah struktur

kalimat sesederhana mungkin, atau buatlah kalimat yang

pendek.

- Seringlah menyorot (highlight) kata atau ungkapan yang penting.

- Buatlah bullet atau nomor jika perlu.

- Buatlah panjang halamannya lebih pendek – hindari terlalu

banyak menggulung layar (vertical scroll).

- Gunakan link untuk menyorot (highlight) dan mengambil

pengguna untuk informasi lebih lanjut.

- Hindari penggunaan ungkapan yang tidak deskriptiv, seperti “klik

di sini” - coba dan gunakan kata deskriptiv untuk link.

- Hindari penggunaan tag <hr> (Horizontal Rule), untuk

memisahkan badan teks: gunakan banyak judul, subheading,

dan ruang putih sebagai gantinya (hal ini akan nampak lebih

bagus dan mudah dibaca, tag <hr> juga banyak yang tidak

menyukai.

- Hindari perataan teks di tengah-tengah (center) – tidak nyaman

untuk dibaca.

- Jangan menggunakan semua huruf kapital – tidak nyaman untuk

dibaca juga.

- Hindari teks miring (italic) secara berlebihan – hal ini juga tidak

nyaman untuk dibaca.

- Pertahankan isi (content) dari style – gunakan style sheet dan

masukakan file lain yang mendukung.

KESEDERHANAAN (SIMPLICITY)

Kesederhanaan merupakan hal penting dalam membuat sebuah web

profesional. Sederhana di sini bukan dalam arti tampilan sebuah situs,

namun lebih mengarah ke teknik penulisannya.

Ada beberapa hal yang perlu diperhatikan agar konsep

kesederhanaan tetap dipertahankan, yaitu:

- Gunakan Heading dan Sub Heading untuk memisahkan bagian

teks.

- Gunakan ruang kosong dengan warna putih secara bijaksana.

- Pastikan Anda memiliki tidak lebih 12 kata dalam setiap barisnya.

- Tulislah isi secara singkat – bukan sebuah karangan.

- Sorot (highlight) kata-kata yang penting.

- Gunakan warna latar belakang pucat (terang) jika menggunakan

teks utama dengan warna gelap.

- Gunakan warna latar belakang gelap jika teks utama berwarna

terang.

16

- Hindari penggunaan warna yang terlalu banyak, terutama

kombinasi yang tajam bagi mereka yang buta warna dalam

membaca teks.

MUDAH DIAKSES (ACCESSIBILITY)

Suatu hal yang mudah diakses ke semua orang dengan

mengabaikan browser, paltform, sistem operasi, tersambung atau

putus merupakan hal yang sangat utama untuk mempertimbangkan

ketika merancang sebuah website. Anda tidak perlu menghalangi

seorang pengguna web keluar, siapa saja bisa menjadi potensi

menjadi pengunjung/ pelanggan. Setelah sebuah website mudah

diakses, membuat penggunaan website Anda akan banyak diakses

oleh pengguna/pengunjung. Mudah digunakan = Pengunjung akan

kembali. Sulit digunakan = Pengunjung akan “kapok”.

“Kekuatan Web adalah disukainya web tersebut oleh pengguna di

seluruh dunia (Universality). Akses oleh semua orang dengan

mengabakan kekurangannya adalah aspek yang sangat penting”.

(Tim Berners – Lee, Direktur W3C dan pembuat World Wide Web).

Aspek kemudahan dalam mengakses sebuah website perlu

mempertimbangkan beberapa hal sebelum merancang web, di

antaranya:

- Pastikan website Anda mudah digunakan oleh browser utama

yang sering digunakan banyak orang maupun web browser

lainnya.

- Pastikan website Anda mudah digunakan tanpa harus

mendownload sebuah plug-in tertentu.

- Ujilah website Anda pada tahap pengembangan untuk

memeriksa kinerja pada berbagai sistem operasi dengan versi

browser berbeda.

- Gunakan style sheet untuk memisahkan style dan content.

- Gunakan etika tag html untuk menampilkan teks yang dimaksud

sehingga memungkinkan pengguna yang masih awam dapat

membaca teks secara jelas dengan cara: menggunakan tag

<em> atau <strong> pada Heading, usahakan selalu

menetapkan teks alternatif untuk grafik (<img src=”gambar.gif”

width=”25” height=”35” alt=”keterangan gambar”>)

17

- Periksa penggunaan warna yang kurang bagus dengan berbagai

format kebutaan warna (color blindness): jika ragu-ragu –

desaturate (buatlah hitam dan putih) rancangan untuk melihatnya

apabila masih perlu pertimbangan, jangan menggunakan warna

sebagai indikasi adanya perubahan (misal: bagian baru), selalu

menggarisbawahi suatu teks berupa link.

KEBUTAAN WARNA (COLOR BLINDNESS)

Sekitar satu dari sebelas orang mungkin tidak mampu menggunakan

website Anda berkaitan dengan beberapa format kebutaan warna

(color blindness). Yang terbaik, website Anda tidak akan nampak

pada orang yang buta warna seperti yang telah Anda rancang.

Sialnya lagi, hal ini bisa jadi teks tidak terbaca, navigasi yang sulit

digunakan dan elemen lain yang tersembunyi.

Ada beberapa pertimbangan dalam pemilihan warna agar website

Anda dapat digunakan oleh mereka yang buta warna, yaitu:

- Kebanyakan orang yang buta warna tidak bisa membedakan

antara warna merah dengan hijau.

- Warna yang teduh akan nampak terang jika dilihat oleh orang

yang buta warna.

- Format kebutaan warna yang umum adalah: Protanopia tidak

mampu menerima warna merah dan Deuteranopia tidak mampu

menerima warna hijau, sedangkan Tritanopia tidak mampu warna

biru.

Bagaimana cara menetralkan kondisi tersebut?

- Jangan menggunakan warna sebagai satu-satunya kunci rahasia,

oleh karena itu gunakan selalu garis bawah (underline) jika

merupakan sebuah llink, sediakan pula arti lain untuk

membedakan antar bagian.

- Hindari penggunaan warna merah atau hijau saja secara

monoton pada website Anda.

- Pertahankan tingkat kontras antara teks dan latar belakang.

- Gunakan selalu “alt” (teks alternatif) pada setiap grafik.

GRAFIK (GRAPHIC)

Unsur grafik sangat diperlukan dalam sebuah website, karena

memiiki beberapa fungsi. Namun jika terlalu banyak menggunakan

grafik, bisa jadi website kita akan menimbulkan berbagai masalah.

Untuk mengatasi berbagai hal yang tidak diinginkan ketika

mendesain web, perlu mempertimbangkan berbagai sudut pandang

dalam penggunaan grafik, diantaranya:

- Tambahkan grafik seperlunya karena bisa menambah waktu

ketika pengguna mendownload artikel yang diinginkan.

- Ambillah yang terkecil dalam hal ukuran fisik dan file jika

memungkinkan.

- Jangan menggunakan navigasi dalam bentuk grafik jika ingin

dijadikan beberapa bahasa – hal ini memerlukan pemeliharaan

ekstra.

- Usahakan selalu mencantumkan spesifikasi tinggi dan lebar

dalam tag <img src>.

- Usahakan selalu mencantumkan nilai border=”1” dalam tag <img

src> atau beberapa browser akan menampilkan warna biru di

sekitar tepi gambar jika grafik tersebut merupakan sebuah link.

- Usahakan selalu menetapkan teks alternatif dalam tag <img

src=”gambar.gif” alt=”keterangan”>. Sebagian orang akan

mematikan grafik agar proses koneksi lebih cepat. Jika grafik

dimatikan, dan tidak memasukkan teks alternatif maka pengguna

tidak mengetahui gambar tersebut.

TEKNOLOGI BARU (NEW TECHNOLOGY)

Perkembangan internet yang begitu pesat membuat beberapa

developer menambahkan teknologi baru dapat menampilkan aplikasi

yang dibutuhkan.

Sebagai seorang web developer, tentu saja harus selalu mengikuti

perkembangan di dunia maya agar ketika merancang web tidak

timbul masalah akibat dari pengguaan teknologi yang sudah

kadaluwarsa.

Berikut ini terdapat beberapa bahan pertimbangan tentang teknologi

yang digunakan ketika merancang sebuah website, yaitu:

- Hindari penggunaan teknologi yang sudah lebih dari dua tahun.

- Hindari pembuatan website yang memaksa pengguna/

pengunjung harus mendownload software tertentu terlebih dulu.

- Jika Anda memiliki teknologi baru dalam sebuah situs, buatlah

alamat situs mirror-nya dengan cara memberi pilihan kepada

para pengguna sebelum memasuki situs Anda – jangan

menggunakan sebuah plug-in browser yang terdeteksi adanya

pengalihan jalur link.

- Gunakan perencanaan pada situs Anda untuk melihat jika para

pengguna menyukai html atau menggunakan teknologi baru yang

terpasang dalam situs – tinggalkan teknologi baru jika tidak

populer.

- Jika Anda membuat website menggunakan teknologi baru, cari

tahu tentang usabilitas (kemudahan penggunaan) dari semua

jenis website yang ada.

- Periksa statistik website Anda untuk melihat berapa banyak

pengguna memiliki plug-in terakhir sebelum Anda merancang

website.

Posted in: Designer