Anda di halaman 1dari 10

HANDOUT

Pemrograman Web
KONSEP DISAIN WEB
Kompetensi Keahlian
Teknik Komputer Dan Jaringan

Disusun Oleh
M. Endah Titisari, S.T.

DINAS PENDIDIKAN, PEMUDA, DAN OLAH RAGA KABUPATEN SLEMAN


SMK NEGERI 2 DEPOK SLEMAN
YOGYAKARTA
2013/2014
KATA PENGANTAR

Puji syukur kehadirat Tuhan yang senantiasa memberikan berkah dan karunianya hingga
akhirnya Handout “Konsep Disain Web” ini berhasil disusun dengan baik. Karena hanya dengan
kehendak dan karunia-Nya, kemudahan dan kesempatan untuk menyelesaikan handout ini bisa
terlaksana tanpa halangan suatu apapun.
Handout “Konsep Disain Web” ini disusun sebagai pedoman pembelajaran di SMK dengan
Kompetensi kejuruan Teknik Komputer dan Jaringan guna mencapai Mata Pelajaran Pemrograman
Web.
Handout ini berisi konsep disain web dan disusun dengan harapan dapat bermanfaat bagi
penggunanya. Namun apabila ditemukan kekurangan dan ketidaksempurnaan di dalam handout, maka
akan dijadikan masukkan dan saran untuk dapat disempurnakan dikemudian hari.

Penyusun

i
Handout Konsep Disain Web

A. Kompetensi Dasar
Menjelaskan konsep disain web dan teknologi disain web

B. Deskripsi
Handout ini berjudul “Konsep Disain Web”. Sesuai dengan judulnya, handout ini
membahas tentang konsep disain web. Sebelum siswa membuat sebuah web, maka siswa
diharapkan mengetahui pemahaman tentang disain web, dimana disain web merupakan seni
dan proses dalam menciptakan halaman web tunggal maupun keseluruhan yang melibatkan
estetika dan seluk beluk mekanis dari suatu operasi situs web.

C. Waktu
Belajar menggunakan handout ini membutuhkan waktu 2 x 45 menit untuk dapat
mencapai kompetensi yang diharapkan.

D. Tujuan Akhir
Handout ini disusun dengan tujuan agar setelah mempelajari handout ini :
1. Peserta didik mampu membuat sebuah disain web yang memiliki nilai seni dan estetika
yang baik.

E. Kegiatan Pembelajaran :
1. Tujuan
Peserta didik mampu :
1. menjelaskan definisi disain web
2. menjelaskan fungsi situs web
3. menjelaskan jenis situs web
4. menjelaskan prinsip-prinsip disain web

2. Uraian Materi Tentang Konsep Disain Web


a. Disain Web
Disain web adalah seni dan proses dalam menciptakan halaman web tunggal atau
keseluruhan. Disain web bisa melibatkan estetika dan seluk beluk mekanis dari suatu
operasi situs web. Aspek-aspek yang mungkin tercakup pada disain web antara lain
menciptakan animasi dan grafik, pemilihan warna, pemilihan huruf (font), disain
navigasi, membuat isi, HTML authoring, javascript programming, dan lain-lain.
Mood adalah dasar dari sebuah disain 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 disain web yang kita buat, maka akan semakin menarik minat
pengunjung untuk mengunjungi lagi situs web kita. Kebanyakan orang akan enggan

1
Handout Tipografi

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
disainnya. 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 disain 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 disain 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.
2
Handout Tipografi

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 disain 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 disain untuk web jenis E-Commerce ini, maka sebaiknya
memahami hubungan antara brand dan customer-nya. Tata letak yang pas dalam
disain 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 :

3
Handout Tipografi

 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 Disain Web


Prinsip utama sebuah disain web adalah kualitas atau karakteristik bawaan dalam
berbagai bentuk seni. Dengan membuat web yang mengacu pada prinsip-prinsip disain
web tersebut, diharapkan dapat memiliki disain web yang baik dan efektif sehingga
mudah dibaca dan mudah dimengerti.
Prinsip-prinsip disain web terdiri dari :
1) Keseimbangan
Keseimbangan adalah hasil susunan satu atau lebih elemen disain, 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 disain yang statis dan berkesan formal, sederhana, mudah
dalam pembuatannya, tetapi membosankan dan kurang menarik.
Keseimbangan simetris sering disebut dengan keseimbangan formal.

4
Handout Tipografi

Keseimbanagn simetris cocok diterapkan pada aplikasi perkantoran, iklan yang


menekankan pada mutu dan kualitas.
Ilustrai 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 disainnya
tampak lebh dinamis karena adanya ruang kosong.
Keseimbangan asimetris memberikan kesan santai dan kasual. Layout pada
disain keseimbangan asimetris ini, sebaiknya memberikan kesan bahwa disain
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.

Ilustrasi Keseimbangan Asimetris :

5
Handout Tipografi

 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.
Ilustrasi Keseimbangan Radial

2) Kontras
Kontras bisa dipahamai dengan melihat dua obyek yang berlainan dimana
tampilan disainnya 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.
Ilustrasi Kontras pada Web

3) Konsistensi
Konsistensi akan membuat pengunjung merasa nyaman karena dapat
menjelajah situs dengan mudah. Ketika pengunjung membuka suatu halaman web
6
Handout Tipografi

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 disain. Whitespace
bisa diletakkan di antara kata, paragraf, huruf dari teks, gambar dan elemen pada
halaman web. Whitespace ibarat ruang yang disediakan untuk beristirahat.
Dalam mendisain 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.
Disain 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

F. Tugas
1. Carilah situs web dari internet yang menunjukkan web tersebut berfungsi sebagai :
a. Komunikasi
b. Informasi
c. Entertainment
d. Transaksi
2. Carilah situs web dari internet yang tujuan dari web tersebut adalah sebagai :
a. Alat pemasaran
b. Nilai Tambah
c. Katalog
d. E-commerce
e. E-learning
f. Komunitas
g. Portal
h. Personal
3. Carilah situs web dari internet yang memiliki keseimbangan :
a. Simetris
b. Asimetris
c. Radial

7
Handout Tipografi

4. Carilah situs web dari internet dan tunjukkan :


a. bagian mana yang menunjukkan kekontrasan (kontras bisa dilihat pada warna, bentuk,
elemen, huruf, dll) :
b. bagian mana yang menunjukkan whitespace