Dokumen tersebut memberikan penjelasan tentang storyboard dan proses perancangannya untuk merekabentuk antarmuka laman web. Ia mendefinisikan storyboard sebagai alat komunikasi visual, menjelaskan tahapan perancangannya seperti pengumpulan data dan analisis, serta memberikan contoh storyboard dan elemen-elemennya. Dokumen tersebut juga menjelaskan konsep wireframe dan sitemap yang penting dalam merancang struktur laman web.

1. LnP 02.01 : Rekabentuk Storyboard dan Antara Muka Laman Web
LA 02 : REKABENTUK SISTEM BERASASKAN
WEB

2. APA ITU STORYBOARD?
• Konsep komunikasi dan ungkapan kreatif, teknik
dan media untuk menyampaikan maklumat
secara visual termasuk audio dengan mengolah
elemen rekabentuk grafik berupa bentuk dan
gambar, huruf dan warna serta tataletaknya
sehingga diterima oleh sasarannya.

3. PROSES PERANCANGAN STORYBOARD
1. Pengumpulan data
• Data berbentuk bertulis (verbal) dan data gambar (visual), audio dan laian-lain data
yang diperolehi.
2. Menganalisa data
• Data yang diperolehi di klasifikasikan/dianalisa untuk penyusunan tataletak yang
bersesuaian.
3. Proses perlaksanaan
• Setelah data dianalisa, proses perlaksaan iaitu proses merekabentuk akan
dilaksanakan.
• Contoh: Rekabentuk banner, menu , footer, kandungan web, ikon-ikon serta
keseluruhan rekabentuk laman web.

4. CONTOH STORYBOARD

5. CONTOH STORYBOARD

6. ELEMEN WIDTH HEIGHT
WRAPPER 800 px auto
HEADER 800 px 130 px
CONTENT 450 px 400 px
FOOTER 800 px 30 px
LEFT MENU 160 px 200 px
RIGHT MENU 160 px 200 px
ELEMEN SUSUNATUR LAMAN WEB

7. KONSEP WIREFRAME
• Langkah pertama / awal di dalam proses rekabentuk.
• WIREFRAME = ilustrasi dasar dari struktur / komponen dari sesebuah laman web.
• Boleh dilakar secara simple sehingga detail dengan menggunakan software tertentu.
• Apa yang perlu ada ?
• Menjelaskan apa yang ingin dimasukkan di SETIAP HALAMAN WEBSITE.
• Header, Footer, Content, Sidebar dll.
• Elemen tambahan (jika ada ) – carian, navigasi dll.

8. SITEMAP
• Dikenali sebagai PETA HALAMAN untuk semua isi kandungan yang terkandung di dalam
website.

9. SITEMAP