Proses Mereka

Bentuk
Kerangka
Aplikasi
 Penstrukturan
Kandungan atau
Maklumat
• Setiap reka bentuk yang bakal dihasilkan perlu
berasaskan pengguna atau pengalaman pengguna semasa
melayari laman web.
• Penglibatan pengguna semasa proses pengumpulan
maklumat adalah sangat penting untuk memastikan laman
web yang dibina mampu memenuhi kehendak mereka.
• Kaedah untuk mendapatkan input daripada pengguna:
mengadakan sesi temu bual dengan pengguna,
mengedarkan borang kaji selidik kepada sasaran
pengguna atau membuat tinjauan cara laman web
digunakan oleh pengguna.
 Membentuk inventori maklumat
• Pembina laman web menyenaraikan semua maklumat yang bakal dimasukkan dalam laman web
yang dibina.
• Senarai atau inventori tersebut bukan sahaja terhad kepada jenis maklumat yang akan dimasukkan,
malah perkara yang boleh dilakukan oleh pengguna juga perlu disenaraikan.
• Senarai atau inventori akan memberikan idea kepada fungsi yang perlu ada dalam laman web
tersebut.
 Pengelasan maklumat
• Pembina laman web mengelaskan senarai maklumat atau inventori maklumat kepada beberapa kategori.
• Untuk tujuan tersebut, pereka bentuk maklumat boleh melihat persamaan maklumat yang ada bagi
mewujudkan kemungkinan-kemungkinan kategori yang perlu ada.
• Maklumat atau informasi ialah suatu yang subjektif dan corak pengelasan maklumat boleh berbeza-beza
bergantung pada perspektif pereka web.
• Pereka perlu menetapkan bilangan kategori maklumat yang perlu ada bersesuaian dengan senarai maklumat
yang tersedia dan bagaimana setiap kategori tersebut akan divisualkan dalam laman web yang bakal dibina.
• Kaedah terbaik yang dapat dilaksanakan adalah dengan menggunakan gambar rajah atau carta alir bagi
menunjukkan hubung kait bagi setiap kategori maklumat yang ada.
• Secara tidak langsung, ini juga mampu memberikan idea atau gambaran kasar tentang corak pautan laman web
yang bakal dibina.
 Pengelasan maklumat
Kaedah Contoh
Mengikut turutan abjad Pengelasan maklumat jualan berasaskan nama pengguna
Kronologi Pengelasan hasil jualan mengikut tarikh
Kategori atau jenis Pengelasan jualan mengikut kategori produk
Hierarki Jenis baju muslimah yang dikelaskan kepada subkategori seperti blaus dan
kurung moden
Spatial Pengelasan maklumat mengikut geografi, contohnya pengelasan jualan
mengikut negeri dan tempat
Mengikut urutan magnitud Pengelasan maklumat jualan bermula daripada jumlah yang kecil kepada jumlah
jualan yang besar.
Penstrukturan
Halaman
Cara setiap halaman dalam laman
web tersebut dihubungkan.
 Penstrukturan Halaman
• Kebiasaannya, pereka bentuk maklumat yang profesional akan menggunakan gambar rajah tapak
(site diagram) sebagai alat untuk menyampaikan struktur laman web ini kepada klien dan sebagai
panduan sepanjang proses pembangunan laman web.
• Gambar rajah tapak ialah diagram yang menggunakan simbol kotak bagi mewaklili setiap laman
web dengan garis atau anak panah bagi mewakili hubungan antara laman web.
Gaya Penstrukturan
Halaman
Jujukan
Hierarki

Kompleks
 Penstrukturan secara hierarki

Bermula daripada laman pertama yang

memaparkan beberapa pilihan kategori
maklumat yang ada dalam laman web
tersebut untuk dilayari oleh pengguna.

Kebiasaannya, kategori yang diwujudkan

perlu menepati kesamaan jenis maklumat
yang ada bagi setiap kategori tersebut.
Penstrukturan secara jujukan

Pengguna dipandu dari halaman ke

