Sebuah tampilan web yang baik dengan fungsi yang meyakinkan, sudah merupakan jaminan untuk mendapatkan pengunjung secara teratur. Berikut ini adalah prinsip dasar yang harus diperhatikan.

Hal terpenting yang harus diketahui adalah 42 % peselancar di Internet ingin mendapatkan informasi dengan cepat (Menurut penelitian pasar Pricewater Coopers). Oleh karena itu, membangun

halaman HTML baru menyelesaikan setengah pekerjaan. Konsep dan isi yang tepat tidak boleh dipandang sebelah mata. Masih terlalu banyak perancang Web yang lebih mementingkan penampilan daripada isi. Sebaiknya hilangkan penggunaan grafik yang memakan waktu dan halaman pembuka karena hanya menghambat proses pencarian informasi.

Isi: Informasi pada halaman pertama

Jangan tertipu dengan pendapat yang mengatakan informasi harus disajikan secara terselubung atau tersembunyi agar pembaca senang mencarinya. Sebagian besar peselancar tidak akan membuang – buang waktu online untuk itu. Sebaiknya, pada halaman pertama tersedia informasi mengenai:

• Apa yang ditawarkan oleh situs Anda ?

• Siapa Anda

• Apa manfaat atau kelebihan homepage Anda?

Dengan demikan Anda telah langsung memberikan informasi yang jelas dan links yang diperlukan. Halaman web pertama merupakan pintu gerbang sebuah situs. Dipintu masuk ini, peselancar dipancing dengan informasi singkat yang langsung mengantar ke link yang bersangkutan.

Jangan menyembunyikan link dibelakang Image Map yang besar dan berat, atau memasukannya dengan paksa ke dalam teks yang tidak jelas. Sebaiknya lengkapi link Anda dengan informasi singkat tentang apa yang tersedia dibalik link tersebut. Peselancar akan menghargainya dan melanjutkan perjalanannya untuk melihat halaman Anda.

Bentuk : Buat struktur yang jelas

Perhatikan agar halaman Anda mempunyai struktur yang jelas. Disini ada 2 model yang dapat diikuti. Pertama adalah situs kecil dibangun dengan struktur bintang. Setiap sub halaman memiliki link yang dapat dicapai dari halaman utama, dan setelah itu dapat juga langsung kembali ke halaman utama. Keuntungan : Tidak ada yang akan ada yang tersesat. Sealin itu tidak merepotkan bila ingin menambah atau mengurangi sebuah halaman.

Bila ingin menyampaikan informasi dalam jumlah besar pada beberapa halaman, sebaiknya menggunakan struktur hierarki, sepertyi direktori dan folder pada harddisk Anda. Halaman utama menyediakan link akses ke berbagai rubrik yang berisi beberapa halaman. Dengan medngikuti struktur ini seorang pengunjung dapat masuk semakin dalam ke situs. Buat struktur serupa pada server Anda : Setiap rubrik baru memiliki folder sendiri.

Agar navigasi berjalan lancar, setiap dokumen membutuhkan sebuah link kehalaman diatasnya dan sebuah kehalaman utama.

Link ke halaman utama sangat penting karena merupakan pertolongan terakhir bagi pengunjung yang tersesat. Selain itu link ini juga merupakan jalan kehalaman utama bagi mereka yang mencari informasi melalui fungsi search engine.

Jangan bereksperimen dengan rancangan pada setiap halaman. Buatlah dokumen dalam berbagai ragam. Yang paling penting: Bar untuk navigasi harus selalu berada di tempat yang sama. Dengan demikian, pengunjung dapat menemukan semua elemen penting dengan mudah.

Gambar : Grafis kecil yang informatif

Bila anda menampilkan grafis pada homepage, perhatikan agar tidak memakan tempat yang besar. Secara umum tersedia format GIF dan JPEG untuk gambar.

GIF tepat untuk elemen navigasi dan grafis dengan bidang besar, seperti screenshots atau gambar presentasi sederhana. Namun format ini hanya menampilkan gambar dalam maksimal 256 warna. Lebih dari itu gunakan format JPEG. Lakukan juga proses kompresi untuk menyimpan grafis sehingga dapat menghemat tempat dan kualitas yang baik.

