SPM4342 PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB PRINSIP ASAS MEREKA BENTUK WEB

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TERIMA KASIH