Pengantar Web Design

Dalam dunia maya (internet) kita mengenal beberapa istilah tentang web, www, website, web pages, dan homepage. Bagi orang awan, istilah tersebut bisa saja diartikan sama. Ada sebagian masyakat kita mencantumkan alamat lengkap dengan imbuhan, misalnya homepage: www.toolkits.com atau website: www.desain2u.com atau alamat situs: www.entahkenapa.com dan lain-lain. Memang, sah-sah saja mencantumkan beberapa kalimat tersebut

karena memang intinya sama yaitu mencantumkan alamat situs

yang dapat dikunjungi. Untuk mengetahui arti yang sebenarnya, di

bawah ini terdapat sedikit ulasan beberapa istilah dalam internet

yang sering ditemui.

www (Word Wide Web) : merupakan kumpulan web server dari

seluruh dunia yang berfungsi menyediakan data dan informasi untuk

digunakan bersama-sama.

Web adalah adalah fasilitas hypertext yang mampu menampilkan

data berupa teks, gambar, suara, animasi, dan multimedia lainnya,

di mana di antara data-data tersebut saling terkait dan berhubungan

satu dengan yang lainnya. Untuk memudahkan dalam membaca

data tersebut diperlukan sebuah web browser seperti Internet

Explorer, Netscape, Opera, maupun Mozilla Firefox

Website (situs web) : merupakan tempat penyimpanan data dan

informasi berdasarkan topik tertentu. Diibaratkan web site ini seperti

buku yang berisi topik tertentu.

Web Pages (halaman web) : merupakan sebuah halaman khusus

dari situs web tertentu. Diibaratkan halaman web ini seperti

halaman khusus dari buku.

Homepage : merupakan sampul halaman yang berisi daftar isi atau

menu dari sebuah situs web.

Mendesain web bukan merupakan pekerjaan yang berat dan bukan

merupakan pekerjaan yang ringan. Apa maksudnya? Merancang

web bukanlah pekerjaan yang berat artinya siapapun bisa

menguasai dan membuatnya asalkan memiliki kemauan untuk

belajar. Namun merancang web (web design) bukanlah pekerjaan

yang ringan artinya tidak semua orang memiliki kemampuan yang

luas tentang beberapa aspek yang harus diketahui agar tampilan

web menarik sehingga banyak pengunjung yang datang.

Sebagai contoh, ketika kita membuat sebuah homepage (halaman

utama web) sangat lama proses aksesnya. Mengapa hal itu bisa

terjadi? Itu semua diakibatkan tidak adanya ketentuan besarnya file

halaman utama tersebut. Agar halaman web kita mudah diakses

oleh para pengunjung tentunya harus memiliki pengetahuan dalam

mendesain sebuah web.

Buku ini sengaja disusun untuk memandu para web designer

pemula agar menghasilkan sebuah website yang inovatif dan kreatif

secara profesional. Ulasan dalam buku ini menyangkut masalah

teknik pembuatan interface (halaman muka) sebuah website

menggunakan Adobe Photoshop kemudian diolah menggunakan

Macromedia Dreamweaver. Selanjutnya, dipercantik dengan

tambahan animasi yang dibuat menggunakan Macromedia Flash.

Jadi kita menggunakan 3 tools untuk membuat situs yang inovatif

dan kreatif secara profesional.

Dalam buku ini tidak lagi membahas secara teoritis tentang

penggunaan masing-masing tools namun langsung pada

permasalahan yang sering dijumpai ketika akan membuat sebuah

situs.

1.1. TIPS MEMBUAT WEBSITE PROFESIONAL

Terdapat beberapa point penting ketika membuat sebuah website

yang profesional.

1. Homepage (halaman utama) situs Anda harus dapat diakses

maksimal 8 detik atau dapat diakses melalui koneksi jaringan

internet minimal 28,8 kbps. Apabila proses koneksi

membutuhkan waktu yang sangat lama, hal ini akan berpotensi

hilangnya customer (pengunjung) yang tidak “betah” menunggu

terlalu lama. Akhirnya situs kita tidak akan dikunjungi olah para

“calon customer”.

2. Pastikan menyertakan META Tag pada masing-masing halaman

website Anda. META Tag adalah kode yang memungkinkan

search engine (mesin pencari seperti: Google) untuk

