BAB 3
MERANCANG WEB
 
Web yang sering dikunjungi orang merupakan nilai plus bagi seorang
web designer. Banyaknya pengunjung yang datang  dapat dijadikan
tolok ukur keberhasilan seseorang dalam merancang dan
mengembangkan sebuah website profesional.
Ada beberapa unsur yang mempengaruhi keberhasilan tersebut,
diantaranya: mudah digunakan, proses koneksi cepat, tampilan
menarik, perpaduan warna sangat tepat, navigasi mudah dipahami
dan digunakan, isi artikel sangat berguna, dan masih  banyak lagi
unsur lain. Semua itu bergantung pada respon pengunjung/
pengguna terhadap website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas
sebuah institusi, sama pentingnya dengan alamat perusahaan.
Website dapat dijadikan “guide” bagi pelanggan untuk mengetahui
lebih jauh tentang profil sebuah institusi secara online. Ada beberapa
kelebihan dan manfaat website sehingga banyak orang
membutuhkan kehadirannya, diantaranya:
-  Memiliki alamat secara online
-  Jangkauan tanpa batas sehingga dapat diakses oleh
pengguna di seluruh dunia dalam waktu yang tak terbatas (24
jam sehari tanpa henti).
-  Dapat berfungsi sebagai identitas pribadi/perusahaan
tentang profil diri agar dapat  diketahui oleh para customer
dalam menjalankan bisnis sehingga komunikasi dapat
berjalan dengan mulus.
-  Situs personal dapat berfungsi sebagai juru bicara untuk
menuangkan ide, gagasan, kritik, saran, berbagi ilmu, dan
suara hati lainnya yang ingin dituangkan ke dalam situs
melalui tulisan. Pada akhirnya menjadi “image branding”
terhadap orang yang bersangkutan. Hal ini sudah dilakukan
oleh banyak orang, dan ini  terbukti banyaknya orang
  21
“selebritis IT” hanya karena  tulisan yang ada di situs
pribadinya.
-  Menjadi cermin pribadi maupun citra perusahaan apabila fitur
yang disediakan cukup interaktif dan dinamis.

Semua manfaat itu tidak akan terwujud jika bentuk dan fitur website
“amburadul”. Itu semua sangat  bergantung pada sang “web
developer” dalam memvisualisasikan profil perusahaan ke dalam
website. Meskipun demikian, sebagai pemilik situs juga harus ikut
terllibat dalam pembentukan dan pengembangan website yang
interaktif dan dinamis agar sesuai dengan sasaran dan tujuan yang
ingin dicapai. Hal inilah yang jarang disadari oleh para pemilik situs.
Umumnya para pemilik situs mempercayakan seluruh
pengembangannya kepada sang “web developer”
Berikut ini ada  beberapa tips untuk calon pemilik situs dalam
memberikan masukan kepada pengembang web agar pembuatan
situs .dapat berjalan dengan lancar sehingga tidak melenceng dari
sasaran dan tujuan.
-  Melakukan survei dengan mesin pencari (search engine)
tentang contoh situs yang sudah ada dan situs pesaing 
bisnis yang sudah muncul.  Pelajarilah dengan seksama
terhadap situs tersebut, jika perlu tulislah poin-poin penting
yang menjadi andalan situs tersebut. Hal ini akan sangat
membantu dalam menentukan isi situs yang akan
ditampilkan.
-  Dari hasil survei tersebut, tulislah keinginan Anda tentang isi
situs yang akan dibuat secara detail. Catatan tersebut
menjadi acuan untuk memilah-milah bagian yang penting dan
yang tidak penting. Jika memiliki anggaran yang terbatas,
maka poin-poin yang penting dapat didahulukan untuk
ditampilkan.
-  Buatlah sketsa tata letak halaman (coretan di atas kertas
menggunakan pensil untuk  membuat kotak-kotak yang
dinamai). Bayangkan tentang tata letak (layout) web yang
akan dibuat, Susunlah bagian yang akan  ditonjolkan
(eye-catching) pada atas terlebih dulu dan yang tidak penting
  22
