Konsep Desain Web

a.    Desain Web

Desain web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan. Desain web bisa melibatkan estetika dan seluk beluk mekanis dari suatu operasi situs web. Aspek-aspek yang mungkin tercakup pada desain web antara lain menciptakan animasi dan grafik, pemilihan warna, pemilihan huruf (font), desain navigasi, membuat isi, HTML authoring, javascript programming, dan lain-lain.

Mood adalah dasar dari sebuah desain untuk memberikan pesan kepada pengunjung mengenai perasaan dari situs yang dibuat. Tampilan situs bisa membawa pengunjung ke masa lau, masa kini, maupun ke masa yang akan datang. Bisa juga membawa pengunjung ke rasa sedih, gembira, dan lain-lain. Beberapa elemen dalam situs yang mengekspresikan mood ditampilkan melalui warna, teks, layout, gambar, grafis dan efek-efek pendukung lainnya. Mengenal target audien, tema dan tujuan dari situs web yang akan dibuat merupakan langkah awal untuk menentukan mood dari suatu situs web.

Semakin baik desain web yang kita buat, maka akan semakin menarik minat pengunjung untuk mengunjungi lagi situs web kita. Kebanyakan orang akan enggan kembali ke suatu halaman web yang membosankan dan tidak menarik, download time yang lama dan yang memiliki sistem navigasi yang membingungkan.

Sebaiknya kita memenuhi standar HTML, agar halaman-halaman web kita menjadi efektif dan sesuai dengan ketertarikan pengunjung.

b.    Fungsi Situs Web

Secara umum situs web mempunyai fungsi sebagai berikut :

1)    Fungsi Komunikasi

Situs web yang mempunyai fungsi komunikasi, pada umumnya merupakan situs web dinamis, karena dibuat dengan menggunakan pemrograman web dan dilengkapi fasilitas yang memberikan fungsi-fungsi komunikasi, sepert web mail, form contact, chatting, forum, dan lain sebagainya.

2)    Fungsi Informasi

Situs web yang memiliki fungsi informasi, pada umumnya lebih menekankan pada kualitas bagian kontennya, karena tujuan dari situs tersebut adalah menyampaikan isi pada website. Situs dengan fungsi informasi sebaiknya berisi teks dan grafik yang dapat didownload dengan cepat dengan fasilitas yang memberikan fungsi informasi seperti News, Profile Company, Library, Reference, dan lain-lain.

3)    Fungsi Entertainment

Jika web yang akan dibuat berfungsi sebagai sarana hiburan, maka penggunaan animasi gambar dan elemen bergerak dapat meningkatkan mutu presentasi desainnya. Beberapa fasilitas yang memberikan fungsi hiburan adalah game online, film online, music online, dan sebagainya.

4)    Fungsi Transaksi

Web dapat dijadikan sebagai transaksi bisnis, baik barang maupun jasa. Situs web dengan fungsi ini akan menghubungkan perusahaan, konsumen dan komunitas tertentu melalui transaksi elektronik. Pembayaran bisa mengunakan kartu kredit, transfer bahkan bisa juga membayar tunai secara langsung.

c.     Jenis Situs Web

Berdasarkan tujuannya, situs web dapat dibedakan menjadi :

1)        Alat Pemasaran

Jenis situs ini dibuat dengan tujuan untuk mempromosikan dan memasarkan suatu produk atau jasa layanan suatu perusahaan. Pemasaran melalui internet lebih cepat sampai dan memiliki jangkauan yang lebih luas.

Hal yang penting untuk diperhatikan dalam merancang sebuah situs web adalah bahwa URL atau alamat situs web dapat menjadi aset pemasaran tersendiri. Fokuskan aspek-aspek desain kepada audien yang akan dituju untuk memastikan bahwa audien secara cepat dapat mengetahui produk atau jasa apa yang ditawarkan. Letak dan isi menu sebaiknya tidak terlalu banyak, tetapi dibuat simpel saja dengan menampilkan informasi latar belakang perusahaan.

Web jenis ini hanya memberikan informasi saja, dalam arti web ini tidak dapat digunakan untuk transaksi online. Informasi produk harus jelas dan menggunakan kata-kata yang menjual, kalau perlu gunakan animasi untuk menarik perhatian pengunjung. Bila memungkinkan sistem pencatatan bisa ditambahkan dalam desain web ini, misal pencatatan email pengunjung yang bisa digunakan untuk mendapatkan gambaran prospek pemasaran produk yang ditawarkan.

