3.6 Perancangan Tampilan
3.6.1 Tampilan Intro
Tampilan intro adalah tampilan awal sebelum masuk ke menu utama dari aplikasi ini. Tampilan intro pada aplikasi ini berupa teks yang kemudian diikuti oleh gelembung-
gelembung transparan. Apabila intro telah elesai maka akan masuk ke menu utama dari aplikasi ini.
PENGAJARAN BERBANTUAN KOMPUTER TUMBUHAN BIJI
Gambar 3.17 Kerangka Tampilan Intro
Universitas Sumatera Utara
3.6.2 Menu Home
Tampilan menu home pada perangkat lunak pengajaran ini menyerupai halaman situs web internet sehingga diharapkan nantinya perangkat lunak pengajaran ini dapat
langsung diaplikasikan sebagai bentuk pembelajaran jarak jauh e-learning yang mampu berinteraksi dengan pengguna di mana pun user berada.
Tampilan menu home dirancang dengan fitur-fitur yang menarik dengan efek- efek warna dan pencahayaan ditambah lagi dengan animasi-animasi yang
memudahkan pengguna dalam pengoperasiannya user friendly.
Perancangan tampilan menu home pada perangkat lunak pengajaran ini dibagi menjadi tiga bagian yaitu header, left, dan isi halaman. Header adalah bagian dari
halaman yang terletak pada sisi sebelah atas yang biasanya berisi, judul, ataupun gambar, bagian left adalah bagian sebelah kiri yang merupakan tempat tombol
navigasi, sedangkan bagian isi halaman adalah bagian yang terpenting dalam menampilkan informasi yang ingin disampaikan, pada bagian ini yang harus
diperhatikan adalah tata letak bagian isi.
Universitas Sumatera Utara
1
2 3
4 5
6 1. judul
2. menu home 3. menu materi
4. menu tes 5. menu tentang saya
6. halaman isi 7. tombol sound
8. tombol close 8
7
Gambar 3.18 Kerangka Tampilan Menu Home
3.6.3 Menu Materi
Tampilan menu materi dirancang tidak jauh beda dengan menu home. Perancangan tampilan menu materi pada perangkat lunak pengajaran ini dibagi menjadi sembilan
bagian yaitu judul, halaman isi materi tombol submateri, tombol navigasi back dan next, tombol sound, home, dan close.
Universitas Sumatera Utara
1. judul 2. halaman isi materi
3. tombol submateri 4. tombol submateri
5. tombol navigasi back 6. tombol navigasi next
7. tombol sound 8. tombol home
9. tombol close 9
7 8
5 6
2
3 4
1
Gambar 3.19 Kerangka Tampilan Awal Menu Materi
Universitas Sumatera Utara
1. judul 2. isi halaman
3. tombol navigasi back 4. tombol navigasi next
5. tombol sound 6. tombol home
7. tombol close 7
5 6
1
2
3 4
Gambar 3.20 Kerangka Tampilan Materi Gymnospermae
Universitas Sumatera Utara
1. halaman isi materi 2. tombol submateri
3. tombol submateri 4. tombol navigasi back
5. tombol navigasi next 6. tombol sound
7. tombol home 8. tombol close
8
6 7
4 5
1
2 3
Gambar 3.21 Kerangka Tampilan Materi Angiospermae
Universitas Sumatera Utara
1. judul 2. isi halaman
3. tombol navigasi back 4. tombol navigasi next
5. tombol sound 6. tombol home
7. tombol close 7
5 6
1
2
3 4
Gambar 3.22 Kerangka Tampilan Materi Monokotil
Universitas Sumatera Utara
1. judul 2. isi halaman
3. tombol navigasi back 4. tombol navigasi next
5. tombol sound 6. tombol home
7. tombol close 7
5 6
1
2
3 4
Gambar 3.23 Kerangka Tampilan Materi Dikotil
3.6.4 Menu Tes
Kategori