5 Tahap Dasar Desain Website

PENGANTAR WEB DESAIN
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.
HTTP yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para
pemakai melalui web browser.
Adapun beberapa kelebihan dari website adalah :
•
Media advertisement tak terbatas : dapat menampilkan / mempromosikan jasa layanan dan
perdagangan secara keseluruhan.
•
Dapat di akses dari seluruh dunia : beda dengan iklan yang di pasang melalui majalah, surat kabar
ataupun brosur yang hanya dapat di baca / di lihat oleh kawasan tertentu saja.
•
Dapat melakukan transaksi jual beli secara online / langsung melalui internet.
•
System lebih mudah : cukup sekali untuk mempersiapkan bahan dengan minimum penampilan
selama 1 tahun kecuali ada penambahan gambar text (update isi website).
•
Total harga lebih murah : dihitung dengan minimum periode 1 tahun. Karena iklan anda akan
terpasang full / non stop selama 1 tahun.
Jenis Website :
1. Website static adalah website yang bersifat non update dengan pengertian sederhananya adalah
website yang isi dan tampilannya tidak di ubah - ubah. Website hanya bisa diubah isinya oleh designer web /
web developer dengan perjanjian tertentu (akan dikenakan penambahan biaya pada saat update isi web).
Sebuah website static adalah salah satu bentuk website yang isi didalam website tersebut untuk di update
secara berkala, dan biasanya di maintain secara manual oleh beberapa orang yang menggunakan software
Editor.
Ada 3 tipe kategori software editor yang biasa dipakai untuk tujuan maintaining ini, mereka adalah :
• Elemen 1 Text Editor. Contohnya adalah Notepad atau TextEdit, dimana HTML diubah didalam
program editor tersebut.
• Elemen 2 WYSIWYG editor. Contohnya Microsoft Frontpage dan Macromedia Dreamweaver,
dimana situs di edit menggunakan GUI (Graphical User Interface) dan format HTML ini secara otomatis
di generate oleh editor ini.
• Elemen 3 Editor yang sudah memiliki template, contohnya Rapidweaver dan iWeb, dimana, editor ini
membolehkan user untuk membuat dan mengupdate websitenya langsung ke web server secara cepat,
tanpa harus mengetahui apapun tentang HTML. Mereka dapat memilih template yang sesuai dengan
keinginan mereka, menambah gambar atau obyek, mengisinya dengan tulisan, dan dengan sekejap
mereka sudah dapat membuat website tanpa harus melihat sama sekali kode-kode HTML.
2. Website dynamic adalah website yang bersifat friendly yang bisa juga dikatakan website yang up to date
atau website yang dapat di ubah - ubah isinya oleh administrator / webmaster kapan saja. Website ini biasa
di gunakan untuk perusahaan yang akan menambah jenis gambar / isi produk jasa usaha dan seringkali
digunakan untuk website shopping online. Pada website dynamic ini, untuk penambahan isi website tidak
dikenakan biaya karena penambahan isi website dilakukan oleh pemilik sendiri.
Sebuah website dynamic adalah website yang secara berkala, informasi didalamnya berubah, atau
website ini bisa berhubungan dengan user.
Ada banyak jenis sistem software yang dapat dipakai untuk meng-generate Dynamic Web System dan Situs
Dynamic, beberapa diantaranya adalah ColdFusion (CFM), Active Server Pages (ASP), Java Server Pages
(JSP) dan PHP, bahasa program yang mampu untuk meng-generate Dynamic Web System dan Situs
Dinamis.
UNSUR-UNSUR WEBSITE ATAU SITUS.
Untuk menyediakan keberadaan sebuah website, maka harus tersedia unsur-unsur penunjangnya, adalah
sebagai
berikut:
1. Nama domain (Domain name/URL - Uniform Resource Locator)
Pengertian Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia
internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah
alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh :
http://www.baliorange.net, http://www.detik.com
Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan. Nama domain sendiri
mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website
tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh
nama domain ber-ekstensi lokasi Negara Indonesia adalah co.id (untuk nama domain website perusahaan),
ac.id (nama domain website pendidikan), go.id (nama domain website instansi pemerintah), or.id (nama
domain website organisasi).
2. Rumah tempat website (Web hosting)
Pengertian Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan
berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di website. Besarnya data yang
bisa dimasukkan tergantung dari besarnya web hosting yang disewa/dipunyai, semakin besar web hosting
semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam website.
Web Hosting juga diperoleh dengan menyewa. Besarnya hosting ditentukan ruangan harddisk dengan
ukuran MB(Mega Byte) atau GB(Giga Byte). Lama penyewaan web hosting rata-rata dihitung per tahun.
Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting yang banyak dijumpai
baik di Indonesia maupun Luar Negri.
3. Bahasa Program (Scripts Program)
Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam website yang pada saat
diakses. Jenis bahasa program sangat menentukan statis, dinamis atau interaktifnya sebuah website.
Semakin banyak ragam bahasa program yang digunakan maka akan terlihat website semakin dinamis, dan
interaktif serta terlihat bagus.
Beragam bahasa program saat ini telah hadir untuk mendukung kualitas website. Jenis jenis bahasa
program yang banyak dipakai para desainer website antara lain HTML, ASP, PHP, JSP, Java Scripts, Java
applets dsb. Bahasa dasar yang dipakai setiap situs adalah HTML sedangkan PHP, ASP, JSP dan lainnya
merupakan bahasa pendukung yang bertindak sebagai pengatur dinamis, dan interaktifnya situs.
4. Desain website
Setelah melakukan penyewaan domain name dan web hosting serta penguasaan bahasa program (scripts
program), unsur website yang penting dan utama adalah desain. Desain website menentukan kualitas dan
keindahan sebuah website. Desain sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya
sebuah website.
5. Publikasi website
Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau
pengunjung internet.
Karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk
mengenalkan situs kepada masyarakat memerlukan apa yang disebut publikasi atau promosi.
Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan pamflet-pamflet,
selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas.
Cara yang biasanya dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah publikasi
langsung di internet melalui search engine-search engine(mesin pencari, spt : Yahoo, Google, Search
Indonesia, dsb)
Cara publikasi di search engine ada yang gratis dan ada pula yang membayar. Yang gratis biasanya
terbatas dan cukup lama untuk bisa masuk dan dikenali di search engine terkenal seperti Yahoo atau
Google. Cara efektif publikasi adalah dengan membayar, walaupun harus sedikit mengeluarkan akan tetapi
situs cepat masuk ke search engine dan dikenal oleh pengunjung.
6. Pemeliharaan website
Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu sesuai yang diinginkan seperti
penambahan informasi, berita, artikel, link, gambar atau lain sebagainya. Tanpa pemeliharaan yang baik
situs akan terkesan membosankan atau monoton juga akan segera ditinggal pengunjung.
Pemeliharaan situs dapat dilakukan per periode tertentu seperti tiap hari, tiap minggu atau tiap bulan sekali
secara rutin atau secara periodik saja tergantung kebutuhan (tidak rutin). Pemeliharaan rutin biasanya
dipakai oleh situs-situs berita, penyedia artikel, organisasi atau lembaga pemerintah. Sedangkan
pemeliharaan periodik bisanya untuk situs-situs pribadi, penjualan/e-commerce, dan lain sebagainya.
FORMAT GAMBAR
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.
•
•
•
•
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).
256 solid colors
1 transparent color per image
Animate gif files
Lossless
•
•
•
•
JPG : memiliki warna 24-bit, menjaga kualitas brightness dan hue yang ditemukan dalam sebuah foto, dapat
disimpan dalam format berkualits tinggi maupun rendah (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.
16.7 million colors gradients and shadows
No transparency
No animation
Lossy everytime you save a jpeg, the file becomes smaller and loses quality
•
•
•
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 1030% 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.
16.7 million colors gradients and shadows
256 transparent colors per image
Lossless
5 TAHAP DASAR DESAIN WEBSITE
Untuk membangun sebuah website, diperlukan suatu langkah - langkah persiapan yang secara umum dibagi
dalam lima tahap, diantaranya :
1. Merumuskan tujuan membuat website
Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut:
•
•
•
•
Website marketing, berfungsi sebagai media presentasi dan pemasaran
Website customer service, berfungsi sebagai media untuk melayani konsumen
Website e-Commerce, berfungsi sebagai media transaksi on-line
Website informasi/berita, berfungsi sebagai media informasi berita
Menentukan isi website
Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Haltersebut berkaitan
dengan manfaat yang akan diperoleh pengunjung dari sebuah website.
Menentukan target pengunjung
Meskipun suatu website mempunyai sifat terbuka, dalam arti sebuah website bebas dikunjungi oleh semua
orang, namun alangkah baiknya jika dalam pembuatan website perlu dilakukan gambaran target yang akan
dituju oleh sebuah website. Alasan ini lebih didasarkan kepada penggunaan hardware dan aplikasi browser
yang berbeda dengan setiap pengunjung.
Menetukan struktur website
Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tentunya
struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang teroganisasi
dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing dan pemeliharaan
website tersebut.
2. Desain Website
Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling penting dalam
menentukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki
suatu kesatuan desain bisa dikatakan memiliki kesamaan tema dalam halaman - halaman webnya. Hal ini
penting dalam segi estestika maupun segi navigasi. Kesamaan desain yang biasanya dipertahankan antara
lain kesamaan jenis font yang digunakan, warna, tombol navigasi (menu), letak menu dan sebagainya.
Prinsip - prinsip dasar desain
Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan prinsip prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip - prinsip yang harus
diperhatikan antara lain:
•
•
•
•
•
Unik, Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran seorang
designer untuk tidak meniru atau menggunakan karya orang lain.
Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus betul - betul
memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang
dibuatnya.
Simple, Banyak dari seorang web designer yang memegang prinsip - prinsip “Keep it Simple”. Hal
ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif.
Semiotik, Arti semiotik adalah ilmu yang mempelajari tentang tanda - tanda. Dalam hal ini
diharapkan pengunjung dapat dengan mudah dan cepat mengerti ketika melihat tanda dan gambar
yang ada dalam suatu website.
Ergonomis, Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan
pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari
informasi. Hal - hal yang perlu diperhatikkan oleh seorang webdesigener untuk mencapai prinsip ini
adalah :
1. pemilihan ukuran fonts yang tepat sehingga mudah dibaca
2. Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan yang
lebih penting lagi adalah suatu website terlihat lebih informatif.
•
•
Fokus, Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, dengan adanya fokus
tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dulu
harus dibaca atau dilihat.
Konsistensi, Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen - elemen
perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan
memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut.
3. Elemen - elemen desain
Desain grafis khususnya dalam halaman - halaman web terdiri dari beberapa elemen sebagai berikut :
•
•
•
•
•
•
Teks adalah bagian yang paling utama untuk menampilkan informasi.
Grafik atau imgae merupakan elemen yang dapat membantu menjalankan informasi. Dengan
penggunaan grafik maupun image orang lebih mudah memahami suatu pesan
Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi
merupakan daya tarik yang mudah dingat pengunjung.
Video dapat merupakan hasil suatu rekaman dengan kamera video maupun hasil pengolahan
dengan komputer
Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta
memberikan kenyamanan bagi pengunjung yang mendengarkannya
Interaktive link dapat menggunakan button yang berupa teks, simbol, grafik, maupun image, yang
berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
4. Konsep desain
Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada
dasarnya mengikut prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam
mendesain halaman tampilan website juga memperhatikan prinsip desain. Prinsip - prinsip desain tersebut
adalah:
•
•
•
Komunikatif, Prinsip komunikatif berhubungan dengan corporate identity, isi pesan serta audiens
Estetis, Fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat
pengunjung untuk lebih menggali informasi yang ditawarkan suatu website.
Ekonomis, Desain web harus memperhatikan faktor ekonomis, dalam arti ukuran file yang
digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu
memperhatikan pedoman - pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam
mengatur elemen - elemen layout. Pedoman - pedoman yang dimaksud adalah:
•
•
•
•
Kesatuan, Elemen - elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga
merupakan kesatuan informasi pada satu halaman atau beberapa halaman.
Balance, Elemen - elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga
terdapat keseimbangan secara keseluruhan
Kontras, Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya.
Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen - elemen layout
Kontinyuitas, Informasi lebih dimengerti oleh pengguna bila mempunyai aliran - aliran yang baik,
sedikit gangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan
harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain.
Konttinuitas dapat dibuat dengan membuat halaman - halaman mempunyai gaya, bentuk atau warna
yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
5. Pembuatan Layout
Bermacam - macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini
merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout.
•
•
•
•
•
Membuat sketsa desain, Seorang desainer bisa saja menuangkan ide dalam pembuatan interface
dengan terlebih dahulu membuat sketsa di kertas. Namun untuk kebanyakan orang, langkah ini
biasanya dilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakan
software.
Membuat layout desain, Banyak software yang dapat digunakan membuat layout. Salah satunya
adalah Macromedia, Proses ini dikerjakan setelah pembuatan sketsa desain. Namun terkadang
pembuatan layout merupakan proses yang pertama kali dikerjakan
Membagi gambar menjadi potongan - potongan kecil, Proses ini diperlukan untuk mengoptimize
waktu download
Membuat animasi, Animasi diperlukan untuk menghidupkan atau menjadikan website lebih interaktif
Membuat HTML, Setelah merapikan layout desain lengkap dengan tombol, image, teks, script
HTML, hal yang perlu dilakukan kemudian adalah membuat layout ke format HTML