Sangat praktis bagi browser bila sebuah grafis ditampilkan berulang pada beberapa halaman karena proses download grafis hanya berlangsung sekali. Setelah itu akan disimpan cache dan bila perlu grafis tersebut diambil dari cache.

Ada baiknya jika setiap link yang ditampilkan dalam bentuk gambar, diberi teks penuntun atau parameter ALT dalam image tag. Hal ini berguna untuk menginformasikan pengunjung apa yang ada dibalik gambar tersebut :

Isi parameter ALT akan tampak bila mouse digerakkan di atas gambar.

Struktur: Maksimal 2 frames pada homepage

Frame sering membantu navigasi pada homepage. Beberapa usaha untuk membuat layout web yang inovatif dengan frame sering gagal karena teknik ini tidak fleksibel. Lebih baik menggunakan tabel.

Bila Anda menggunakan frame untuk tujuan navigasi, bagilah halaman dalam sebuaqh frame kecil atau datar dengan lebar maksimal 150 pixel dan tinggi 100 pixel. Dengan begitu masih tersedia banyak tempat untuk isi. Tentukan besar nya dalam nilai mutlak. Dalam source code tampak demikian:

Dengan definisi di atas ditentukan 2 buah frames vertikal, salah satunya dengan lebar 100 pixel. Frame kedua mengambil tempat yang tersisa. Bila menggunakan frame, perhatikan frame eksternal. Lengkapi selalu dengan parameter “target=_top”.

Jangan menyisipkan link kehalaman web dari server lain ke dalam struktur frame Anda. Akan tampaknya tidak bagus dan menjengkelkan pengunjung. Lagipula tidak selalu dapat dilakukan. Ada situs – situs web tertentu telah mengembangkan program yang dapat melindungi homepage mereka secara otomatis dari frame.

Link: Harus berfungsi

Link merupakan tulang punggung web. Link cocok ditempatkan dalam teks, menu dan dibalik gambar. Namun sebuah link akan menjadi tidak berguna bila tidak berfungsi. Cobalah setiap link sebelum menempatkannya pada homepage. Sebaiknya ketik dulu alamat tersebut dalam browser, lalu periksa apakah halamannya muncul. Bila semua benar, copy link tersebut dari jendela alamat browser lansung kedalam source code atau dialog Hyperlink editor Anda> Jangan lupakan http:// didepannya.

Bila Anda menambahkan link internal, gunakan alamat relatif seperti dalam direktori “..”.

Contoh: Dalam dokumen http://www.foo.bar/info/data/omset.html Anda tempatkan sebuah Hyperlink kedokumen http:/www.foo.bar/info/ marketing/press.html. Maka link yang tampak adalah:

Press.

Jadi Anda memerintahkan browser untuk pindah ke direktori di atasnya, lalu ke cabang marketing. Di situ halaman press.html dipanggil. Kelebihan metoda yang rumit ini adalah: Anda dapat mengubah struktur halaman dengan mudah. Seluruh pohon direktori dapat dipindah –pindah, tanpa harus menulis ulang link ayng ada didalamnya. Hal yang sama berlaku bila Anda memindahkan situs ke server lain.

Stylesheet: Perhatikan kompatibilitas

Cascading stylesheets sangat membantu dalam merancang halaman web. Namun bila pe nggunaannya tidak tepat, Anda malah membuat banyak masalah baru. Soalnya tidak ada kompatibilitas antara Netscape Navigator dengan Internet Explorer. Kedua browser memiliki versi template yang berbeda. Sebelum menggunakan CSS, sebaiknya Anda lihat dulu mengenai kompatibiltas pada

http://webreview.com/wr/pub/guides/style/safegrid.html.

Juga disarankan CSS-Test-Suite:http://www.we3.org/Style/css/Test/. Cobalah halaman yang dibuat dengan CSS pada browser lama. Desainnya akan tampak buruk, tapi harus dapat dibaca.

Sound: Hindari suara keras di web

