Prinsip Reka Bentuk
Laman Web
Prinsip asas reka
bentuk laman web
JENIS PERSEKITARAN WEB
YANG DIBINA
TYPOGRAPHY
WARNA DAN GRAFIK
PENEKANAN MAKLUMAT
DALAM WEB
NAVIGASI
PERBEZAAN ELEMEN DALAM
WEB
KESEIMBANGAN VISUAL
JENIS PERSEKITARAN WEB YANG
DIBINA
Persekitaran laman web ini merangkumi beberapa faktor teknikal
seperti yang berikut:
• Kesesuaian penggunaan pelbagai jenis pelayar
• Kelajuan capaian Internet
• Keperluan perisian sokongan untuk paparan
JENIS PERSEKITARAN WEB YANG
DIBINA
• Kepelbagaian sistem komputer dan peranti mudah alih yang digunakan oleh
pengguna
• Kepelbagaian saiz paparan monitor yang digunakan
PENEKANAN MAKLUMAT DALAM WEB
Maklumat atau kandungan yang ingin diberikan perhatian dalam
laman web
PENEKANAN MAKLUMAT DALAM WEB
Cara yang boleh digunakan untuk menarik perhatian pengguna.
• Penggunaan kesan khas seperti drop shadow, tekstur atau cahaya
dan bentuk.
PENEKANAN MAKLUMAT DALAM WEB
Cara yang boleh digunakan untuk menarik perhatian pengguna.
• Penggunaan ruang putih untuk menjadikan elemen-elemen
kelihatan lebih terserlah.
PENEKANAN MAKLUMAT DALAM WEB
Cara yang boleh digunakan untuk menarik perhatian pengguna.
• Penggunaan fungsi bold, italic, warna yang berbeza dan border.
PERBEZAAN ELEMEN DALAM WEB
Konsep perbezaan digunakan untuk menghasilkan tarikan visual
terhadap suatu elemen yang ingin ditekankan dalam laman web.
PERBEZAAN ELEMEN DALAM WEB
Kaedah perbezaan yang boleh digunakan :
• Penggunaan label dan pautan yang berbeza.
PERBEZAAN ELEMEN DALAM WEB
Kaedah perbezaan yang boleh digunakan :
• Penggunaan border, warna yang berbeza dan juga kesan khas.
PERBEZAAN ELEMEN DALAM WEB
Kaedah perbezaan yang boleh digunakan :
• Penggunaan ruang putih, teks terbalik, teks berhuruf condong (italic)
dan saiz teks yang berbeza.
PERBEZAAN ELEMEN DALAM WEB
Kaedah perbezaan yang boleh digunakan :
• Penggunaan prinsip perbezaan warna dalam memberi kelainan
pada butang login
TYPOGRAPHY
Penyusunan teks yang dipaparkan dalam laman web supaya mesej atau idea pereka
web yang mungkin bersifat profesional akan sampai kepada pembacanya dengan lebih baik.
TYPOGRAPHY
Corak penyusunan teks mengikut gaya pembacaan pengguna:
• Corak paparan berasaskan skrin
TYPOGRAPHY
Corak penyusunan teks mengikut gaya pembacaan pengguna:
• Corak paparan berasaskan kertas
TYPOGRAPHY
Corak penyusunan teks mengikut gaya pembacaan pengguna:
• Corak paparan secara Z-shaped
TYPOGRAPHY
Corak penyusunan teks mengikut gaya pembacaan pengguna:
• Corak paparan secara F-shaped
TYPOGRAPHY
TYPOGRAPHY
Membuat pemilihan tentang jenis kumpulan fon yang dikategorikan
sebagai senarai selamat digunakan atau disokong oleh kebanyakan
platform seperti
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
TYPOGRAPHY
Panduan yang berkaitan dengan typography adalah seperti yang
berikut:
• Seragamkan jenis teks atau fon yang digunakan bagi setiap
halaman yang dibina.
• Gunakan saiz teks yang berbeza bagi membezakan tajuk
dengan kandungan atau huraian.
WARNA DAN GRAFIK
Penggunaan warna dan grafik dalam laman web mampu menonjolkan
imej dan identiti sesebuah laman web.
Penggunaan warna yang bijak mampu menarik perhatian pelawat serta
meningkatkan kebolehbacaan mereka.
NAVIGASI
Struktur laman web yang akan memudahkan seseorang pengguna
melayarinya.
Konsep navigasi web ini memberikan pengalaman kepada pelawat
laman web untuk mengemudi laman web tersebut mengikut
kecekapan masing-masing
NAVIGASI
Teknik navigasi dalam laman web:
• Bar navigasi
NAVIGASI
Teknik navigasi dalam laman web:
• Breadcrumbs
NAVIGASI
Teknik navigasi dalam laman web:
• Site map
NAVIGASI
Teknik navigasi dalam laman web:
• Menu Drop-down
NAVIGASI
Teknik navigasi dalam laman web:
• Pautan menggunakan grafik
KESEIMBANGAN VISUAL
Merujuk kepada gabungan elemen visual seperti garisan, imej, teks,
bentuk dan warna dalam laman web.
Pereka laman web perlu peka tentang pengguna sasaran laman web
tersebut.
REKA BENTUK BERASASKAN
PENGGUNA
Dalam mereka laman web, kita seharusnya mengambil berat tentang
keperluan serta mengenali sasaran pengguna apabila mereka
melayari laman web.
REKA BENTUK BERASASKAN
PENGGUNA
SEPHORA mensasarkan
wanita berpendapatan
tinggi sebagai
pelanggan.
Justeru, laman web
mereka direka agar
kelihatan kemas dan
minimal.
REKA BENTUK BERASASKAN
PENGGUNA
YouTube Kids direka khas bagi
memenuhi keperluan kanakkanak.
Reka bentuk yang digunakan
adalah lebih ringkas dan
berwarna-warni.
REKA BENTUK BERASASKAN
PENGGUNA
Rolex pula mensasarkan keduadua lelaki dan wanita yang
gemarkan kemewahan.
Laman web Rolex direka
menggunakan palet warna yang
menjadi simbol kemewahan.
Terima Kasih
Disediakan oleh Saidatul Nor Aisyah binti Mohd Anuar