2)        Nilai Tambah

Terkadang web digunakan hanya sebagai nilai tambah saja, dalam arti bahwa sebenarnya suatu perusahaan tidak terlalu membutuhkan web, tetapi menggunakannya hanya sekedar untuk mengikuti tren yang ada supaya kelihatan lebih modern.

Hal yang pelu diperhatikan untuk membuat web jenis ini adalah secara garis besar sama seperti web untuk Alat Pemasaran, tetapi lebih sederhana lagi. Biasanya konten dari web jenis ini berupa referensi atau informasi tambahan dari apa yang sudah diinformasikan secara offline. Penggunaan halaman web jenis ini sebaiknya disusun semudah mungkin.

3)        Katalog

Web jenis ini digunakan untuk menampilkan produk-produk yang dijual oleh suatu perusahaan. Dengan menggunakan web, jika produk yang ditawarkan sangat banyak, maka dapat melakukan update dengan mudah, efisien dan lebih ekonomis.

Beberapa hal yang perlu diperhatikan dalam membuat desain web katalog ini adalah informasi yang ditampilkan harus jelas dan lengkap promosi yang telah dilakukan sudah tercapai. Meskipun semua produk atau jasa ditampilkan pada web ini, namun pengunjung tidak dapat membeli atau membayar atau melalui situs web ini. Pembayaran harus dilakukan secara offline.

4)        E-Commerce

E-Commerce merupakan kumpulan antara teknologi, aplikasi dan proses bisnis yang menghubungkan perusahaan, konsumen dan komunitas tertentu melalui transaksi elektronik.

Jika halaman web yang akan dibuat merupakan halaman web yang berorientasi bisnis, maka tujuan yang harus dicapai web ini adalah meningkatkan order penjualan dari pelanggan yang sudah ada, menciptakan order penjualan baru dari pelanggan-pelanggan baru, serta menekan keseluruhan biaya pengeluaran.

Dalam membuat desain untuk web jenis E-Commerce ini, maka sebaiknya memahami hubungan antara brand dan customer-nya. Tata letak yang pas dalam desain web yang menampilkan brand suatu produk atau jasa tertentu, akan membuat pengunjung merasa nyaman ketika mengunjungi situs web tersebut.

Secara umum transaksi yang dilakukan dengan E-Commerce adalah sebagai berikut

·      Find it, mencari jenis produk atau jasa yang akan dibeli

·      Explore it, mempelajari produk atau jasa yang akan dibeli

·      Select it, memilih dan menyimpan ke dalam shopping cart

·      Buy it, memproses transaksi pembayaran

·  Ship it, mengakhiri proses transaksi atau transaksi sudah berhasil dan melakukan proses pengiriman barang.

Pada umumnya metode pembayaran dapat dilakukan dengan cara :

·      Online Processing Credit Card

Biasanya untuk produk yang bersifat retail dimana pasarnya adalah seluruh dunia.

·      Money Transfer

Cara ini lebih aman. Biasanya konsumen dikenai biaya tambahan untuk penyedia money transfer, terutama bila harus mengirim uang ke negara lain.

·      Cash on Delivery

Biasanya dilakukan bila konsumen berada dalam satu kota yang sama dengan penyedia produk/jasa.

Hal-hal yang sebaiknya diperhatikan dalam merancang web e-commerce adalah :

·      Membuat nama domain sendiri, jangan menggunakan yang gratisan.

·      Kecepatan akses lebih diutamakan.

·      Menyediakan fasilitas email balasan untuk pelanggan yang telah melakukan transaksi, meskipun isinya hanya berupa ucapan terima kasih, tetapi pelanggan akan merasa lebih diperhatikan.

·      Berikan opsi pilihan pembayaran yang mudah

·      Buat pelanggan lebih mudah dan cepat menemukan produk atau jasa yang dinginkan

·      Pastikan proses pembelian melalui situs web secara online ini dilakukan dengan cepat dan mudah.

·      Jadilah kreatif dan promosikan kunjungan kembali untuk memancing pelanggan agar datang dan belanja melalui situs web anda.

5)        E-Learning

E-Learning merujuk pada penggunaan teknooigi internet untuk mengirimkan serangkaian solusi yang dapat meningkatkan pengetahuan dan ketrampilan. Cisco menjelaskan filosofis e-learning sebagai berikut :

