rekabentuk storyboard wireframe

LnP 02.01 : Rekabentuk Storyboard dan Antara Muka Laman Web

LA 02 : REKABENTUK SISTEM BERASASKAN WEB

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.

PROSES PERANCANGAN STORYBOARD1. 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.

CONTOH STORYBOARD

CONTOH STORYBOARD

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

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.

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

website.

SITEMAP