3/21/2018

KONSEP DASAR
Eko Siswanto, S.Kom., M.Kom
ASPEK PENTING DLM PEMBUATAN
WEBSITE
• USABILITY
• NAVIGATION
• WRITING CONCEPT
• SIMPLICITY
• ACCESSIBILITY
• COLOR BLINDNESS
• GRAPHIC
• NEW TECHNOLOGY

3/21/2018
NAVIGATION
• Navigation Panel
• Structure Navigation

3/21/2018
• Home Button
• Link
• HTML Title
• Site Map
• Search Facility
• Graphic as Navigation or Link

Back to ASPEK
 Back to NAVIGATION

Navigation Panel
• Berupa teks atau Grafik
• Konsisten
• Dipasang di kiri atau atas

3/21/2018
 Back to NAVIGATION

Structure Navigation (1)

• Untuk mengorganisasikan seluruh halaman web.

Gambar 1.
One-Tier Site

Gambar 2. Gambar 3.
Two-Tier Site Three-Tier Site

3/21/2018
Structure Navigation (2)
Back to NAVIGATION

3/21/2018
Gambar 4.
Gambar 5.
Bottom-Heavy
Top-Heavy System
System
 Back to NAVIGATION

Home Button
• Terdapat pada
setiap halaman
web, kecuali
halaman utama.
• Peletakan di kiri
atas.

3/21/2018
Link
Back to NAVIGATION

• Teks diberi underlined.

• Bedakan antara External Link dan Inetrnal Link.

3/21/2018
• Link dalam bentuk file selain html, cantumkan ukuran file.
• Bedakan warna link sebelum dan sesudah.
 Back to NAVIGATION

HTML Title
• Pada tag HTML Header.
• Berguna sebagai bookmark.

3/21/2018
 Back to NAVIGATION

Site Map
• Struktur yang
hirarkis dari
sebuah situs
dengan link
untuk seluruh
halaman yang
relevan

3/21/2018
 Back to NAVIGATION

Search Facility
• Beberapa pengunjung/pengguna lebih memilih
fasilitas pencarian sebelum menggunakan navigasi
lain yang disediakan.
• Ada juga beberapa pengguna menggunakan fasilitas
pencarian sebagai fasilitas terakhir yang akan
digunakan.

3/21/2018
WRITING CONCEPT (1)
• More less better.
• Highlight kata penting.

3/21/2018
• Jika perlu buat bullet numbering.
• Hindari banyak menggulung layar (Vertical Scroll)
• Hindari Horisontal Rule (tag <HR>).
• Hindari teks rata tengah.

Back to ASPEK
WRITING CONCEPT (2)
• Jangan menggunakan Huruf Kapital terlalu banyak.
• Hindari teks miring berlebihan.

3/21/2018
• Pertahankan isi style gunakan CSS.
• Jangan gunakan font yang terlalu banyak variasi.
Gunakan seperti Arial, Georgia, Tahoma, dan
Verdana. Pastikan fontsize-nya standar untuk Web

Back to ASPEK
SIMPLICITY
• Hindari warna terlalu banyak.
• Tulis isi secara singkat bukan karangan.

3/21/2018
• Terlalu banyak animasi.
• Terlalu banyak elemen yang tidak semestinya (sound, image)

Back to ASPEK
ACCESSIBILITY
• Mudah digunakan oleh browser utama yang sering
digunakan banyak orang maupun web browser

3/21/2018
lainnya.
• Mudah digunakan tanpa harus mendownload
sebuah plug-in tertentu.
• Gunakan style sheet untuk memisahkan style dan
content.
• Menetapkan teks alternatif untuk grafik (<img
src=”gambar.gif” width=”25” height=”35”
alt=”keterangan gambar”>)
Back to ASPEK
COLOR BLINDNESS
• Jangan menggunakan warna sebagai satu-satunya kunci
rahasia.

3/21/2018
• Hindari penggunaan warna merah atau hijau saja secara
monoton.
• Pertahankan tingkat kontras antara teks dan latar belakang.

Back to ASPEK
GRAPHIC
• Tambahkan grafik seperlunya
• Ambil ukuran fisik atau file yang terkecil.

3/21/2018
Back to ASPEK
TECHNOLOGY
• Hindari penggunaan teknologi yang sudah lebih dari dua
tahun.

3/21/2018
• Hindari pembuatan website yang memaksa
pengguna/pengunjung harus mendownload software tertentu
terlebih dulu.
• Jika menggunakan teknologi baru, cari tahu tentang usabilitas
(kemudahan penggunaan) dari semua jenis website yang ada.
• Periksa statistik website Anda untuk melihat berapa banyak
pengguna memiliki plug-in terakhir sebelum Anda merancang
website.

Back to ASPEK
Latihan
• Cari 1 Website yang menurut anda keren ( Sertakan Link )
• Baca dan Fahami isi slide ini
• Review website tersebut

3/21/2018
• Pemenuhan
• USABILITY
• NAVIGATION
• WRITING CONCEPT
• SIMPLICITY Review Lengkap (Ms.Word-Cetak)
buat power point
• ACCESSIBILITY Minggu depan Sampaikan hasi review
• COLOR BLINDNESS
• GRAPHIC
• NEW TECHNOLOGY