World wide web masih memilki beberapa kekurangan untuk elemen – elemen media sound dan musik. Radio Internet dan cuplikan musik memang masih digemari. Tatapi file WAV “ Selamt datang di homepage saya” yang di buat sendiri, akan sangat mengganggubagi pengunjung situs, demikian pula file MIDI yang terus - terusan berbunyi. Selain file WAV memakan bandwidth. Cuplikan lagu yang pendek saja membutuhkan tempat beberapa KB. Pada pokonya bunyi yang tidak di inginkan pasti mengganggu.

Java-Applets: Sebaiknya gunakan dengan hemat

Memang sangat menggoda untuk menempatkan Java-Applet dan animasi Shockwave yang cantik pada homepage Anda.

Api elemen – elemen seperti ini memakan waktu transfer dan sebaiknya hanya digunakan bila memang bermanfaat. Isi yang memerlukan Plug-In juga sebaiknya dihindari. Tidak setiap peselancar memiliki perlengkapan Plug-In yang lengkap, atau ingin men-download sekian banyak MB untuk melihat situs Anda.

HTML-Code: Source code sebaiknya langsing

Bagi para perancang yang membuat program HTML secara manual, tidak

perlu khawatir: Ia dapat menulis code yang langsing dan cepat tanpa

banyak pernik.

Tetapi ada masalah yang juga dapat timbul. Terutama bila Anda menggunakan berbagai font dan Tag. Tag ini harus Anda tempatkan pada setiap sel tabel, sehingga teks HTML menjadi banyak. Contohnya ;

Dengan cara ini, pada tabel yang besar tercipta banyak data yang tidak jelas. Lebih baik gunakan CSS:

Dengan Stylesheet di atas, Anda tentukan penggunaan font Arial pada seluruh tabel. Kini dapt di bedakan bahwa dengan CSS code menjadi lebih pendek daripada yang pertama. Kelemahan: Browser lama – dibawah versi 4 – tidak dapat menggunakan CSS.

Walaupun Anda menggunakan editor HTML seperti Fusion, hasilnya perlu diperiksa. Banyak program web editor cenderung menempatkan terlalu banyak Tag font. Karena itu periksalah apakah ada informasi yang tidak perlu dan buang bila ada.

Pada akhirnya Anda harus menerapkan disiplin diri dan membuat program HTML yang bersih untuk menghindari banyak kesalahan: Misalnya sebuah baris tabel hanya punya tag tanpa tag sebagai penutup.

DESIGN-HOMEPAGE

Delapan Prinsip Dasar

Untuk Situs Yang Sempurna

Perhatikan tip dibawah ini, dan lakukan untuk mendapatkan hasil rancangan web yang benar :

1. Tempatkan alamat e-mail Anda pada halaman pertama sehingga pengunjung dapat memberikan kritik dan sarannya.

2. Letakkan tanggal modifikasi terakhir (update) pada tempat yang mencolok sehingga pengunjung dapat langsung mengetahui, apakah sudah terdapat informasi baru sejak kunjungan yang lalu.

3. Tulis hal- hal baru pada halaman pertama. Sebaiknya buat bagian khusus yang terpisah.

4. Hindari pemakaian elemen- elemen yang tidak perlu, seperti Java Script Box, yang menampilkan ucapan selamat tinggal.

5. Perhatikan penulisan yang benar, dan periksa link minimal sebulan sekali.

6. Kunjungi sesering mengkin situs Anda sendiri. Kadang kala kesalahan baru terlihat setelah beberapa hari

7. Hindari link eksternal pada halaman pertama. Anda tentu tidak mengharapkan pengunjung langsung pergi ke situs orang lain.Pada halaman link lainnya, hal ini boleh –boleh saja.

8. Gunakan Meta-Tags. Dengan cara ini Anda membantu search engine untuk mengenali dan memangggil situs Anda.

Memahami Format File Gambar

Sejumlah format file untuk mendukung grafis dan image digital terus dikembangkan. Banyaknya pilihan yang tersedia menuntut Anda untuk memahami karakteristik dari setiap format file grafis dan image digital. Ini agar Anda bisa menyesuaikan penggunaannya untuk hasil yang optmal.

