PRAKTIK Website
Mendesain Website 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.
K
emampuan Anda dalam mendesain website bisa digunakan untuk menghasilkan uang. Namun, jika Anda ingin menjalankan bisnis mendesain 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 website rancangan Anda terlihat buruk. Kegagalan bisa juga terjadi karena secara fungsi, website yang Anda buat tidak dapat digunakan dengan semestinya atau target website tidak tercapai. Untuk mencapai kesuksesan dalam merancang dan mendesain website, sebaiknya sesuaikan desain yang Anda buat dengan target yang Anda harapkan. Tentunya, semua itu harus sudah tertuang dalam satu konsep desain, mulai dari latar belakang website, target yang akan dicapai, warna utama yang digunakan, hingga ga-
160
ya desain (style) untuk website yang akan digunakan. Dalam satu proses desain, ada alur kerja yang harus dikerjakan langkah demi langkah. Sayangnya, yang banyak terjadi saat ini, para desainer (khususnya yang baru memulai bisnis ini) dan pekerja freelance melakukan proses desain tanpa alur yang benar. Terkadang, mereka hanya terfokus 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 menentukan teknologi apa yang akan digunakan untuk mendukung website tersebut, sebaiknya Anda mengumpulkan terlebih
dahulu data yang menjadi dasar pembuatan website tersebut. Data-data tersebut di antaranya adalah target umum dari website, target pembaca, siapa saja yang boleh melihat website, apa yang diinginkan user dari website, menentukan daya tarik website, keuntungan yang diperoleh pengunjung, 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 diminta (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
| CHIP | SEPTEMBER 2008
tahun ke atas yang siap berorganisasi Isi Website: materi kampanye, misi dan visi partai, foto kegiatan, direktori alamat partai, berita seputar kampanye, dan kegiatan partai. Dari data tersebut, secara teknis Anda memerlukan 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 mendapat-
kan informasi dengan tepat. Tentunya, hal ini harus didukung oleh konten yang baik. Dalam menyusun konten ini, Anda harus ingat bahwa website yang sedikit memberikan manfaat kepada usernya akan mudah dilupakan atau mungkin tidak akan dikunjungi lagi di kemudian hari. Kepercayaan user terhadap keabsahan isi pada website berita juga sangat penting. Jika kepercayaan itu dapat dijaga dan website itu selalu memberikan berita yang baik, berkualitas, dan cepat, kelak user akan kembali 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
TEMPLATE Dalam satu website, terdapat lebih dari satu macam template. Sebaiknya sesuaikan dengan jenis konten yang akan ditampilkan.
salah satu fasilitas website yang menampilkan 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 perusahaan atau organisasinya tertuang dalam menu website. Site map juga dapat mengarahkan klien dalam mempersiapkan konten untuk tiap menu yang ada, menyediakan foto-foto, bagan, brosur produk, dan sebagainya. Untuk melengkapi proposal, sebaiknya site map disajikan dengan baik dan menarik. Selain untuk keperluan website, site map juga bisa dijadikan dasar acuan pembangunan suatu website yang akan disepakati antara desainer web dan klien. Dengan begitu, apa yang akan dibuat tidak akan keluar dari apa yang ada pada site map. SITEMAP Contoh site map yang menggunakan Back Office Website (BOW) untuk mengelola setiap konten yang ada dalam website.
SEPTEMBER 2008 | CHIP |
Search Engine Selain site map, website juga memerlukan
161
PRAKTIK Website
digunakan oleh user. Dengan demikian, Anda dapat membuat desain website dengan lebar 960 pixel sehingga akan terlihat baik di resolusi layar 1024x768 pixel.
Template
HOME PAGE Contoh tampilan home page dengan desain dan struktur yang rapi.
MAINPAGE Contoh jenis Main Page dari website www.palangmerah.org.
fasilitas Search Engine. Fasilitas ini bermanfaat untuk mencari data yang ada di dalam sekian banyak konten pada website. Jika Anda tidak bisa membuat sendiri fasilitas search engine ini, Anda bisa memanfaatkan fasilitas gratis dari website lain, seperti Google Search yang dapat dipasang pada website Anda.
3
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 page harus dapat mewakili seluruh konten
Main Page Design
Main page (halaman utama) merupakan halaman yang menjadi titik balik dari menu yang ada. Seperti yang telah diuraikan di atas, main page bisa juga sebagai home page, yaitu halaman yang tampil ketika
Desain
Dalam membangun suatu website, banyak desainer web yang langsung masuk ke proses desain tanpa melalui dua proses di atas (perencanaan dan menyusun konten). Cara 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 ratarata 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
162
Template adalah layout dasar yang dibuat untuk setiap jenis halaman (page). Template ini biasanya akan digunakan untuk seluruh halaman dengan jenis konten yang sama. Contohnya, template News biasanya 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 halaman website. Desain website biasanya dibagi menjadi beberapa bagian, yaitu Home Page Design, Main Page Design, Transitional Page Design, Detail Page Design (Konten, Search Result, News, Gallery), dan Utility Page Design (contact form, sitemap, search page).
yang ada di website dan harus tampil menarik. Apabila tampilan tidak menarik, umumnya user akan enggan masuk lebih dalam lagi untuk menyusuri website. Jangan 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. Sebagai contoh adalah animasi flash. Animasi flash mungkin akan menarik bagi pengunjung yang baru pertama kali melihat website Anda. Namun, bagi user yang pernah 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 menjadikan home page merangkap sebagai main page (halaman utama). Biasanya, website yang demikian itu akan menguraikan semua menu dalam halaman tersebut memanjang ke bawah.
ANATOMI Penempatan komponen dalam content page, perlu disesuaikan dengan jenis konten yang akan ditampilkan pada halaman tersebut.
| CHIP | SEPTEMBER 2008
pertama kali website dibuka. Transitional Page Design
Transitional Page (sub-main) adalah halaman yang menjadi titik balik dari menu yang berada di bawah strukturnya. Misalnya, untuk website alat musik. Dalam website tersebut, alat tiup akan dipilah lagi menjadi saxophone, terompet, suling, atau tuba. Alat tiup dapat dibuat sebagai sub-main atau transition page sehingga ketika user masuk ke menu saxophone, 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 bisa berupa teks, gambar, dokumen, dan sebagainya. Halaman konten ini harus masuk ke dalam index database sehingga ketika user mencari data melalui fasilitas search, mereka dapat menemukannya di salah satu halaman konten. Utility Page Design
Utility Page adalah halaman yang disediakan untuk fasilitas website, seperti contact, halaman site map, ucapan terima kasih setelah mengisi form, dan hasil pencarian.
Zoning Zoning merupakan proses untuk menen-
tukan posisi komponen pada halaman website. Komponen-komponen tersebut adalah Header, Footer, Menu, Search Engine, Title, Text/ Content Area, dan masih banyak lagi. Penempatan komponen tersebut perlu dicari hingga mendapatkan posisi yang paling optimal untuk diakses dan nyaman bagi user. Sebaiknya, Anda cari layout yang terbaik dengan mencoba memindah-mindahkan 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 mulai melakukan sketching dengan sketsa untuk mencari style desain yang Anda inginkan berdasarkan layout dasar dari proses zoning tadi. Anda bisa menempatkan elemen untuk estetika website dan penerapan warna yang sudah ditentukan di dalam konsep. Umumnya, untuk mempresentasikan hasil desain Anda ke klien, diperlukan lebih dari satu desain yang sering 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 dapat 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 belum tenu cocok dengan dengan klien.
4
KONTEN Salah satu contoh website dengan konten yang berisi teks dan gambar (foto).
SEPTEMBER 2008 | CHIP |
Development
Setelah Anda mendapatkan sketsa layout yang terbaik dan sudah disepakati bersama klien, Anda bisa melanjutkan ke proses Development (pengembangan). Berdasarkan teknologi yang sudah ditentukan 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 digunakan. Anda bisa memilih untuk menggunakan MySQL, Ms.SQL, Oracle, atau Ms. Access. Apabila semua dikerjakan sendiri oleh
163
PRAKTIK Website
dasarkan tugas masing-masing.
Error Mask Anda juga perlu membuat halaman yang isinya permohonan maaf. Halaman ini akan muncul apabila terjadi suatu permasalahan 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 gangguan 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 DESAIN ALTERNATIF Sebaiknya siapkan desain alternatif agar klien bisa memberikan usul dan masukan.
Anda, tentunya bahasa pemrograman akan disesuaikan dengan kemampuan Anda. Hal yang sama juga berlaku untuk database yang akan digunakan. Untuk proses development ini, sebaiknya Anda gunakan CSS untuk mengatur penentuan jenis huruf berikut atributnya (font size, color, indent) dan komponen layout lainnya (table, page background, background color).
Pengujian Website Sebelum mem-publish website ke production server dengan domain name yang sudah disiapkan, alangkah baiknya apabila Anda mencobanya terlebih dahulu di server lain (staging server) atau dengan subdomain, 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 website, 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 Anda undang untuk menelusuri seluruh isi website.
Publish Setelah seluruh masalah ditemukan dan diperbaiki, website siap di-publish di production server dengan nama domain yang telah ditentukan. Usahakan saat memilih tempat hosting website, ambil lokasi server sesuai dengan siapa target user website. Misalnya untuk target user Indonesia, akan lebih cepat diakses apabila Anda posisikan di lingkungan jaringan IIX (Indonesia Internet eXchange). Jika targetnya 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 layanan atau support jika ada permasalahan teknis dan seberapa cepat perusahaan hosting tersebut dapat membantu permasalahan Anda atau permasalahan mereka sendiri (server down atau dns error). Dengan seluruh proses yang sudah dijelaskan atas, website yang Anda buat akan tampil sempurna, baik secara tampilan desain hingga konten yang ada di dalamnya. Dengan begitu, pengunjung website Anda pun akan merasa senang dan betah. Selamat mendesain website! Saftari Firmansyah,
[email protected]
Back Office Web Back Office Web (BOW) adalah suatu website khusus yang dibuat untuk mengelola setiap konten yang ada di website yang akan Anda buat. Nama lain yang sering digunakan adalah Content Management System (CMS). Dengan tersedianya fasilitas BOW ini, operator yang bekerja untuk mengelola website dapat melakukan update website dengan mudah. Bahkan, proses update ini bisa dilakukan dari mana saja asalkan terkoneksi dengan jaringan Internet. Setiap operator yang bertugas harus memiliki username dan password ber-
164
ERROR PAGE Halaman permohonana maaf atau penjelasan kepada pengunjung jika ditemukan satu masalah pada salah satu halaman website.
| CHIP | SEPTEMBER 2008
