Desain Website

Interaksi Manusia dan Komputer

Web Layout vs Web Design
 Halaman Web (web page) didefinisikan
sebagai dokumen HTML tunggal.
 Situs Web (website) adalah kumpulan dari

laman web yang saling berkaitan (terkait).

 Merancang situs web yang baik
membutuhkan lebih dari sekedar menyusun
halaman.
Contoh Website
 www.projectpuffin.org
 www.pmlodge.com
 www.uintafishing.com
 www.uncommonadv.com
Layout Web
 Tata letak (layout) halaman web sangat
penting.
 Tata letak yang buruk, dapat membuat:

1. Navigasi sulit dilakukan.

2. Sulit menemukan informasi di halaman.
3. Tidak menarik secara visual (visually
unappealing).
Tabel
 Gunakan tabel untuk meletakkan halaman
Anda!
 Buat batas tabel tidak terlihat.
 Tabel 2x2 berfungsi dengan baik.
Area Web
Logo Header

Menu Content
Layout A 2 x 2
Desain Lain
 www.adobe.com (menu on right)
 www.uintafishing.com (many columns)
Tabel dalam tabel
Bagian luar tabel
Bagian dalam tabel
Bagian dalam tabel (2)
Ditengah dengan tiga kolom
Desain yang komplek
Informasi Web
 Putuskan info apa yang ada di setiap
halaman:
a. Halaman teman
b. Halaman keluarga
c. Halaman pribadi
d. Halaman hobi
Komunikasi web yang bagus
Komunikasi web yang bagus, memuat
beberapa karakteristik:
 Singkat (be concise).
 Batasi pilihan-gunakan struktur hirarki.
 Hirarki adalah organisasi terstruktur di mana

beberapa halaman berada pada level yang

lebih tinggi dari pada yang lain.
Konsistensi Desain
Kata kunci dalam mendesain web terdiri 3 hal:
 Gunakan font yang sama di seluruh halaman

web.
 Gunakan grafik yang konsisten di situs web

(antar halaman).
 Gunakan skema warna yang konsisten.
Contoh
Rujukan Desain Web
 Halaman Web Bagus
https://medicine.yale.edu/
 Gambar
http://www.clipart.com/en/
https://free-clip-art.com/
 Huruf
https://www.1001freefonts.com/
Kesimpulan
1. Dalam desain website tentunya membutuhkan
proses jika ingin hasilnya lebih baik.
2. Proses ini sangat penting diketahui oleh seorang
desainer web, karena desain website tidak hanya
fokus pada informasi apa yang ditulis (baca:isi)
tetapi jauh lebih penting bagaimana informasi
dapat ‘dinikmati’ dengan baik oleh pembaca.
3. Supaya bisa dinikmati, harmonisasi (layout,
gambar, huruf, warna) perlu dilakukan.