pada bagian yang lain. Usahakan membuat  pula halaman
lain jika masing-masing halaman terdapat perbedaan bentuk.
- Susunlah kata kunci (keyword) yang digunakan sebagai
acuan pencarian. Pikirkanlah  secara seksama tentang isi
situs Anda untuk menentukan  kata kunci yang tepat agar
pengguna dapat menemukan  situs Anda secara cepat
berdasarkan kata kunci yang dimasukkan. Jika memiliki
beberapa kata kunci, urutkan kata kunci tersebut
berdasarkan prioritas. (misal: datakom, lintas, buana, penebit,
buku, bermutu).
- Periksa kembali data-data dalam situs sebelum di-launching.
Hal ini untuk memudahkan dalam perbaikan situs sebelum
diletakkan secara on-line. 


3.1. KATEGORI WEB

Website yang dibuat oleh seorang pengembang web (web developer)
harus benar-benar mencerminkan identitas suatu institusi, jangan
sampai bertolak belakang antara isi (content) dengan bentuk dan tata
letak situs itu sendiri. Ada beberapa point yang barus diperhatikan,
salah satunya adalah tentang kategori situs itu sendiri. Sebagai
contoh, jika seorang pengembang web diberi tugas untuk membuat
sebuah situs anak-anak maka dia harus mengetahui hal-hal yang
berhubungan dengan  dunia anak-anak. Menyangkut masalah
pemilihan jenis huruf (font), kombinasi warna, penggunaan gambar,
animasi, dan unsur lain yang mendukung.

Pemilihan warna dan jenis font yang digunakan sangat
mempengaruhi  kesan yang melekat di benak para pengguna/
pengunjung. Sebagai contoh, jika Anda membuat situs anak-anak
sebaiknya menggunakan warna yang cerah dan disukai anak-anak,
sisipkan pula gambar dan animasi  yang dapat membangkitkan
keinginan sang pengguna untuk lebih lama lagi membaca informasi
yang disajikan.

Sebaliknya, jangan terlalu banyak menyisipkan animasi maupun
gambar pada situs dalam kategori referensi, misal: kamus,
perpustakaan, dan lain-lain.
  23

Meskipun belum ada situs resmi  yang membuat kategori tentang
sebuah website, berikut ini terdapat informasi yang sedikit membantu
dalam mengelompokkan website berdasarkan kategori.

SITUS BISNIS DAN EKONOMI: Asosiasi & Organisasi, E-commerce
dan Jasa, Finansial & Investasi, Bussines Center, dan lain-lain.





Gambar 3.1.1. Contoh situs Bisnis dan Ekonomi
  24
SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, Portal
Berita, Radio, Surat Kabar, Tabloid, Televisi, dan lain-lain.





Gambar 3.1.2. Contoh situs Berita dan Media

  25
SITUS HIBURAN : Film, Games (Permainan), Humor, Musik,
Ringtones, Selebritis, dan lain-lain





Gambar 3.1.3. Contoh situs Hiburan


  26
SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi,
Mahasiswa, Teman dan  Keluarga, Tentang Remaja, Tips dan Trik,
dan lain-lain.





Gambar 3.1.4. Contoh situs Pribadi

  27

SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, Informasi
Kota, Gaya Hidup, Jual Beli, Sains dan Teknologi, dan lain-lain.





Gambar 3.1.5. Contoh situs Informasi

  28
SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis,
Hacking, Internet dan Web, Jaringan, Multimedia, Pemrograman,
Perangkat Keras, Perangkat Lunak, Tutorial, dan lain-lain.





Gambar 3.1.6. Contoh situs Komputer dan Internet

  29

SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan,
Sains dan Teknologi, Sosial, dan lain-lain.





Gambar 3.1.7. Contoh situs Organisasi

  30
SITUS OLAH RAGA : Olah Raga Air, Baseball, Bela Diri, Basket,
Bola Voli, Bowling, Bulu Tangkis, Catur, Golf, Otomotif, Sepak Bola,
Skateboard, Tenis, Tinju, dan lain-lain. 





Gambar 3.1.8. Contoh situs Olah Raga

  31
SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, Pengobatan
Alternatif, Rumah Sakit, dan lain-lain.





Gambar 3.1.9. Contoh situs Kesehatan

  32
SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, Kedutaan
Asing, Kedutaan Indonesia, Politik, Kementerian, Militer, Organisasi,
Perwakilan Kota, dan lain-lain





