Transcript KONSEP DASAR DESAIN WEB - Materi Perkuliahan

KONSEP DASAR
DESAIN WEB
Halaman Web
• Secara umum, ada tiga kategori alasan yang
mendasari untuk menyusun halaman web,
antara lain :
– Sarana promosi produk ataupun jasa di Internet
– Penyedia informasi
– Melakukan transaksi online
Penyusunan Halaman Web
Definisikan secara
jelas tujuan
penyusunan
halaman web
Buatlah (content)
yang menarik untuk
disampaikan
Buatlah halaman
web sedemikian
rupa sehingga para
pengunjung dirayu
dan ditantang untuk
kembali lagi
Desain
• Suatu pekerjaan / kegiatan / proses kreatif
untuk menghasilkan sesuatu yang sifatnya :
Baru (Inovatif), segar (fresh), menakjubkan.
• Mempunyai daya guna, menghasilkan sesuatu
yang lebih baik, lebih mudah dan praktis
(useful), memecahkan suatu masalah (solusi).
What is Web Design?
• Definition :
Web design is the process of creating experiences for
users of the web.
• Web design refers to the process of conceptualizing
and planning the experiences for visitors as they
interact with the information and activities on the site
• Situs Web yang baik
– Design (50 %)
– Usefulness (50 %)
Situs Web Yang Baik (1)
Elemen Desain
• Estetika : warna (color), tataletak (layout), tipografi
(typhography)
• Komunikasi : isi (content), penyampaian
pesan
(language style used for communication), interaksi
(interaction/ feedback), pembentukan citra (building
image)
• Usefulness. Utility/ fungsionalitas, teknologi yang tepat
• Usability/ kemudahan penggunaan : waktu belajar,
kecepatan kinerja, tingkat kesalahan, daya ingat dan
kepuasan subyektif
Pengembangan Situs Web
•
•
•
•
•
•
•
Content Creation
User Interface Design
Graphic/ Visual Design
Technology Planning
Web Authoring
Web Programming
Multimedia Design
Content Creation
• “Content is king”
• Langkah-Langkah mempersiapkan content :
– Menentukan tujuan
– Menentukan audience/ target pembaca
– Menulis isi
• Tips :
–
–
–
–
–
–
Harus singkat dan jelas
Gunakan bahasa sederhana
Memudahkan scanning: highlighting,bulleted list
Berikan preview informasi
Hindari “click here”, “under construction”
Jangan memaksa user menghapal
User Interface Design
• Perhatikan usability
• Beberapa hal untuk mencapai usability
– Percabangan – struktur yang berarti, tidak
berlebihan, tidak menggunakan frame
– Kekompakan situs – hindari halaman terlalu
panjang, horizontal scrolling
– Akses universal – platform, browser, kecepatan
akses, resolusi layar, warna
– Dukungan navigasi
Graphic / Visual Design
• Tata letak – grid dan struktur
• Konsistensi – warna, font, style
• Kesederhanaan situs – tidak membingungkan
user
• Optimasi file grafik – format file, web safe
colors
Mengatur Situs Web
• Jenis situs web yang sedang kita susun sangat
mempengaruhi struktur situs web itu dan urutan
informasi yang akan dihasilkan. Kita dapat mengatur
sebuah situs web untuk :
– Mengupas hobby kita atau ketertarikan kita pada satu hal
tertentu dsb.
– Membuka suatu forum diskusi dan komunikasi
– Memberikan layanan kepada pelanggan
– Menghasilkan keuntungan bagi perusahaan atau organisasi
tertentu
Informasi Pada Halaman Web
• Beberapa situs web terdiri dari ribuan halaman web, beberapa lagi
hanya terdiri dari beberapa halaman saja. Semakin banyak
informasi yang akan diberikan atau semakin penting informasi itu,
maka kita perlu membuatnya mudah bagi pengguna untuk
mengaksesnya.
• Penyusunan sistem navigasi hendaknya dibuat sesederhana
mungkin sehingga lebih mudah diikuti oleh pengunjung.
• Secara umum, pengunjung pencari informasi juga membutuhkan
akses yang cepat.
• Penempatan iklan harus hati-hati, usahakan letaknya jangan
mengganggu atau membuat bosan pengunjung.
• Proporsi yang baik diperlukan untuk mengatur antara kemudahan
akses dan kecepatan akses dengan kelangsungan situs web.
Nilai Tambah (1)
Animasi dan Gambar
• Banyak situs menggunakan animasi dan gambar untuk
menarik pengunjung. Namun hati-hati! Jika terlalu banyak
justru akan membuat pengunjung terganggu
• Pertimbangkan masalah bandwidth (waktu download) dan
kompatibilitas browser.
– Animasi flash  harus ada flash player.
– Animasi javascript  browser harus enable.
• Hindari:
– Menampilkan gambar ukuran besar (> 1 MB)
– Merubah ukuran gambar yang besar menjadi kecil melalui atribut di
tag <img>. Lebih baik gunakan image-editor.
Nilai Tambah (2)
Teks ekuivalen
• Setiap gambar atau image yang kita letakkan di halaman web,
haruslah disertai dengan atribut teks ekuivalen pada tag yang
digunakan.
• Contoh:
– Atribut “alt” didalam tag <img>
– Atribut “title” pada tag <a>
• Mengapa ?
Karena beberapa pengunjung menon-aktifkan opsi untuk
mendownload gambar atau animasi untuk mempercepat
download time.
Proses Pembuatan Website
•
•
•
•
•
Define Content / Website Objectives
Develop Architecture
Membuat kerangka dasar situs atau arsitektur atau hirarki.
Create Design
Desain seharusnya bisa tampak bagus di monitor komputer.
Konsistensi desain pada semua halaman web SANGAT penting.
Warna, Huruf, Grafis, Garis, Tabel, Logo, dan Navigasi
Implement The Site
Ujikan desain web anda pada berbagai monitor komputer,
platform dan browser
Maintaining the site
Define Content/ Isi
1. Tentukan Maksud dan Tujuan Situs Anda
2. Apa Kebutuhan Orang Mengunjungi Situs Anda?
3. Tentukan Target Umur Rata-rata Audience dan
Tingkat Ketrampilan.
4. Kenali Audience Anda
5. Jagalah Content Anda Fresh dan Up To Date
6. Dahulukan Kualitas diatas Kuantitas
7. Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy
Policy, Copyright, Disclaimer]
Navigasi Situs
• Pembuatan navigasi situs hendaknya
mengikuti beberapa aturan dasar, seperti:
– Batasi jumlah item dalam list dan menu.
– Jangan menggantungkan sepenuhnya pada image
grafis untuk navigasi.
– Homepage harus mudah ditemukan.
– Integrasikan fasilitas navigasi dengan content.
– Hindari frame jika mungkin (gunakan tabel atau
CSS).
Arsitektur Situs
• Arsitektur situs menentukan bagaimana situs
dan halaman-halaman di dalamnya
diorganisasikan, dinamai, dan saling
dihubungkan (linked) untuk mempermudah
proses browsing dan pencarian informasi oleh
pengunjung.