MENDESAIN WEB
Whew, dunia web design makin seru makin menantang, apalagi sekarang jamannya udah jaman Web 2.0. Kekuatan design sebuah website, standarisasi, usability, interactivifty, dan segambreng parameter lain menjadi tolak ukur kualitas sebuah website. Serem? Serem sih, tapi kenapa gak berusaha “dijinakin” aja biar ga serem lagi?

Kita liat yang paling basic aja dulu. Selama ini sebuah website didesign atau dibangun dengan beberapa elemen dasar yang sempet saya catet itu adalah sebagai berikut:

• Resolusi
• Mendesain untuk browser
• Web-safe color
• Graphics compression
• Text

RESOLUSI

Resolusi adalah sebuah perjuangan (itu mah revolusi). Jadi gini… dalam setiap media itu ada yang namanya unit satuan ukur (meter, centimeter, dll). Nah, berurusan sama yang namanya web design juga tentu ada unit ukurnya berkaitan dengan media-medianya. Dan ada beberapa hal tentang resolusi yang perlu kita tahu.

Screen Resolution

Resolusi monitor. Ukuran/dimensi sebuah monitor yang akan dijadikan target media design kamu. Saat ini ada berbagai macam ukuran monitor mulai dari yang 800×600, 1024×768, dan lain-lain. Kita perlu menentukan target resolusi screen untuk layout website kita, apakah full screen di salah satu ukuran tersebut, atau hanya beberapa persen dari lebar monitor. Ada juga jenis layout yang disebut ‘liquid’ atau ‘fluid’ dimana lebar layout tersebut elastis mengikuti lebar screen monitor. Terserah…

Image Resolution

Resolusi sebuah image pun perlu dipertimbangkan, kaitannya dengan kualitas dari visualisasi image/grafis. Grafis untuk layout atau foto yang mau ditampilkan. Selain digunakan untuk tampilan pada monitor image resolution juga digunakan sebagai acuan kualitas sebuah gambar pada media cetak. Tentunya beda antara penggunaan besar image resolutin untuk website dan untuk cetak. Standar resolusi image untuk website menggunakan 72ppi, gunakanlah photoshop atau graphic editor lainnya untuk mendapatkan resolusinya.

DESIGN UNTUK BROWSER

Berikutnya yang perlu dijadikan pertimbangan adalah browser. Ya, browser adalah sejenis brownies jenis baru Browser itu software yang dipakai internet surfer untuk browsing/jalan-jalan ke sebuah website. Internet Explorer, Mozilla Firefox, dan Safari itu tuh yang namanya browser…ya ampun, cape duer hari gini gak tau artinya browser. Hihi…

Browser populer saat ini

2007	IE7	IE6	IE5	Fx	Moz	S	O
December	21.0%	33.2%	1.7%	36.3%	1.4%	1.7%	1.4%

source: W3Schools.com

IE: Internet Explorer,
Fx: Firefox,
Moz: Mozilla, S: Safari, O: Opera

Estimasi Ukuran Browser

Setiap browser punya estimasi ukuran fix yang berbeda untuk layout. Mmm, gimana jelasinnya? Gini lho, space ruang untuk tampilnya sebuah website itu relatif besarnya. Tergantung seberapa tinggi toolbar dari browser si pengguna. Browser yang toolbarnya dipenuhi plugin seperti Yahoo toolbar atau lainnya tentu berbeda tingginya dengan browser yang tanpa plugin. Berikut tabel estimasi standar dimensi space browser (lebar minus scrollbar, tinggi minus toolbar dan status bar):

Ukuran monitor	IE6	Firefox	Opera	Mozilla	Netscape
800 x 600	779 x 400	781 x 434	777 x 427	779 x 420	781 x 389
1024 x 768	1003 x 568	1005 x 602	1001 x 595	1003 x 588	1005 x 557

Percentage Based Design

Maksudnya? Gini, ada satu cara untuk menyiasati perbedaan dimensi browser agar layout kita selalu tampil penuh di browser yang tampil di monitor dengan resolusi yang berbeda. Menggunakan persen untuk ukuran lebar layout akan menjadikan layout kita otomatis ngepas (stretch) lebarnya walaupun website kita diakses dengan screen resolution yang berbeda ukuran. Misal, kamu menggunakan monitor 800 x 600 px dan menggunakan lebar layout 779 x 400 px. Di resolusi 1024 x 768 layout kamu akan menjadi kecil dan menyisakan space kosong di kanan kiri (jika layout kamu center terhadap body)

Gimana kalo desain layout saya buat 1024 x 768 (ukuran layout kamu mungkin 1003 x 568 px, ini akan full stretch di resolusi tersebut). Tapi layout ini akan tampil dengan horizontal scrollbar di monitor pengunjung website kamu jika mereka make monitor 800 x 600. Ih, mau ngerepotin pengunjung website kamu? Nyuruh-nyuruh mereka scrolling dari kiri ke kanan untuk baca website kamu? Walhasil web kamu bakal diclose a.s.a.p olehnya…

Jelek kan? Ya, itu sih balik lagi ke selera asal sebenernya. Kalau pengen selalu tampil full dari kiri ke kanan, tehnik ini akan mengatasi empty space dan horizontal scrolling tadi di semua screen resolution.

PEWARNAAN YANG WEBSAFE

Setiap operating system punya pallete warna yang berbeda. Windows dan OS X tidak mempunyai perpustakaan wanrna yang sama loh. Jadi hati-hatilah menggunakan warna, gunakan websafe color atau warna yang kamu gunakan munculnya agak berbeda di operating system lain. Websafe color adalah 256 warna (bisa lihat di photoshop atau di sini).

GRAPHICS COMPRESSION

Optimalisasi graphic untuk penggunaan dalam website.

• GIF (Graphics Interchange Format)Color depth 1-bit (2 warna) hingga 8-bit (256 warna), bisa transparency, biasa digunakan untuk animasi sederhana, ukuran file 20%-90% dari ukuran file aslinya.
• JPEG (Joint Photographic Experts Group)
  Color depth antara 8-bit (256 warna) atau 24-bit (16,777,216 warna), bisa diatur kualitasnya dengan persentase, ukuran file 5%-20% dari file asli.
• PNG (Portable Network Graphics)
  Color depth antara 8-bit (256 warna) atau 24-bit (16,777,216 warna), mendukung alpha channels dalam transparansi, mendukung gamma correction untuk cross platform, file size 5% – 25% dari file asli. PNG adalah kompresi grafis pengembangan dari GIF. Jauh lebih baik dari GIF hanya saja distribusi renderingnya masih belum didukung oleh beberapa browser (IE misalnya, damn I hate IE!™)

TEXT

Sama seperti websafe colors, penggunaan jenis font pun terbatas. Beda operating system beda pula font-font standar bawaannya. Penggunaan font-font standar sangat disarankan untuk menampilkan teks dalam halaman website.

Standar font-family untuk website:

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

Nah, panjang bener yak. Wah itu baru belum seberapa coy! Loe kira desain web gampang? Emang gampang… Masih ada segambreng tuh di gudang - usability, accessibility, sampe ke interactifity masih perlu dipelajari kalo mau jadi web designer yang kick azz…