Gambar 3.1.10. Contoh situs Pemerintah

  33
SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah,
Edukasi, Bahasa, Komputer, Kursus dan Pelatihan, Perguruan Tinggi,
Sekolah Menengah, dan lain-lain





Gambar 3.1.11. Contoh situs Pendidikan

  34
SITUS REFERENSI : Ensiklopedi, Kamus,  Perpustakaan, Sejarah,
Museum, Peta, dan Lain-lain





Gambar 3.1.12. Contoh situs Referensi


  35
SITUS REGIONAL : Aceh, Bali, DKI Jakarta, Jawa, Kalimantan,
Sulawesi, Sumatera, dan lain-lain
 




Gambar 3.1.13. Contoh situs Regional

  36
SITUS REKREASI : Candi,  Danau, Gunung, Kolam Renang, Laut,
Bioskop, Games, dan lain-lain





Gambar 3.1.14. Contoh situs Rekrasi


  37
SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, Teknologi
Terpadu, Teknologi Tepat Guna, dan lain-lain





Gambar 3.1.15. Contoh Situs Sains dan Teknologi

  38
SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur dan
Tradisi, Museum dan Galeri, Sastra, Seni Peran (Acting), Seni Visual,
Seni Desain, dan lain-lain





Gambar 3.1.16. Contoh Situs Seni dan Kerajinan
  39

SITUS SOSIAL DAN  BUDAYA : Agama, Anak-anak, Hobi, Keluarga,
Komunitas, Lingkungan, dan lain-lain





Gambar 3.1.17. Contoh Situs Sosial dan Budaya
  40
SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips,
Jasa Transportasi, Restoran, Petunjuk Wisata, dan lain-lain





Gambar 3.1.18. Contoh Situs Wisata

  41
3.2. DASAR-DASAR PEMILIHAN WARNA 

Seperti telah dijelaskan di awal, pemilihan warna yang tepat sangat
mempengaruhi respon pengunjung terhadap situs kita. Pilihlah warna
sesuai dengan tema dalam situs tersebut. Sebagai contoh, jika situs
berisi informasi tentang wisata pilihlah warna yang modern. Misalnya
warna merah, biru, orange, dan lain sebagainya.  Intinya pilihlah
warna yang “eye cacthing” bagi pengguna agar menimbulkan rasa
ingin tahu tentang informasi penting dalam situs tersebut.

Memang, pemilihan warna sebuah situs bergantung pada warna yang
disukai oleh “si pembuat” itu sendiri dan selera pemilih situs. Para
pengembang web harus mengikuti kemauan para pemesan, yang
notabene pemilik situs. Pengembang web perlu meminta referensi
kepada calon pemesan tentang warna yang disukai agar ketika
sampai proses pengembangan tidak terjadi perubahan warna yang
sangat drastis. Pengembang juga tidak boleh memaksakan diri untuk
memilih warna sesuai seleranya. 

Warna sebuah situs memiliki makna tersendiri, dan hanya pemilik
situs saja yang tahu tentang makna tersebut. Berikut ini terdapat
ulasan mengenai makna warna yang dapat diterapkan ketika
membangun sebuah situs yang profesional. Warna-warna tersebut
memiliki makna yang positif dan negatif karena warna tersebut sangat
mempengaruhi emosional pengunjung untuk menentukan langkah
selanjutnya. Warna dapat dikelompokkan menjadi tiga bagian yaitu:
warna sejuk, warna hangat, dan warna netral. 

WARNA-WARNA SEJUK : Biru, Hijau, Ungu, Pirus dan Perak.
Warna-warna sejuk cenderung berpengaruh memberikan perasaan
tenang bagi yang melihatnya.  Meskipun digunakan sendiri,
warna-warna ini bisa mempunyai rasa dingin atau impersonal,

Berikut ini makna dari warna dalam kategori sejuk:
Biru
-  Positif: keheningan, mencintai, kesetiaan, rasa aman,
percaya,  intelligence, berhubungan  dengan ilmu
pengetahuan (sciences)
-  Negatif: kedinginan, ketakutan, kejantanan

  42

