03 - Konsep Dasar Desain Web

FAKULTAS TEKNOLOGI INFORMASI 1 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

Desain dan
Pemrograman Web 1
PG110 3 SKS
KONSEP DASAR DESAIN WEB
PERTEMUAN 03
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
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

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 (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).
Navigasi Situs (2)
List of contents
Merupakan jenis
navigasi dasar
menggunakan list-item.
Biasanya digunakan
sebagai daftar isi, atau
navigasi dalam content
situs.
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.
Navigasi Situs (4)
Horizontal top bar

Tabs

2-level top (bar or tabs)

Navigasi Situs (5)
Top and side bars
Paging

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

Navigasi Situs (7)
Multiple-level tree
nav

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.

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

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.

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.
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.
Terima Kasih
Fakultas Teknologi Informasi
Universitas Budi Luhur
http://fti.bl.ac.id

03 - Konsep Dasar Desain Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

03 - Konsep Dasar Desain Web

Diunggah oleh

Hak Cipta:

Format Tersedia

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

2009 Fakultas Teknologi Informasi Universitas Budi Luhur

Anda mungkin juga menyukai