Rekabentuk Laman Web

1. Rekabentuk Laman Web Disediakan oleh: En. Mohd Erwandi b. Marwan Cik Norfaiza bt. Fuad En. Ahmad Affzan b. Abdullah Cik Ida Laila bt. Ahmad

2. Pengenalan • Reka bentuk laman web dibahagi kepada 4 generasi: • Generasi Laman Web Pertama. • Generasi Laman Web Kedua. • Generasi Laman Web Ketiga. • Generasi Laman Web Keempat. • Generasi Laman Web Pertama • Linear. • Satu helaian laman web. • Menggunakan scroll ke bawah dan ke atas untuk lihat maklumat. • Teks dan imej yang terhad sahaja.

3. Pengenalan (samb…) • Generasi Laman Web Kedua • Ikon menggantikan perkataan. • Menu ‘bullet list’ atau menu berasaskan ikon. • Paparkan maklumat secara hierarki. • Rekabentuk bergantung kepada perkembangan teknologi. • Generasi Laman Web Ketiga • Rekabentuk bergantung kepada visual. • Menggunakan rekabentuk berasaskan metafor. • Persembahan maklumat lebih dari sekadar menu pilihan.

4. Pengenalan (samb…) • Generasi Laman Web Keempat • Berasaskan pangkalan data. • Mengandungi banyak elemen bersifat dinamik. • Lebih bersifat interaktif.

5. Pengenalan (samb…) • Terdapat beberapa aspek yang perlu diambil kira dalam merekabentuk laman web: • Rekabentuk Informasi • Rekabentuk Interaksi • Rekabentuk Antaramuka

6. Rekabentuk Informasi • Uruskan maklumat secara berkesan. • Panduan umum: • Bahagikan isi kandungan kepada unit- unit kecil. • Bina hierarki kepentingan antara unit. • Gunakan hierarki tersebut bagi membentuk hubungan antara unit. • Bina halaman yang cuba memenuhi struktur yang telah dirancang. • Analisis fungsi dan keberkesanan sistem yang dibangunkan. • Tampilkan tema yang sesuai dengan laman web.

7. Rekabentuk Informasi (samb…) • Contoh Tema: Pengajaran

8. Rekabentuk Informasi (samb…) • Contoh Tema: Latihan

9. Rekabentuk Informasi (samb…) • Contoh Tema: Rujukan

10. Rekabentuk Informasi (samb…) • Contoh Tema: Berita

11. Rekabentuk Informasi (samb…) • Tema: Pengajaran • Cuba aplikasikan pendekatan pengajaran dan pembelajaran yang disarankan oleh teori pembelajaran. • Contoh: pembelajaran menerusi simulasi, permainan, latih tubi dan sebagainya.

12. Rekabentuk Informasi (samb…) • Elemen lain yang perlu diambilkira: • Senarai rujukan dan pautan. • Panduan melayari laman web. • Perkara penting. • Enjin carian. • FAQ.

13. Rekabentuk Interaksi • Elemen utama: • Bagaimana pengguna dapat melayari laman web. • Bentuk interaksi pengguna ke atas laman web. • Struktur asas laman web interaksi: • Struktur linear. • Struktur hierarki. • Struktur rawak.

14. Rekabentuk Interaksi (samb…) • Struktur linear: • Membenarkan pengguna meneroka secara lurus. • Sama ada ke hadapan atau ke belakang. • Biasanya terdapat pada perisian multimedia.

15. Rekabentuk Interaksi (samb…) • Struktur hierarki: • Dikenali sebagai struktur pohon. • Setiap paparan mewakili topik utama. • Setiap topik utama dibahagi kepada beberapa topik yang lebih kecil.

16. Rekabentuk Interaksi (samb…) • Struktur rawak: • Mempunyai satu helaian utama yang berfungsi sebagai helaian utama. • Setiap helaian mempunyai pautan he helaian lain.

17. Rekabentuk Interaksi (samb…) • Elemen membantu pengguna melayari laman web: • Menyediakan carta aliran laman web. • Memaparkan semula subtajuk yang dipilih. • Memaparkan bilangan muka surat di setiap helaian. • Paparkan maklumat mengenai laluan di mana pengguna berada. • Menyediakan butang ke helaian lain di bahagian atas atau bawah helaian.

18. Rekabentuk Antaramuka • Terdapat beberapa elemen yang diambil kira: • Rekabentuk berpusatkan pengguna. • Bantuan navigasi yang jelas. • Antaramuka ringkas dan konsisten. • Capaian secara terus. • Masa muat turun (download time) yang bersesuaian. • Stabil dan diyakini. • Mudah dicapai tanpa masalah besar. • Menyediakan alternatif. • Mampu berdiri sendiri.