Hijau
-  Positif: berhubungan dengan uang, pertumbuhan, kesuburan,
kesegaran, (penyembuhan/pengobatan), healing, keteduhan
-  Negatif: iri hati, kecemburuan, kesalahan, kekacauan

Ungu
Ungu adalah kombinasi biru dan  merah, oleh sebab itu ditemukan
baik kategori-kategori hangat maupun sejuk
-  Positif: raja, kaum ningrat, spirituality, kemewahan, ambition
-  Negatif: misteri, kemasgulan

Pirus
- Positif: rohani, sembuh, perlindungan, canggih
(sophisticated)
-  Negatif: cemburu, kewanitaan

Perak
-  Positif: glamor, tinggi, anggun, halus dan rapi (sleek)
-  Negatif: pengkhayal, tidak tulus

WARNA-WARNA HANGAT : Merah, merah muda, kuning, orange,
ungu, dan emas. Warna  hangat cenderung mempunyai suatu efek
kegairahan bagi yang  melihatnya. Oleh karena itu ketika warna ini
digunakan sendiri dapat menstimulasi, membangitkan emosi
kekerasan/kehebatan dan kemarahan. 

Berikut ini makna dari warna dalam kategori sejuk:
Merah
-  Positif: cinta, energi, kuasa, kekuatan, penderitaan, panas
-  Negatif: kemarahan, bahaya, peringatan, ketidaksabaran

Merah muda
-  Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka
melucu
-  Negatif: kelemahan, kewanitaan, ketidak dewasaan


  43
Kuning
- Positif: terang/cerdas, energi, matahari,  kreativitas, akal,
bahagia
-  Negatif: penakut, tidak bertanggungjawab, tidak stabil

Orange
- Positif: keberanian, kepercayaan, kehangatan/keramahan,
keakraban, sukses
-  Negatif: ketidak-tahuan, melempem, keunggulan

Ungu
Warna ungu ditemukan  di dalam kedua-duanya warna dingin dan
hangat
-  Positif: royalti, kebangsawanan, kerohanian, kemewahan,
ambisi
-  Negatif: kegaiban, kemurungan

Emas
-  positif: kekayaan, kemakmuran, berharga, tradisional
-  negatif: ketamakan, pemimpi

WARNA-WARNA NETRAL : Coklat, berwarna coklat, gading, kelabu,
putih dan hitam. Warna netral adalah suatu pemilihan agung untuk
bergaul dengan suatu palet (lukis) hangat atau dingin. warna-warna
netral sangat baik untuk latar belakang dalam suatu situs.
Tambahkan warna hitam untuk menciptakan suatu yang lebih gelap ”
dan keteduhan” tentang suatu warna utama.

Berikut beberapa makna dari beberapa warna netral:

Hitam
- Positif: perlindungan, dramatis, serius, bergaya/anggun,
formalitas
-  Negatif: kerahasiaan, kematian, kejahatan/ malapetaka,
kegaiban

Abu-abu
-  Positif: keamanan, keandalan, kecerdasan/inteligen, padat, 
konservatif
  44
-  Negatif: muram, sedih, konservatif

Coklat
-  Positif: ramah, bumi, keluar rumah, umur panjang,
konservatif
-  Negatif: dogmatis, konservatif

Tan ( wol halus yang masih putih)
-  Positif: ketergantungan, fleksibel, keriting, konservatif
-  Negatif: tumpul, membosankan, konservatif

Gading
-  Positif: ketenangan, kenyamanan, kebersihan/kesucian,
hangat
-  Negatif: lemah, tidak stabil

Putih
-  Positif: kebaikan, keadaan tak bersalah, kesucian, segar,
gampang, bersih,
-  Negatif: musim dingin, dingin, jauh


Selagi tidak ada kemutlakan “pembenaran” untuk mewarnai sebuah
website, Anda perlu  mengetahui sasaran  audience, dan
mempertimbangkan respon mereka tentang warna yang digunakan. 
Faktor mendasar yang perlu dipertimbangkan untuk target
pengguna/pengunjung  adalah perbedaan umur/zaman, perbedaan
tingkatan/kelas, perbedaan jenis kelamin dan keseluruhan
kecenderungan warna.