·      Pertama, e-learning merupakan penyampaian informasi, komunikasi, pendidikan, pelatihan secara online.

·      Kedua, e-learning menyediakan seperangkat alat yang dapat memperkaya nilai belajar secara konvensional (kajian terhadap buku teks, dan pelatihan berbasis komputer) sehingga dapat menjawab tantangan perkembangan globalisasi.

·      Ketiga, e-learning tidak berati menggantikan model belajar konvensional di dalam kelas, tetapi memperkuat model belajar melalui pengayaan konten dan pengembangan teknologi pendidikan.

·      Keempat, kapasitas peserta didik dalam menguasai bahan yang disampaikan melalui e-learning sangat bervariasi, tergantung bentuk, isi dan cara penyampaiannya.

6)        Komunitas

Komunitas merupakan jenis web yang dibuat dengan tujuan supaya pengunjung dimungkinkan berkomunikasi secara bersamaan. Pengunjung bisa berbagi pengalaman, cerita, ide, menambah teman dan lain sebagainya.

Salah satu fitur pada web yang ramai dikunjungi adalah Forum, dimana pengunjung dapat mengirim berita sementara yang lain dapat menanggapinya.

7)        Portal

Portal adalah aplikasi berbasis web yang menyediakan akses suatu titik tunggal dari informasi online terdistribusi, seperti dokumen yang didapat melalui pencarian, kanal berita, dan link ke situs khusus. Untuk mempermudah penggunaannya, maka disediakan fasilitas pencarian dan pengorganisasian informasi.

8)        Personal

Situs web personal merupakan situs yang memiliki tujuan untuk mempromosikan atau menginformasikan tentang seseorang. Biasanya berisi biodata, portofolio (kumpulan hasil karya yang pernah dibuat), prestasi atau menceritakan kehidupan sehari-hari yang dipublish supaya orang lain dapat mengetahui dan mengenal tentang orang tersebut.

d.    Prinsip-Prinsip Desain Web

Prinsip utama sebuah desain web adalah kualitas atau karakteristik bawaan dalam berbagai bentuk seni. Dengan membuat web yang mengacu pada prinsip-prinsip desain web tersebut, diharapkan dapat memiliki desain web yang baik dan efektif sehingga mudah dibaca dan mudah dimengerti.

Prinsip-prinsip desain web terdiri dari :

1)        Keseimbangan

Keseimbangan adalah hasil susunan satu atau lebih elemen desain, sehingga antara yang satu dengan lainnya memiliki bobot yang sama. Keseimbangan adalah aturan dari kekontrasan visual.  Ketika menyusun elemen-elemen dalam suatu halaman situs, maka perlu dipertimbangkan bobot visual dari setiap elemen. Bobot elemen biasanya dapat dikenali dari ukuran obyek dan kepadatan detail atau tekstur. Bila kekontrasan antar elemen terlalu besar, maka keserasian dan keseimbangan akan hilang.

Hubungan antara proporsi dan ukuran harus benar-benar dipertimbangkan pada saat ingin menghadirkan keseimbangan. Setiap obyek dalam halaman web harus dipertimbangkan hubungannya dengan obyek lain. Obyek yang sangat besar akan terlihat lebih besar bila disampingnya terdapat obyek berukuran sangat kecil. Hal tersebut tentu sangat berpengaruh terhadap keseimbangan tampilan.

Terdapat 3 (tiga) jenis keseimbangan, yaitu :

·           Keseimbangan Simetris (Formal)

Keseimbangan simetris mempunyai elemen yang bobotnya sama pada dua sisi dari garis vertikal imajiner suatu halaman web. Tata letak simetris ini menghasilkan desain yang statis dan berkesan formal, sederhana, mudah dalam pembuatannya, tetapi membosankan dan kurang menarik. Keseimbangan simetris sering disebut dengan keseimbangan formal.

Keseimbanagn simetris cocok diterapkan pada aplikasi perkantoran, iklan yang menekankan pada mutu dan kualitas.

Contoh Keseimbanagn Simetris :

·           Keseimbangan Asimetris (Informal)

Keseimbangan asimetris mempunyai elemen yang tidak sama bobotnya pada dua sisi dari garis vertikal imajiner suatu halaman web. Tata letak desainnya tampak lebh dinamis karena adanya ruang kosong.

