A site outline is a detailed written structure or list describing the content and sections of each page.
A site map is a visual or structured diagram that shows the layout of all the pages in a website.
Focuses on navigation flow
Shows how pages connect to each other
Cadangkan UI satu halaman web/sistem yang mempunyai antaramuka berikut:
landing page (laman utama sistem/website)
borang daftar pengguna
log masuk
borang menambah data
laporan senarai rekod
kemaskini dan padam rekod
Contoh 1: Site Outline
Website Produk ABC
Home (index.html)
Products (produk.html)
Product 1 (sayur.html)
Product 2 (ikan.html)
About Us Company (about.html)
Support (support.html)
Blog (blog.html)
Outline Planning
Header (banner) - image
Menu (horizontal style) - blue color
Content (light cream)
Footer (bottom - copyright@ABC 2025) - dark color
Berdasarkan aktiviti 1, tetapkan nama fail projek.
landing page (laman utama sistem/website) - index.html
borang daftar pengguna - daftar.html
log masuk - login.html
borang menambah data - tambahdata.html
laporan senarai rekod - papardata.html
kemaskini rekod - kemaskini.html
padam rekod - deletedata,html
Bina site map seperti berikut bagi memudahkan perancangan projek anda.
Contoh 1: Site Map Website Promosi Produk
Contoh 2: Site Map Log Masuk ke Sistem
Layari https://moqups.com/ atau gunakan mana-mana perisian untuk melakar framework/layout cadangan projek anda berdasarkan aktiviti 1 dan aktiviti 2.
Anda boleh menggunakan low / medium / high fidelity UI to sketch your design.
Cipta projek baru dan lakar mengikut Site Map yang dicadangkan.
Contoh Sketches: Landing Page
Aktiviti ini dicadangkan disiapkan dalam masa 2 jam sebelum memulakan coding pertama anda. Selamat maju jaya!