Contoh, tidak semua format file mendukung Web, / kalaupun bisa dipaksakan, halaman Web akan menjadi berat atau sulit didownload. Jika Anda menggunakan format file EPS untuk mendesain suatu Web, bisa dipastikan situs Anda akan menjadi berat dan lambat. Format file yang lebih cocok adalah format JPEG, GIF, / PNG.

Demikian juga sebaliknya. Format GIF / PNG jika digunakan untuk cetak offset maka hasilnya kurang memuaskan. EPS dan TIFF merupakan dua format file utama yang sering digunakan dalam menyimpan image / grafis warna dalam cetak offset karrena dua format ini memiliki dukungan warna yang sangat lengkap.

Perhatikan Konversi

Dalam proses produksi, Anda kadang-kadang juga perlu mengkonversi format vektor ke format raster / sebaliknya . Konversi dari format vektor ke format raster biasanya diperlukan pada saat memindahkan image ke bentuk pixel dari alat output yang digunakan untuk mencetak.

Mengkonversi grafis berbasis vektor ke image raster sangat mudah dilakukan, tetapi kadang – kadang proses konversi tersebut mengakibatkan beberapa informasi vektor seperti kontrol Bezier menjadi hilang. Sedangkan konversi dari format raster ke vektor biasanya diperlukan untuk mengimpor image raster kedalam ilustrasi berbasis obyek.

Jika dilakukan pembesaran maka image/grafis yang menggunakan format vektor akan tetap halus, sedangkan pada format raster menjadi bergradasi dan pixelnya menjadi kelihatan.

Format –format file yang berbentuk raster adalah TIFF, FlashFix, JPEG, PNG, GIF, dan PCD, sedangkan format file yang berbentuk vektor adalah EPS, DCS, dan PDF. Format vektor biasanya juga memungkinkan pencantuman data image raster, seperti grafik vektor.

Untuk memahami karakteristik masing – masing format file, silahkan melihat tabel di bawah ini .

Tabel Dukungan Warna, dukungan kompresi, dukungan Web, dan kedalaman warna unutk aneka format.

Format Ketersedian

warna Alpha

Channel Kompresi Dukungan untuk Web Kemudahan Download Clipping

Path Vektor/

Raster*** Bit Depth

Per Channel

EPS RGB Tidak JPEG Tidak Tidak Ya Vektor 8

DCS CMYK Ya JPEG Tidak Tidak Ya Vektor 8

TIFF RGB, CMYK, LAB LZW, JPEG

Grayscale, index** Ya Packbits Huffman CCITT* Ya Tidak Tidak Raster 8 dan16*

FlashFix RGB, Greyscale Tidak JPEG Ya Ya Tidak Raster 8

JPEG RGB, CMYK

Greyscale Tidak JPEG Ya Ya Tidak Raster 8

PDF RGB, CMYK, LAB JPEG, LZW Ya Ya Tidak Vektor 8

Greyscale Tidak ZIP, CCITT

PNG RGB, Greyscale Satu Variasi Ya Ya Latar

Transparan Raster 8

GIF Index Tidak Ya Ya Latar

Transparan Raster Maksimum

256 warna

PCD YCC Tidak Tidak Tidak Tidak Raster 8

* tergantung aplikasi

* Alternatif lain meskipun tetap menggunakan format TIFF

* Format vektor dapat memasukkan data image raster

Menyiapkan image untuk Web

Kualitas image yang diperlukan untuk halaman web jauh berbeda dengan tunturan image yang akan dicetak, image untuk web tidak membutuhkan resolusi yang tinggi karena ukuran image biasanya kecil agar halaman web tidak menjadi berat.

Untuk memperkecil ukuran image, resolusi bisa anda kurangi sampai 72dpi. Cara lain adalah dengan menurunkan kedalaman bit (bit depth) menggunakan software kompresi atau file kompresi JPEG. Jika aplikasi yang anda gunakan memungkinkan, gunakan bit depth 4 atau 8 bit per pixel.

Menyiapkan image untuk halaman web akan lebih efisien jika menggunakan aplikasi khusus seperti, debabelizer atau adobe image ready karena aplikasi-aplikasi ini memberikan banyak dukungan untuk image-image yang berukuran kecil.