K
emampuan Anda dalam men-desain website bisa digunakan un-tuk menghasilkan uang. Namun, jika Anda ingin menjalankan bisnis men-desain website, Anda juga harus memiliki pola pikir dan proses kerja yang tepat agar desain yang Anda buat tidak gagal. Desain yang gagal sebenarnya bukan berarti web-site rancangan Anda terlihat buruk. Kega-galan bisa juga terjadi karena secara fungsi, website yang Anda buat tidak dapat digu-nakan dengan semestinya atau target web-site tidak tercapai.Untuk mencapai kesuksesan dalam merancang dan mendesain website, sebaik-nya sesuaikan desain yang Anda buat den-gan target yang Anda harapkan. Tentunya, semua itu harus sudah tertuang dalam sa-tu konsep desain, mulai dari latar bela-kang website, target yang akan dicapai, warna utama yang digunakan, hingga
ga-Mendesain website tentu menyenangkan. Desain bisa dimulai dari halaman kosong hingga
menjadi suatu website yang menarik. Tambahan unsur artistik yang kuat bisa membuat
website mempunyai daya tarik lebih dan layak dipamerkan ke teman-teman Anda.
ya desain (style) untuk website yang akan digunakan.
Dalam satu proses desain, ada alur ker-ja yang harus dikerker-jakan langkah demi langkah. Sayangnya, yang banyak terjadi saat ini, para desainer (khususnya yang baru memulai bisnis ini) dan pekerja free-lance melakukan proses desain tanpa alur yang benar. Terkadang, mereka hanya ter-fokus pada hasil akhir suatu desain yang dibuat. Berikut adalah alur proses desain yang umum.
1
Perencanaan
Sebelum Anda memulai mengira-ngira desain yang akan dibuat, membayangkan warna yang akan dipakai, hingga menen-tukan teknologi apa yang akan digunakan untuk mendukung website tersebut, se-baiknya Anda mengumpulkan terlebih
Mendesain Website
dahulu data yang menjadi dasar pembua-tan website tersebut. Data-data tersebut di antaranya adalah target umum dari web-site, target pembaca, siapa saja yang boleh melihat website, apa yang diinginkan user dari website, menentukan daya tarik web-site, keuntungan yang diperoleh pengun-jung, update website, dan masih banyak lagi.
Jika Anda sudah memiliki data-data tersebut, Anda sudah bisa memikirkan model, warna, huruf, animasi, ilustrasi, dan teknologi untuk website yang akan Anda desain. Sebagai contoh, Anda di-minta (klien) untuk membuat website partai politik. Setelah dipelajari, Anda mendapatkan data sebagai berikut:
Warna organisasi: Merah muda Logo organisasi: Kelinci tersenyum Target user: Kader-kader baru
Target pengunjung: Semua orang usia 17
dan kegiatan partai.
Dari data tersebut, secara teknis Anda me-merlukan teknologi antara lain:
Database alamat cabang partai. Database berita dan kegiatan. Form pendaftaran kader baru. Animasi logo dengan warna partai. Hosting website yang cepat diakses.
2
Menyusun Isi Website
Setelah proses perencanaan di atas, Anda bisa memulai proses menyusun isi website (konten). Penyusunan menu yang baik sangat membantu user dalam
TEMPLATE Dalam satu website, terdapat lebih dari satu macam template. Sebaiknya sesuaikan dengan jenis konten yang akan ditampilkan.
SITEMAP Contoh site map yang menggunakan Back Office Website (BOW) untuk mengelola setiap konten yang ada dalam website.
rikan manfaat kepada usernya akan mu-dah dilupakan atau mungkin tidak akan dikunjungi lagi di kemudian hari. Keper-cayaan user terhadap keabsahan isi pada website berita juga sangat penting. Jika ke-percayaan itu dapat dijaga dan website itu selalu memberikan berita yang baik, ber-kualitas, dan cepat, kelak user akan kemba-li lagi untuk mendapatkan berita terbaru.
Site Map
Dari seluruh data yang ada, Anda bisa mengelompokkan dan menyusun konten dalam suatu struktur menu (umumnya disebut Site Map). Site map merupakan
salah satu fasilitas website yang menam-pilkan seluruh struktur menu website. Contoh Site Map dapat dilihat di bawah:
Home
Tentang Partai Misi & Visi
Susunan Pengurus Partai Sambutan Ketua Umum Partai Agenda Kegiatan
Kegiatan Pusat Kegiatan Daerah Galeri Foto
Berita Partai Kontak & Informasi
Site map perlu disertakan dalam suatu proposal desain website. Hal ini akan membantu klien melihat bagaimana per-usahaan atau organisasinya tertuang da-lam menu website. Site map juga dapat mengarahkan klien dalam mempersiap-kan konten untuk tiap menu yang ada, menyediakan foto-foto, bagan, brosur produk, dan sebagainya. Untuk melengka-pi proposal, sebaiknya site map disajikan dengan baik dan menarik.
Selain untuk keperluan website, site map juga bisa dijadikan dasar acuan pem-bangunan suatu website yang akan dise-pakati antara desainer web dan klien. Dengan begitu, apa yang akan dibuat ti-dak akan keluar dari apa yang ada pada site map.
Search Engine
PRAKTIK Website
fasilitas Search Engine. Fasilitas ini ber-man faat untuk mencari data yang ada di dalam sekian banyak konten pada website. Jika Anda tidak bisa membuat sendiri fasi-litas search engine ini, Anda bisa meman-faatkan fasilitas gratis dari website lain, seperti Google Search yang dapat dipasang pada website Anda.
3
Desain
Dalam membangun suatu website, banyak desainer web yang langsung masuk ke pro-ses desain tanpa melalui dua propro-ses di atas (perencanaan dan menyusun konten). Ca-ra seperti itu sebaiknya dihindari karena umumnya akan menghasilkan desain yang "gagal". Pendek kata, desain tersebut dapat dikatakan tidak didasari konsep yang kuat.
Proses mendesain website juga harus memikirkan resolusi layar website. Oleh karena itu, Anda perlu mengetahui rata-rata resolusi website yang nyaman dibaca oleh user. Berdasarkan survei dari berbagai website statistik mengenai resolusi layar ini, resolusi 1024x768 pixel merupakan resolusi layar monitor yang paling banyak
yang ada di website dan harus tampil me-narik. Apabila tampilan tidak menarik, umumnya user akan enggan masuk lebih dalam lagi untuk menyusuri website. Jan-gan sampai website Anda memiliki banyak informasi yang mungkin menarik tetapi tidak sampai ke user.
Di dalam home page, sebaiknya hindari unsur-unsur yang menyusahkan user. Se-bagai contoh adalah animasi flash. Anima-si flash mungkin akan menarik bagi pe-ngunjung yang baru pertama kali melihat website Anda. Namun, bagi user yang per-nah mengunjungi sebelumnya mungkin tidak menarik lagi sehingga diperlukan tombol "Skip Intro" untuk bisa langsung masuk ke halaman utama (main page).
Saat ini, banyak website yang menjadi-kan home page merangkap sebagai main page (halaman utama). Biasanya, website yang demikian itu akan menguraikan se-mua menu dalam halaman tersebut me-manjang ke bawah.
Main Page Design
Main page (halaman utama) merupakan halaman yang menjadi titik balik dari me-nu yang ada. Seperti yang telah diuraikan di atas, main page bisa juga sebagai home page, yaitu halaman yang tampil ketika digunakan oleh user. Dengan demikian,
Anda dapat membuat desain website de-ngan lebar 960 pixel sehingga akan terlihat baik di resolusi layar 1024x768 pixel.
Template
Template adalah layout dasar yang dibuat untuk setiap jenis halaman (page). Tem-plate ini biasanya akan digunakan untuk seluruh halaman dengan jenis konten yang sama. Contohnya, template News bia sanya digunakan untuk seluruh halaman berita. Begitu juga dengan template gallery yang akan digunakan untuk seluruh halaman yang berisi foto-foto. Di dalam template, Anda juga bisa mengerahui susunan hala-man website.
Desain website biasanya dibagi menjadi beberapa bagian, yaitu Home Page De-sign, Main Page DeDe-sign, Transitional Page De sign, Detail Page Design (Kon ten, Search Result, News, Gallery), dan Utili ty Page De-sign (contact form, sitemap, se arch page).
Home Page Design
Mendesain halaman depan (home page) adalah hal yang paling sulit dan memakan waktu dibandingkan mendesain halaman lainnya. Hal ini karena tampilan home pa-ge harus dapat mewakili seluruh konten
HOME PAGE Contoh tampilan home pa-ge dengan desain dan struktur yang rapi.
MAINPAGE Contoh jenis Main Page dari website www.palangmerah.org.
ANATOMI Penempatan komponen dalam content page, perlu disesuaikan dengan jenis konten yang akan ditampilkan pada halaman tersebut.
banyak lagi.
Penempatan komponen tersebut perlu dicari hingga mendapatkan posisi yang pa-ling optimal untuk diakses dan nyaman bagi user. Sebaiknya, Anda cari layout yang terbaik dengan mencoba memindah-min-dahkan komponen yang ada. Proses zoning mampu membuat layout menjadi optimal.
Sketching
Setelah melakukan proses zoning hingga mendapatkan layout yang terbaik untuk masing-masing halaman, Anda dapat mu-lai melakukan sketching dengan sketsa untuk mencari style desain yang Anda ingin kan berdasarkan layout dasar dari proses zoning tadi. Anda bisa menempat-kan elemen untuk estetika website dan penerapan warna yang sudah ditentukan di dalam konsep. Umumnya, untuk mem-presentasikan hasil desain Anda ke klien, diperlukan lebih dari satu desain yang se-ring disebut "Desain Alternatif ". Dengan begitu, klien bisa memilih atau memberi masukan baru atas desain yang telah Anda buat. Jika Anda mendesain sesuatu untuk klien, sebaiknya desain tersebut harus da-pat diterima dengan baik oleh klien. Hal ini karena belum tentu desain yang Anda buat tersebut bisa dipaksakan masuk ke dalam website atau dengan kata lain be-lum tenu cocok dengan dengan klien.
4
Development
Setelah Anda mendapatkan sketsa layout yang terbaik dan sudah disepakati bersa-ma klien, Anda bisa melanjutkan ke proses Development (pengembangan). Berdasar-kan teknologi yang sudah ditentuBerdasar-kan dalam konsep di atas, Anda bisa memulai menentukan bahasa pemrograman yang dipakai. Anda bisa memilih menggunakan ASP, ASP.NET, PHP, dan lain sebagainya. Begitu juga dengan database yang diguna-kan. Anda bisa memilih untuk mengguna-kan MySQL, Ms.SQL, Oracle, atau Ms. Access.
Apabila semua dikerjakan sendiri oleh laman yang menjadi titik balik dari menu
yang berada di bawah strukturnya. Mi-salnya, untuk website alat musik. Dalam website tersebut, alat tiup akan dipilah lagi menjadi saxophone, terompet, su-ling, atau tuba. Alat tiup dapat dibuat sebagai sub-main atau transition page se-hingga ketika user masuk ke menu saxo-phone, mereka dapat kembali ke menu induk (alat tiup) kemudian memilih alat tiup lainnya tanpa harus kembali ke awal (main page).
Detail Page Design
Bagian ini biasanya berisi konten yang bi-sa berupa teks, gambar, dokumen, dan se-bagainya. Halaman konten ini harus ma-suk ke dalam index database sehingga ke-tika user mencari data melalui fasilitas search, mereka dapat menemukannya di salah satu halaman konten.
Utility Page Design
Utility Page adalah halaman yang disedia-kan untuk fasilitas website, seperti contact, halaman site map, ucapan terima kasih se-telah mengisi form, dan hasil pencarian.
Zoning
Zoning merupakan proses untuk
KONTEN Salah satu contoh website dengan konten yang berisi teks dan gambar (foto).
PRAKTIK Website
Anda, tentunya bahasa pemrograman akan disesuaikan dengan kemampuan Anda. Hal yang sama juga berlaku untuk database yang akan digunakan.
Untuk proses development ini, sebaik-nya Anda gunakan CSS untuk mengatur penentuan jenis huruf berikut atributnya (font size, color, indent) dan komponen layout lainnya (table, page background, background color).
Back Office Web
Back Office Web (BOW) adalah suatu website khusus yang dibuat untuk menge-lola setiap konten yang ada di website yang akan Anda buat. Nama lain yang sering di-gunakan adalah Content Management Sys-tem (CMS). Dengan tersedianya fasilitas BOW ini, operator yang bekerja untuk mengelola website dapat melakukan up-date website dengan mudah. Bahkan, pro-ses update ini bisa dilakukan dari mana saja asalkan terkoneksi dengan jaringan Internet. Setiap operator yang bertugas ha-rus memiliki username dan password
ber-dasarkan tugas masing-masing.
Error Mask
Anda juga perlu membuat halaman yang isinya permohonan maaf. Halaman ini akan muncul apabila terjadi suatu perma-salahan saat website ini diakses. Yang perlu dibuatkan Error Mask Page adalah:
Page Not Found: jika halaman tidak ditemukan atau tidak ada di server. Time Out Error: masalah untuk gang-guan koneksi Internet.
Server Error: kesalahan yang terjadi di server.
Plug-ins Error: kesalahan akibat plug-ins yang belum ter-install di komputer user.
Jenis Kode error yang sering muncul:
403 Forbidden 404 Not Found 500 Internal Server Error 504 Gateway Timeout 509 Bandwidth Limit Exceeded
Pengujian Website
Sebelum mem-publish website ke
produc-tion server dengan domain name yang
su-dah disiapkan, alangkah baiknya apabila Anda mencobanya terlebih dahulu di ser-ver lain (staging serser-ver) atau dengan sub-domain, misalnya test.domain.com atau dengan direktori lain (www.domain.com/
test). Melalui proses pengujian ini, Anda
bisa mengumpulkan berbagai masalah yang mungkin ada di tiap halaman web-site, baik masalah dengan komponen desain dalam setiap template maupun masalah pada pemrogramannya.
Pengujian dilakukan dalam dua tahap. Pengujian oleh Anda sendiri atau tim developer
Pengujian oleh beberapa user yang An-da unAn-dang untuk menelusuri seluruh isi website.
Publish
Setelah seluruh masalah ditemukan dan diperbaiki, website siap di-publish di pro-duction server dengan nama domain yang telah ditentukan. Usahakan saat memilih tempat hosting website, ambil lokasi ser-ver sesuai dengan siapa target user web-site. Misalnya untuk target user Indone-sia, akan lebih cepat diakses apabila Anda posisikan di lingkungan jaringan IIX (In-donesia Internet eXchange). Jika tar-getnya juga pasar luar negeri mungkin Anda bisa memilih hosting dengan lokasi server di Singapore atau Amerika.
Saat ini banyak sekali penawaran harga murah untuk hosting server. Saran dari penulis, sebaiknya jangan tertarik hanya dari harga. Jauh lebih penting adalah laya-nan atau support jika ada permasalahan teknis dan seberapa cepat perusahaan host-ing tersebut dapat membantu permasala-han Anda atau permasalapermasala-han mereka sen-diri (server down atau dns error).
Dengan seluruh proses yang sudah dijelaskan atas, website yang Anda buat akan tampil sempurna, baik secara tam-pilan desain hingga konten yang ada di dalamnya. Dengan begitu, pengunjung website Anda pun akan merasa senang dan betah. Selamat mendesain website!
Saftari Firmansyah, Penulis@CHIP.co.id DESAIN ALTERNATIF Sebaiknya siapkan
desain alternatif agar klien bisa mem-berikan usul dan masukan.
ERROR PAGE Halaman permohonana maaf atau penjelasan kepada pengunjung jika ditemukan satu masalah pada salah satu halaman website.