Keseimbangan asimetris memberikan kesan santai dan kasual. Layout pada desain keseimbangan asimetris ini, sebaiknya memberikan kesan bahwa desain yang dibuat seimbang. Untuk membuat kesan seimbang dalam tata letak yang asimetris ini, maka perlu mempertimbangkan hal-hal berikut ini :

a)    Warna, dapat menyeimbangkan antara obyek yang besar dengan obyek yang lebih kecil. Obyek yang lebih besar diberi warna yang tidak terlalu kuat atau warna muda, sementara obyek yang lebih kecil diberi warna yang lebih kuat.

b)   Bentuk, obyek yang memiliki kesan datar namun memiliki detail bentuk yang sederhana akan seimbang berdekatan dengan obyek yang lebih kecil dengan detail yang lebih komplek.

c)    Posisi, menempatkan obyek yang dominan pada posisi agak ke tengah, akan memperlihatkan kesan seimbang dimana area dan obyek yang lebih kecil berada pada arah yang berlawanan.

Contoh Keseimbangan Asimetris :

·           Keseimbangan Radial

Pada keseimbangan radial, semua elemen memancar keluar dengan model melingkar dari titik tengah suatu obyek. Keseimbangan radial lebih mudah diimplementasikan karena obyek akan seimbang bila obyek berada di tengah.

Contoh Keseimbangan Radial

2)        Kontras

Kontras bisa dipahamai dengan melihat dua obyek yang berlainan dimana tampilan desainnya berkesan menonjol dan menarik perhatian. Pemberian kontras pada suatu obyek harus kontras positif, karena jika kontras yang diberikan negsatif, maka obyek akan menjadi samar-samar, bahkan bisa tidak terlihat karena terpengaruh oleh background.

Contoh Kontras pada Web

3)        Konsistensi

Konsistensi akan membuat pengunjung merasa nyaman karena dapat menjelajah situs dengan mudah. Ketika pengunjung membuka suatu halaman web yang konsisten, maka pengunjung akan langsung tahu kemana dia harus mencari dan juga akan tahu dimana dia saat itu berada.

Konsistensi dapat diterapkan pada margin, layout, huruf, warna dan navigasi. Navigasi sebaiknya sama antara satu halaman dengan halaman lain. Penggunaan huruf sebaiknya antara satu sampai tiga jenis huruf saja. Untuk warna sebaiknya gunakan tiga hingga empat jenis warna.

Konsistensi sangat efektif untuk membangun brand suatu perusahaan. Brand bukan hanya logo, tetapi sekumpulan atribut yang meliputi logo, slogan, warna dan kualitas emosional yang diasosiasikan pada perusahaan dan produk layanannya. Atribut-atribut tersebut memberikan identitas dan kepribadian pada individu, organisasi maupun perusahaan.

4)        Ruang Kosong

Ruang kosong sering disebut sebagai whitespace. Whitespace menggambarkan suatu ruang terbuka di antara elemen-elemen desain. Whitespace bisa diletakkan di antara kata, paragraf, huruf dari teks, gambar dan elemen pada halaman web. Whitespace ibarat ruang yang disediakan untuk beristirahat.

Dalam mendesain sebuah web, perlu dipertimbangkan seberapa banyak whitespace di sekitar elemen pada halaman web tersebut, seberapa besar ruang yang tersedia, bagaimana masing-masing gambar dan teks saling berkaitan dalam sebuah layout, serta bagaimana keseluruhan tampilan dari layout tersebut.

Whitespace membantu mengarahkan mata pengunjung dari satu titik ke titik lain sehingga semua isi web dapat dinikmati dan dibaca dengan nyaman.  Pada teks, judul biasanya diberi jarak yang cukup dengan konten. Konten pun diberi jarak yang cukup  dengan elemen lain seperti header, margin, dan lain sebagainya. Desain web yang dapat memanfaatkan whitespace dengan baik akan terkesan elegan dan rapi.

Gunakanlah whitespace untuk :

·           Tempat istirahat mata pembaca

·           Menghubungkan antar elemen-elemen dalam sebuah layout (mendekatkan untuk memberi kesan berhubungan)

·           Membentuk bentuk positif dan negatif

·           Memberikan nuansa tiga dimensi

·           Menegaskan sebuah elemen

·           Mempermudah pemahaman layout

·           Membuat halaman tampak dinamis

·           Mempermudah pembacaan teks