Perbedaan umur/zaman merupakan  faktor pokok yang tidak boleh
diabaikan. Jika yang menjadi target adalah anak remaja (ABG) dan
anak-anak, maka mereka menyukai warna terang, warna dasar,
warna primer merah, biru, kuning dan hijau. Berbeda dengan orang
dewasa, yang umurnya lebih tua, mereka akan menyukai warna yang
lebih gelap, sama dengan warna dari kelompok warna-warna netral.

Perbedaan kelas adalah faktor pokok lain yang memiliki pengaruh
dalam memilih warna. Sebuah riset di Amerika Serikat telah
  45
menunjukkan bahwa kelas pekerja  menyukai warna seperti biru,
merah, hijau, dan lain lain. Sedangkan mereka yang lebih terdidik
cenderung menyukai yang lebih mengaburkan warna seperti taupe,
warna biru langit, celadon, ikan salem, dll.

Perbedaan jenis kelamin merupakan salah satu faktor nyata dalam
memilih warna. Pria cenderung menyukai warna dingin (coo) seperti
hijau dan biru, sedangkan wanita menyukai warna lebih hangat, yaitu
merah dan orange. Jika kita  memiliki audience (pendengar/
pemerhati) keduanya  (laki-laki dan perempuan), yang  sebaiknya
mempertimbangkan pencampuran beberapa warna dari warna  cool
dan hangat. 

Dengan mengetahui target  audience dan efek yang berbeda dari
warna yang ditimbulkan, kita memperoleh suatu kemampuan  lebih
besar untuk menentukan warna apa yang terbaik untuk menarik
pengunjung baik pria maupun wanita.

Satu hal lagi yang perlu diperhatikan, pengunjung web biasanya
menggunakan monitor  berbeda, browsers berbeda, dan sistem
operasi berbeda. Itu hampir mustahil untuk memastikan bahwa warna
yang kita buat akan sama pada tiap-tiap komputer seperti halnya
dicetak. Jangan hanya terkait dengan perbedaan pada komputer
yang berlainan, tetapi bagaimana kita mencoba menjadikan
penggunaan warna menjadi konsisten. Bagaimana kita menciptakan
suatu palet warna untuk perusahaan, identitas merek, atau warna
produk, konsistensi adalah kunci. Gunakanlah warna yang sama
pada seluruh usaha pemasaran untuk menciptakan keakraban
dengan produk atau  perusahaan. Konsistensi akan membantu
menarik pengunjung. Warna yang ditampilkan di website harus sama
dengan warna dalam bentuk pulikasi (booklet, flyer, pamflet, dan
lain-lain yang sejenis).

3.3. MENGATUR LAYOUT

Dengan melihat beberapa perbandingan situs  di atas tersebut, kita
dapat menentukan tampilan layout (halaman utama) sebuah website.
Sebagai pengembang web tentunya sudah bisa membedakan bentuk
yang cocok untuk yang akan dibuat menurut kategorinya. 
  46

Ketika merancang tata letak (layout) halaman web bisa dapat
menggunakan beberapa teknik, salah satunya adalah dengan cara
membuat sketsa pada kertas gambar menggunakan pensil. Atau
dapat juga membuat sketsa menggunakan program pengolah vektor
seperti CorelDraw, Adobe Illustrator, maupun Macromedia Freehand.

Pada contoh berikut ini, penulis memanfaatkan CorelDraw untuk
membuat sketsa layout halaman web. Sebagai bahan praktek untuk
membuat website, berikut ini merupakan bentuk sketsa layout
halaman web sebagai panduan untuk membuat navigasi maupun fitur
lain yang diperlukan.

 
Gambar 3.2.1. Bentuk Layout Situs Berita dan Media
  47
 
Gambar 3.2.2.  Bentuk Layout Situs Bisnis dan Ekonomi



Gambar 3.2.3. Bentuk Layout Situs Pribadi
  48


Gambar 3.2.4. Bentuk Layout Situs Bisnis

Setelah membuat beberapa bentuk layout, langkah selanjutnya
adalah mengembangkan sketsa tersebut menjadi sebuah tampilan
web yang inovatif menggunakan  beberapa tool yaitu: Adobe
Photoshop sebagai desain tampilan, Macromedia sebagai pengatur
teks dan menu pop up, dan Macromedia Flash sebagai animasi.