Tujuan dan ruang lingkup
Jobsheet 4 berfokus pada wireframe, hierarki visual, dan tampilan yang dapat menyesuaikan layar. Struktur SIMPUS-Mini tetap mengarahkan pengguna dari beranda ke daftar serta form buku/anggota.
Tema tampilan CSS selaras dengan js sebelumnya.
Peta berkas
index.html— beranda dan navigasi SIMPUS-Mini.buku/list.html— daftar buku.buku/tambah.html— form buku.anggota/list.html— daftar anggota.anggota/tambah.html— form anggota.assets/style.css— layout, komponen, breakpoint, dan tema yang diterapkan.docs/wireframe.md— dokumen wireframe/desain praktikum.
Wireframe dan hirarki visual
Wireframe membantu menetapkan urutan informasi sebelum detail warna. Header memperkenalkan aplikasi dan memberi navigasi; bagian pembuka menjelaskan tujuan halaman; ringkasan memprioritaskan angka utama; tabel/form menampilkan tugas inti; footer menutup halaman. Ukuran heading, kontras, posisi, dan ruang kosong membantu pengguna memindai konten.
Layout CSS menggunakan teknik alur fleksibel dan aturan breakpoint. Desktop menyediakan beberapa kolom, sedangkan layar kecil mengalihkan kartu ke susunan yang lebih sempit, menampilkan menu ringkas, dan mempertahankan akses tabel melalui scroll horizontal.
Tema hasil pembaruan
Permukaan krem/putih, aksen rose, border lembut, radius kartu, dan bayangan ringan diterapkan ke selektor CSS yang sudah ada. Header, navigasi, panel konten, statistik, tabel, form, tombol, dan footer tetap memakai struktur Jobsheet 4. Menu responsif checkbox tetap menggunakan pola .nav-toggle:checked ~ nav.
Dengan demikian wireframe dan susunan konten tidak diganti; yang diselaraskan adalah presentasi visual CSS.
Langkah uji
- Buka halaman beranda, daftar, dan form melalui navigasi.
- Ubah lebar viewport dari desktop ke sekitar breakpoint tablet dan ponsel.
- Tekan kontrol hamburger dan pastikan menu muncul; pilih tautan untuk menguji navigasi.
- Pastikan tabel tetap dapat digulir dan tombol/form tidak saling bertumpuk.
Proyek ini berfokus pada wireframe dan presentasi. Jangan mengasumsikan data formulir akan tersimpan tanpa backend.