M17: LAMAN WEB INTERAKTIF: AKTIVITI MEMBINA NOTA DAN LATIHAN 1 PdPR 20 MEI 2021

3.3.1 Prinsip Reka Bentuk Laman Web (MS 274)

Prinsip merujuk asas yang menjadi dasar kepada perkembangan atau pembinaan sesuatu benda. 

Reka bentuk pula merujuk susunan atau struktur dalam proses pembinaan sesuatu perkara. 

Oleh sebab itu, mereka bentuk laman web boleh diibaratkan seperti proses merancang, membina dan mengubah suai serta menata hias kediaman rumah. Setiap ruang yang dibina dalam kediaman memainkan fungsi yang berlainan. Lantaran itu, struktur pembinaan dan corak tatahias bagi setiap ruang juga akan berbeza mengikut kesesuaian fungsinya. Konsep, saiz dan kedudukan setiap ruang kediaman seperti ruang tamu, dapur dan juga bilik tidur akan ditentukan terlebih dahulu semasa fasa perancangan mengikut jenis kediaman yang dibina seperti banglo, kondominum atau rumah teres.


Dalam proses mereka bentuk laman web, terdapat beberapa prinsip atau elemen reka bentuk laman web yang perlu diberi perhatian agar laman web yang dibina tidak kelihatan pelik atau memberikan pengalaman yang tidak menyenangkan kepada pengguna. 

Hal ini dikatakan demikian  kerana elemen-elemen tersebut mampu memberikan pengalaman yang berbeza dan mempengaruhi kepuasan pengguna untuk melayari laman web yang dibina.


Antara prinsip asas yang harus diambil kira semasa mereka bentuk laman web adalah seperti yang ditunjukkan dalam Rajah 3.3.2.

Jenis Persekitaran Web yang Dibina 

Sebelum sesuatu laman web dibina, kita harus memahami persekitaran laman web tersebut. Persekitaran laman web ini merangkumi beberapa faktor teknikal seperti yang berikut: 

• Kesesuaian penggunaan pelbagai jenis pelayar 
• Kelajuan capaian Internet 
• Keperluan perisian sokongan untuk paparan 
• Kepelbagaian sistem komputer dan peranti mudah alih yang digunakan oleh pengguna 
• Kepelbagaian saiz paparan monitor yang digunakan 

Penekanan Maklumat dalam Web 

Prinsip penekanan merujuk maklumat atau kandungan yang ingin diberikan perhatian dalam laman web tersebut. 

Dalam setiap laman web yang dibina, pereka web perlu menentukan maklumat atau kandungan penting yang harus diberi penekanan dan teknik atau kaedah yang sesuai yang perlu digunakan untuk menarik perhatian pengguna laman web. 

Terdapat beberapa cara yang boleh digunakan untuk menarik perhatian pengguna. Antara caranya adalah seperti yang berikut: 

• Penggunaan kesan khas seperti drop shadow, tekstur atau cahaya dan bentuk. 
• Penggunaan ruang putih untuk menjadikan elemen-elemen kelihatan lebih terserlah 
• 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. Semakin besar perbezaan suatu elemen yang ingin ditonjolkan berbanding dengan elemen lain di persekitarannya, maka elemen tersebut akan kelihatan lebih berbeza. 

Penggunaan konsep perbezaan ini juga mampu menghasilkan sistem navigasi yang lebih mudah dan dapat memandu pelawat untuk mencapai maklumat yang dikehendaki atau mengarah mereka ke tempat yang  ingin ditujui. Antara kaedah perbezaan yang boleh digunakan adalah yang seperti berikut:

• Penggunaan label dan pautan yang berbeza. 
• Penggunaan border, warna yang berbeza dan juga kesan khas. 
• Penggunaan ruang putih, teks terbalik, teks berhuruf condong (italic) dan saiz teks yang berbeza. 
• Penggunaan prinsip perbezaan warna dalam memberikelainan
• pada butang login 

Typography 

Prinsip typography merujuk penyusunan teks yang dipaparkan dalam laman web. Penyusunan teks yang baik memudahkan pemahaman dalam proses pembacaan dan juga meningkatkan elemen mesra pengguna dalam laman web. 

Penggunaan grafik dan teks yang saling melengkapi mampu membentuk imej dalam minda pembaca. Selain itu, typography juga mampu menyampaikan mesej atau idea pereka web yang mungkin bersifat profesional kepada pembacanya dengan lebih baik. 

Terdapat beberapa corak penyusunan teks bagi laman web. Corak penyusunan ini boleh digunakan mengikut gaya pembacaan pengguna. Corak penyusunan teks lain yang mengikut gaya pembacaan pengguna adalah seperti yang berikut: 

• Corak paparan berasaskan kertas 
• Corak paparan secara Z-shaped 
• Corak paparan secara F-shaped

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. 

Penggunaan warna latar belakang dan teks yang senada mampu memberikan pengalaman yang kurang menyenangkan dalam kalangan pengguna. Hal ini dikatakan demikian kerana keadaan ini menyukarkan proses pembacaan mereka. 

Penggunaan warna yang agak berwarnawarni juga mampu membuatkan pembaca berasa serabut dan kehilangan fokus.

Navigasi 

Navigasi merujuk 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 web yang bagus seharusnya memberikan petunjuk kepada pelawat laman web tentang kedudukan atau lokasi semasa pengguna. 

Pereka web biasanya akan menggunakan pelbagai teknik navigasi dalam laman web mereka mengikut kesesuaian. Antaranya adalah seperti yang berikut: 

• Bar navigasi
• Breadcrumbs
• Site map 
• Menu Drop-down
• Pautan menggunakan grafik

Keseimbangan Visual 

Keseimbangan visual pula merujuk gabungan elemen visual seperti garisan, imej, teks, bentuk, dan warna dalam laman web. Bagi menentukan corak gabungan semua elemen visual tersebut, pereka web juga perlu peka tentang pengguna sasaran laman web tersebut. 

Sebagai contoh, sekiranya laman web tersebut dibina untuk golongan kanak-kanak, elemen teks yang banyak perlu dielakkan kerana kanak-kanak tidak cenderung untuk membaca. Sebaliknya penggunaan unsur grafik dan imej mesti dilebihkan kerana elemen tersebut mampu menarik minat mereka untuk terus melayari laman web

Aktiviti Nota

Salin semula peta i-think dalam rajah 3.3.2 di atas dan kembangkan setiap prinsip dengan memberikan contoh 

Latihan (Sila klik)