menentukan kata kunci yang relevan dari website Anda.

3. Pilihlah warna latar belakang (background) yang sesuai, jangan

menggunakan warna yang mempengaruhi teks untuk dibaca.

Warna situs menjadi sebuah ekspresi hati Anda. Warna orange

melambangkan keceriaan sedangkan warna ungu atau hitam

melambangkan kesuraman. Untuk itu pilihlah warna yang sesuai

untuk situs Anda berdasarkan isi yang terkandung dalam situs

tersebut.

4. Gunakan animasi seperlunya, jangan terlalu berlebihan karena

dapat mempengaruhi konsentrasi pengguna ketika sedang

membaca informasi. Selain itu, animasi juga dapat menghambat

akses ke halaman situs Anda. Sebuah animasi yang bagus

bukan menjadi jaminan bahwa situs Anda menarik perhatian

pengunjung.

5. Halaman Utama situs harus lebih spesifik agar para pengunjung

dapat mengetahui produk yang ditawarkan. Sebagai contoh, jika

situs Anda merupakan sebuah lembaga konsultasi maka

sebaiknya jasa-jasa konsultasi yang ditawarkan ditampilkan di

halaman utama. Jangan sampai pengunjung merasa bingung

dengan keberadaan situs Anda yang tidak jelas produk yang

ditawarkan.

6. Hindari pemasangan iklan (banner) di bagian atas website

Anda. Batasi jumlah banner yang akan ditayangkan, maksimal 2

dan idealnya cukup 1 banner. Semakin banyak jumlah banner,

semakin lama proses akses dan akan sangat mengganggu

konsentrasi pengguna ketika mengunjungi situs Anda.

7. Periksa ejaan yang salah dan pastikan gambar dan link

terhubung dengan baik sebelum ditampilkan secara on-line.

Kesalahan dalam mengetikkan alamat url mengakibatkan

halaman tersebut akan “ERROR”. Jika sebuah situs terdapat

salah satu atau beberapa halaman yang error menjadikan situs

tersebut nampak tidak profesional.

8. Lengkapilah website Anda dengan tombol navigasi yang mudah

dan tersusun dengan rapi pada bagian atas, bawah, kiri,

maupun kanan. Jika menggunakan tombol dalam bentuk

gambar, perlu diingat bahwa kemungkinan proses akses lebih

lama. Mengapa? Karena gambar memiliki ukuran yang cukup

besar, dan seperti kita ketahui. Sebuah halaman situs maksimal

berukuran tidak lebih dari 100kb.

9. Jika terpaksa harus menggunakan Frame, gunakan secara

tepat. Pada dasarnya, penggunaan Frame dalam sebuah situs

akan berkesan tidak profesional. Hindari halaman yang

memerlukan “scroll”, ini mengakibatkan pengujung kurang

nyaman untuk mencari informasi sehingga akan cepat-cepat

“kabur” dari situs Anda.

10. Perhitungkan jumlah klik yang dibutuhkan untuk pindah dari

halaman satu ke lainnya. Jika terlalu banyak klik akan sangat

membosankan bagi pengunjung. Anda bisa menerapkan sistem

navigasi yang lebih nyaman dengan menyertakan logo pada

setiap halamannya.

11. Jika menggunakan “JAVA” pada website Anda gunakan secara

tepat. Tawarkan “Java” atau “No Java” kepada pengunjung

karena dapat mempengaruhi kinerja masing-masing browser.

Hindari adanya iklan “pop up” yang akan membuat pengunjung

menjadi bosan

12. Jangan menambahkan “autoplay” suara ketika seseorang

mengunjungi situs Anda. Sebaiknya tawarkan, apakah

menggunakan intro beserta audio (suara) ataukah langsung ke

halaman utama.

13. Periksa website Anda dengan beberapa jenis browser karena

masing-masing browser memiliki kemampuan yang berbeda.

1.2. PRINSIP DALAM MENDESAIN WEBSITE

Ketika Anda mulai memikirkan merancang sebuah website, Anda

perlu memikirkan bagaimana pemilihan warna yang tepat sehingga

akan memberikan penilaian tersendiri kepada pengunjung tentang

website yang Anda buat dan bagaimana rancangan tata letak

(design layout) dapat membantu “mendesain secara kerja sama”

