SPM4342 PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB PRINSIP ASAS MEREKA BENTUK WEB

Transcription

1 SPM4342 PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB PRINSIP ASAS MEREKA BENTUK WEB PM. Dr. Jamalludin Harun Norah Md Noor Norasykin Mohd Zaid Department of Educational Multimedia Faculty of Education, UTM

2 PRINSIP MEREKA BENTUK WEB Setiap laman web tidak sempurna dan mempunyai kecacatan, sama ada : Ia mengelirukan Reka bentuk yang terlalu rumit Poor download time

3 PRINSIP MEREKA BENTUK WEB Reka bentuk bagi medium Reka bentuk bagi keseluruhan laman web Reka bentuk bagi pengguna Reka bentuk bagi paparan/skrin

4 REKA BENTUK BAGI MEDIUM Apabila mereka bentuk laman web, ingat : Tujuannya adalah untuk komputer, bukan pada cetakan. Bahasanyaadalahhypertext, bukan linear text Laman web adalah khas kepada skrin komputer Perlu menitik beratkan tentang layout, warna dan font dan juga bagaimana ia akan dipaparkan.

5 REKA BENTUK BAGI MEDIUM Rupa dan rasa Antaramuka adalah rupa dan rasa kepada sesebuah laman web Pengguna membaca, menekan link, melihat grafik bergantung kepada kebebasan reka bentuk

6 REKA BENTUK BAGI MEDIUM Pastikan rekaan anda portable Mudah untuk diakses daripada pelbagai web browser dan juga pelbagai platform komputer Jangan hanya membuat percubaan sekali sahaja dan menganggap semua laman web sama

7 REKA BENTUK BAGI MEDIUM Paparan yang jelasdanmudah untukmengakses maklumat Menyediakan link terus ke area yang mempunyai banyak akses Maklumat yang mudah dibaca Pecahkan teks kepada beberapa segmen Perbanyakkan headings mudah mencari maklumat dengan cepat Kawal Panjang horizontal, mudahuntukbaca kolum

8 REKA BENTUK BAGI KESELURUHAN LAMAN WEB Mencipta transisi yang lancer Menyatukan seksyen yang terdapat dalam paparan laman web Mencipta transisi yang lancer daripada satu paparan ke satu paparan yang lain

9 REKA BENTUK BAGI KESELURUHAN LAMAN WEB Menggunakan konsep grid dalam memberikan struktur visual Untuk mengurus paparan ke dalam kolum dan baris Menggunakan table elemnts untuk membina grid pada paparan walaupun table untuk tabular data digunakan untuk struktur grid berkolum Reka bentuk web yang baik menggunakan table untuk memberikan konsistensi kepada struktur web

10 REKA BENTUK BAGI KESELURUHAN LAMAN WEB Penggunaan ruang putih yang aktif Ruang putih adalah ruang kosong pada paparan web Ruang putih yang digunakan secara berhemah dipanggil ruang putih aktif Ruang putih pasif adalah ruang kosong yang menjadi border pada skrin

11 REKA BENTUK BAGI PENGGUNA Tahu siapa audiens atau pengguna Tahu apa pengguna mahu daripada laman web anda

12 REKA BENTUK BAGI PENGGUNA Reka bentuk interaksi Bagaimana pengguna berinteraksi dengan maklumat dalam laman web jenis isi sama ada pengguna akan baca atau hanya scan maklumat Scan maklumat Scrol jika perlu Pastikan grafik di hyperlink Mengetik teks yang berlink

13 REKA BENTUK BAGI PENGGUNA Reka bentuk lokasi Sukar untuk menjangka laluan tumpuan pengguna Secara amnya, maklumat di bawah menggambarkan skrin real estate mengikut aturan kepentingannya

14 REKA BENTUK BAGI PENGGUNA Panduan kepada mata pengguna Habit membaca yang biasa, pengguna akan mengalihkan mata dari kiri ke kanan berulang kali

15 REKA BENTUK BAGI PENGGUNA Panduan kepada mata pengguna Sebaliknya, apabila melihat paparan landscapebased, pengguna scan maklumat secara mengikut arah jam

16 REKA BENTUK BAGI PENGGUNA Pastikan hierarki yang flat Elakkan pengguna meneroka maklumat yang mereka mahu dengan banyak lapisan di dalam laman web Struktur laman web mengandungi navigasi seksyen atau topik untuk memudahkan pengguna Bar navigasi yang standard : Kedudukan yang konsisten di setiap page dan memastikan pengguna tidak hilang arah

17 REKA BENTUK BAGI PENGGUNA Penggunaan hypertext linking Optimumkan maklumat di dalam paparan

18 REKA BENTUK BAGI SKRIN Bentuk skrin computer Reka bentuk paparan yang memberikan kontras mencukupi Skrin Komputer menggunakan resolusi yang rendah daripada printed page Skrin bukan page

19 TERIMA KASIH