Prinsip Reka Bentuk

Laman Web
 Prinsip asas reka bentuk
laman web
Project analysis slide 2
JENIS PERSEKITARAN WEB
TYPOGRAPHY
YANG DIBINA

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

Reka bentuk yang digunakan

adalah lebih ringkas dan
berwarna-warni.
 REKA BENTUK BERASASKAN
PENGGUNA

Rolex pula mensasarkan kedua-

dua 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