19. Rekabentuk Antaramuka (samb…) • Rekabentuk berpusatkan pengguna: • Mengambil kira semua jenis pengguna (kanak- kanak, remaja, dewasa, warga tua). • Memerlukan kajian secara ringkas mengenai demografik pengguna yang mungkin mencapai laman web anda. (kurang upaya, cacat, pintar, lemah dll) • Jangan hanya mengambil kira keperluan perisian Pengimbas Internet.

20. Rekabentuk Antaramuka (samb…) • Bantuan navigasi: • Penggunaan ikon atau butang yang konsisten, skema yang boleh dikenalpasti. • Penggunaan teks atau tajuk yang ringkas di helaian. • Sistem penerokaan yang mudah dan tidak menyesatkan pengguna. • Pastikan pengguna sentiasa sedar di mana mereka berada.

21. Rekabentuk Antaramuka (samb…) • Bantuan navigasi First web page Hypertext link 3 4 5 6 7 Previous page Next page Hypertext link Second web page

22. Rekabentuk Antaramuka (samb…) • Bantuan navigasi: Butang/ ikon yang ringkas dan konsisten.

23. Rekabentuk Antaramuka (samb…) • Antaramuka ringkas dan konsisten: • Menggunakan konsep metafor yang ringkas dan tidak terlalu kompleks. • Konsisten dari segi reka letak, warna, jenis tulisan, tema grafik. • Mudah dikenalpasti fungsi. • Tidak perlu diterjemah atau dikod semula.

24. Rekabentuk Antaramuka (samb…) • Antaramuka ringkas dan konsisten:

25. Rekabentuk Antaramuka (samb…) • Capaian secara terus: • Perayauan yang minima- bina laluan yang mudah dan pendek antara 2-3 laluan. • Kedalaman minima- bina hierarki dengan aras yang terendah • Semakin dalam hierarki, semakin kompleks laman web.

26. Rekabentuk Antaramuka (samb…) • Capaian secara terus: kedalaman minima M Menu page C C C C C C Content page

27. Rekabentuk Antaramuka (samb…) • Capaian secara terus: kedalaman minima M M M M M M M C C C

28. Rekabentuk Antaramuka (samb…) • Capaian secara terus: • Pertindihan minima- elakkan membina pelbagai laluan ke tempat sama dari satu skrin bagi mengelakkan kekeliruan. • Masa muat turun (download time) • Mana lebih penting: Elemen Hiasan atau isi kandungan? • Fikirkan dari aspek muat turun (downloading). • Kajian dibuat: masa menunggu yang boleh diterima- 10 saat.

29. Rekabentuk Antaramuka (samb…) • Rekabentuk yang stabil dan diyakini. • Pastikan semua elemen, media & pautan berfungsi seperti yang dirancang. • Sediakan peluang pengguna memberi maklumbalas. • Mampu berdiri sendiri • Tajuk helaian yang informatif. • Identiti pembangun laman web. • Tarikh dibangun atau dikemaskini. • Alamat atau URL halaman web utama. • Ada satu pautan ke helaian utama

30. Tips.. • Sebelum merekabentuk laman web, kenalpasti: • Konsep • Perisian • Isi kandungan • Rekabentuk- Cara untuk membina • Perlaksanaan- Cara untuk muat naik (upload) • Perisian: • Isi kandungan (content) • Grafik • Pengaturcaraan (programming) • Perangkaian data (data networking) • Plug-in

31. Tips.. (samb…) • Isi kandungan (content) • Microsoft Frontpage • Macromedia Dreamweaver • Adobe GoAlive • Editor Notepad • Pengaturcaraan (Programming) • Java • Active X • Perl • ASP • JSP • PHP

32. Tips.. (samb…) • Multimedia • Grafik- Adobe Photoshop, Fireworks. • Animasi- Flash, GIF Animator. • Audio/ Video- Real Audio, Adobe Premier. • Realiti Maya (VR)- 3D Maker, Virtus 3D website builder. • Plug-in • Flash • Shockwave • Animation • XML • ASP

33. Tips.. (samb…) • Gambar/ imej: • Disimpan dalam format jpg atau gif • Nama gambar sehingga 8 abjad. • Tulisan: • Tulisan yang popular • Tahoma • Arial • Verdana • Times New Roman- kurang menarik

34. Sekian. Terima kasih..