dalam sebuah tim.

Disain yang bagus hampir tidak kelihatan, namun jika disainnya

jelek maka akan memberikan dampak yang luar biasa. Jika disain

website Anda dirancang bagus dan tata letak informasi juga

membantu para pengunjung mudah menggunakan website tersebut,

pengunjung pasti akan kembali menjelajah website Anda. Namun

jika Anda tidak berpikir bagaimana mendisain dan memilih warna

yang baik maka akan memberikan dampak kepada

pengguna/pengunjung tersebut. Jika hal ini terjadi, jangan harap

pengunjung/pengguna akan kembali lagi mengunjungi situs Anda.

1.3. SOFTWARE DISAIN GRAFIS

Dalam merancang sebuah website, kita tidak bisa lepas dari

perangkat lunak untuk mengolah gambar (image) sebagai bagian

dari website. Ada beberapa alat disain grafis yang dapat digunakan

untuk membantu dalam membuat website yang cantik, diantaranya:

- Adobe Photoshop (http://www.adobe.com) : software ini

sangat populer dan dapat diandalkan untuk membuat dan

mengedit grafik maupun gambar fotografi.

- Adobe Illustrator (http://www.adobe.com) : software ini

digunakan untuk membuat gambar dalam bentuk vektor dan

dapat digunakan untuk membuat ilustrasi.

- PaintShop Pro (http://www.jasc.com) : software ini sama

dengan Adobe Photoshop, sedikit lebih canggih namun

masih kalah populer dibandingkan Adobe Photoshop.

- Macromedia Fireworks (http://www.macromedia.com) :

software ini sangat mirip dengan Adobe Photoshop, namun

tool ini berbasis vektor. Software ini mengijinkan semua

elemen dapat diedit kembali dan dapat berintegrasi dengan

Macromedia Dreamweaver.

- Macromedia Flash (http://www.macromedia.com) :

software ini dapat digunakan untuk membuat animasi dan

berbasis vektor untuk website.

1.4. FORMAT GRAFIS

Grafik/gambar dalam sebuah website dapat memberikan efek visual

yang luar biasa terhadap website tersebut, namun bisa menambah

waktu koneksi akibat banyaknya gambar yang ditampilkan. Grafik

dalam website dapat berupa statik, animasi, dan fotografi.

Agar koneksi ke website kita lebih cepat, perlu memahami beberapa

format file yang sering digunakan pada sebuah website,

diantaranya:

- GIF : memiliki warna 8-bit, mendukung dalam bentuk

transparan, mengkompresi area warna secara solid,

mereduksi jumlah warna dan menjalin untuk proses

download secara cepat, juga dapat digunakan untuk

membuat animasi dalam bentuk grafik (animated graphic).

- JPG : memiliki warna 24-bit,menjaga kualitas brightness dan

hue yang ditemukan dalam sebuah foto, dapat disimpan

dalam format berkualits tinggi maupun rendan (high or low

resolution), sebuah file jpg dapat pula digunakan versi

resolusi rendah (low resolution) dari gambar yang nampak

ketika gambar sedang didownload, tidak mendukung

transparansi.

- PNG : PNG-8 mendukung warna 8 bit, mengkompres area

warna yang pekat, menjaga detail ketajaman, mendukung

transparansi, kompresi lebih canggih dibandingkan gif

karena dapat mengkompresi sekitar 10-30% lebih kecil dari

format GIF.

Setelah melihat perbandingan beberapa format file grafis untuk web,

Anda dapat menentukan format apa yang akan digunakan sesuai

kebutuhan. Pada prinsipnya, semua format file tersebut dapat

dijadikan panduan dalam memilih format file yang tepat. Ada

beberapa bahan pertimbangan ketika memilih salah satu dari

beberapa format file tersebut, diantaranya:

- Usahakan ukuran file seminimal mungkin

- Selalu gunakan mode warna RGB

- Gunakan web pallete (216 web-safe colour)

-

Jika Anda memilih format file GIF : simpan sedikit warna jika perlu,

simpanlah sebagai interlaced .gif, buatlah latar belakang transparan

berwarna.

Jika Anda memilih format file JPG : pilih kualitas yang paling kecil

jika perlu, simpan sebagai progresive.

Posted in: Designer