Desain dan

Pemrograman Web 1
PG110 – 3 SKS

© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur

Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260
Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 1

 PERTEMUAN 03

KONSEP DASAR DESAIN WEB

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 2

 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

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 3

 Penyusunan Halaman Web
 Berikut ini beberapa langkah yang dapat dilakukan
sehingga penyusunan halaman web lebih efektif,
antara lain :
 Definisikan secara jelas tujuan penyusunan
halaman web
 Buatlah (content) yang menarik untuk disampaikan
ataupun didiskusikan.
 Buatlah halaman web sedemikian rupa sehingga
para pengunjung dirayu dan ditantang untuk
kembali lagi

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 4

 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).

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 5

 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 %)

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 6

 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
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 7
 Pengembangan Situs Web
 Content Creation
 User Interface Design
 Graphic/ Visual Design
 Technology Planning
 Web Authoring
 Web Programming
 Multimedia Design

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 8

 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

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 9

 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
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 10
 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

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 11

 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

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 12

 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.
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 13
 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.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 14

 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.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 15

 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

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 16

 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]
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 17
 Navigasi Situs (1)
 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).
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 18
 Navigasi Situs (2)
 List of contents
 Merupakan jenis
navigasi dasar
menggunakan list-item.
 Biasanya digunakan
sebagai daftar isi, atau
navigasi dalam content
situs.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 19

 Navigasi Situs (3)
 Breadcrumb trail
 Umumnya digunakan untuk memberikan
informasi ke pengunjung dimana dia berada dan
juga berguna untuk mempermudah pengunjung
jika akan kembali ke halaman awal.
 Digunakan jika situs memiliki content (isi) yang
cukup panjang.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 20

 Navigasi Situs (4)
 Horizontal top bar

 Tabs

 2-level top (bar or tabs)

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 21

 Navigasi Situs (5)
 Top and side bars
 Paging

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 22

 Navigasi Situs (6)
 Buttons bar with revealed drop-down

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 23

 Navigasi Situs (7)
 Multiple-level tree
nav

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 24

 Arsitektur Situs (1)
 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.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 25

 Arsitektur Situs (2)
 Dalam membuat arsitektur atau struktur situs web,
hendaknya kita mengikuti beberapa prinsip dan aturan,
diantaranya:
 Semua halaman di situs harus memiliki link ke halaman utama (homepage).
 Tunduk pada “aturan tiga-klik” dimana pengunjung harus sudah
menemukan informasi dalam 3 kali klik atau kurang.
 Tempatkan content paling penting di awal halaman.
 Batasi panjang halaman (no scrolling).
 Sederhanakan tata-letak halaman.
 Usahakan agar content utama mudah dicari.
 Tampilkan produk dari berbagai perspektif/kategori.
 Ikuti prinsip-prinsip umum penulisan yang baik.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 26

 Arsitektur Situs (3)
 All in One
 Semua content situs disajikan dalam sebuah
halaman tunggal (halaman utama atau
homepage).
 Arsitektur ini merupakan arsitektur yang paling
sederhana.
 Keuntungan dari model ini adalah mudah dalam
perawatan file (maintenance) karena hanya terdiri
dari satu halaman (file).

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 27

 Arsitektur Situs (4)
 Flat
 Merupakan model struktur web yang menyusun halaman-
halaman secara linier.
 Setiap halaman dapat diakses dari halaman yang lainnya
secara berurutan.
 Struktur ini merupakan struktur yang sederhana dan sering
diterapkan dalam situs-situs dengan jumlah halaman yang
tidak terlalu banyak. Contohnya, situs yang tersusun dalam
menu Home, Contact Us, Products, About Us dll

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 28

 Arsitektur Situs (5)
 Index
 Mirip seperti struktur flat, hanya saja pada
struktur index menu atau halaman sudah tersusun
berdasarkan index tertentu.
 Arsitektur ini memudahkan pengunjung untuk
mengakses suatu halaman.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 29

 Arsitektur Situs (6)
 Hub-and-spoke / Daisy
 Model ini cocok untuk situs yang memiliki beberapa alur,
misalnya pada aplikasi situs email. Pengunjung dapat
mengakses halaman inbox (kotak surat) melalui beberapa
cara, seperti setelah membaca isi surat, setelah mengirim
surat atau saat sudah berhasil menyimpan contact.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 30

 Arsitektur Situs (7)
 Strict hierarchy
 Halaman-halaman web disusun dalam susunan parent-and-child
(per kategori).
 Arsitektur ini memungkinkan untuk mengakses suatu halaman
melalui parent atau kategorinya.
 Keuntungan dari model ini adalah pengunjung mudah dan cepat
dalam mencari informasi atau halaman yang diinginkannya
karena informasi disusun berdasarkan kategori tertentu.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 31

 Arsitektur Situs (8)
 Multi-dimensional hierarchy
 Pada dasarnya sama dengan arsitektur strict-hierarchy,
hanya saja pada model ini, informasi memungkinkan
diakses dari beberapa kategori sekaligus. Dengan kata lain,
beberapa kategori dapat mengakses satu informasi
(halaman) yang sama.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 32

 Arsitektur Situs (9)
 Search
 Jika kita akan menambahkan form pencarian pada situs
kita, maka jenis arsitektur web ini yang diterapkan.
Informasi atau halaman dapat diakses oleh pengunjung
setelah pengunjung tersebut melakukan pencarian melalui
form (halaman) yang sudah disediakan. Tentu saja,
informasi atau halaman yang ditampilkan sesuai dengan
kata kunci (keyword) yang dimasukkan oleh penggunjung.

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 33

 Terima Kasih
Fakultas Teknologi Informasi
Universitas Budi Luhur
http://fti.bl.ac.id

FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 34