halaman yang
lain secara jujukan.

Penstrukturan ini lebih sesuai bagi laman

web yang berciri penceritaan atau apa-apa
maklumat yang bersifat kronologi.
Penstrukturan secara kompleks
Terdapat laman web komersial yang menawarkan
maklumat yang padat dan fungsi yang agak kompleks.
Reka Bentuk
Antara Muka
• Menentukan bagaimana struktur laman web
secara logikalnya digambarkan termasuk
teknik navigasi yang memandu kepada
pergerakan pengguna dalam laman web.
 Reka Bentuk Antara Muka
• Pereka bentuk antara muka biasanya akan menggunakan diagram atau carta alir bagi
menggambarkan reka bentuknya.
• Rajah biasanya akan menunjukkan bagaimana setiap halaman web berfungsi.
• Salah satu rajah yang digunakan dalam proses reka bentuk antara muka ialah wireframe atau
rangka wayar.
• Rangka wayar atau juga dikenali sebagai skema halaman atau pelan halaman ialah panduan visual
yang mewakili rangka kerja keseluruhan laman web.
• Tujuan rangka wayar dibuat ialah untuk menyusun elemen-elemen yang akan dimasukkan dalam
laman web bagi menepati konsep laman web tersebut.
Contoh rangka wayar YouTube
 Reka Bentuk
Navigasi
Navigasi web merujuk proses objek-
objek dalam laman web yang
terdiri daripada teks, rajah, audio
dan video dihubungkan antara satu
sama lain dengan menggunakan
pautan hiperteks atau hipermedia.
 Reka Bentuk Navigasi
• Konsep navigasi web ini memberikan pengalaman kepada pelawat laman web untuk mengemudi
laman web tersebut mengikut kecekapan masing-masing.
• Navigasi web yang bagus seharusnya memberikan petunjuk kepada pelawat laman web tentang
kedudukan atau lokasi semasa pengguna.
• Fungsi navigasi:
• Membantu pengguna atau pelawat mengetahui kedudukan semasa mereka.
• Memandu pelawat tentang pilihan yang disediakan untuk mereka menerokai lama web tersebut.
Teknik navigasi Toolbar

Kebanyakan laman web menggunakan

toolbar secara menegak atau mendatar bagi
menyusun pilihan yang ditawarkan kepada
pengguna.
 Teknik navigasi Bar navigasi
Mengumpulkan sekumpulan pautan teks pada
satu laman web.
Pautan boleh menggunakan pelbagai elemen
multimedia seperti ikon, grafik atau teks.
Penggunaan grafik sebagai pautan biasanya
bertujuan untuk menjadikan laman web tersebut
kelihatan lebih menarik manakala penggunaan
pautan teks dapat mempercepat proses muat
turun.
Teknik ini juga boleh diimplementasikan dengan
menyenaraikan elemen teks, ikon atau grafik
secara mendatar atau menegak.
Teknik navigasi Breadcrumb

Teknik kawalan grafik yang digunakan sebagai

bantuan navigasi dalam antara muka pengguna.
Teknik ini membolehkan pengguna menjejaki lokasi
atau kedudukan semasa mereka dalam program,
dokumen atau laman web.
Teknik navigasi peta tapak (site map)

Teknik ini menyenaraikan beberapa pautan laman web

yang berkaitan untuk dilayari oleh pengguna.
Teknik navigasi Pautan Menggunakan Grafik

Biasanya banyak digunakan bagi sasaran

pengguna seperti kanak-kanak agar lebih
mudah bagi mereka untuk melayari laman
web
 Teknik navigasi Menu Drop-down

Teknik ini merupakan elemen kawalan grafik

yang menyenaraikan sekumpulan pautan dalam
kelompok yang sama.
Teknik ini memudahkan pengguna untuk
membuat pilihan dengan memaparkan kumpulan
pilihan pautan dengan lebih tersusun.
Terima Kasih

Disediakan oleh: Saidatul Nor Aisyah binti Mohd Anuar