PERANCANGAN APLIKASI
3.3 Pembuatan Storyboard
Storyboard merupakan uraian yang berisi visual dan audio penjelasan dari
masing-masing alur dalam flowchart. Satu kolom dalam storyboard mewakili satu tampilan di layar monitor. Dengan demikian, biasanya storyboard cukup banyak hingga berlembar-lembar.
Fungsi dari storyboard antara lain:
a. Memperjelas flowchart.
b. Pedoman bagi animator, programmer, dan narrator. c. Sebagai dokumen tertulis.
d. Bahan pembuatan buku manual.
Tabel 3.1 Storyboard Perancangan Aplikasi PBK Sistem Reproduksi Manusia Untuk Tingkat SMA
No Rancangan Visual Audio
1 Menu Utama Lihat pada Gambar 3.7 Rancangan Tampilan Menu Utama
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Menu Utama : (bagian kiri)
Gambar : Home (tombol bentuk bulat warna merah) Gambar : Kompetensi (tombol biru)
Gambar : Materi (tombol kuning) Gambar : Latihan (tombol ungu)
Gambar : Exit (tombol bentuk bulat warna hijau)
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual
Tombol Navigasi : (pada bagian kiri) 1. Pilihlah menu yang tersedia.
- Klik Home untuk melihat Menu Home (tombol bulat warna merah)
- Klik Kompetensi (tombol bulat warna biru) - Klik Materi (tombol bulat warna kuning)
- Klik Latihan untuk memulai latihan (tombol bulat warna ungu)
- Klik Exit (tombol bulat warna hijau) 2. Sound On
Untuk tidak mengaktifkan suara
Audio 2 Menu Home Lihat pada Gambar 3.8 Rancangan Tampilan Menu Home
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Teks : (pada bagian kanan) HOME
isi
Tombol Navigasi : (pada bagian kiri) - Home (tombol bulat warna merah) - Kompetensi (tombol bulat warna biru) - Materi (tombol bulat warna kuning) - Latihan (tombol bulat warna ungu) - Exit (tombol bulat warna hijau) - Sound On
Untuk tidak mengaktifkan suara
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Animasi :
- Hujan bintang berwarna putih
- Judul berganti warna (merah, kuning, merah muda, putih)
- Tombol navigasi memberikan efek kilat ketika disentuh Audio 3 Menu Kompetensi Lihat pada Gambar 3.9 Rancangan Tampilan Menu Kompetensi
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Teks : (pada bagian kanan) Kompetensi Tujuan :
Isi
Sasaran yang Ingin Dicapai : Isi
Tombol navigasi : (pada bagian kiri) - Home (tombol bulat warna merah) - Kompetensi (tombol bulat warna biru) - Materi (tombol bulat warna kuning) - Latihan (tombol bulat warna ungu)
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual - Exit (tombol bulat warna hijau) - Sound On
- Untuk tidak mengaktifkan suara
Animasi :
- Hujan bintang berwarna putih
- Judul berganti warna (merah, kuning, merah muda, putih)
- Tombol navigasi memberikan efek kilat ketika disentuh Audio 4 Menu Materi Lihat pada Gambar 3.10 Rancangan Tampilan Menu Materi
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul : Materi
Teks :
- Materi (berwarna putih, terletak di bawah tengah Judul)
Tombol navigasi : (berwarna biru, berbentuk oval, dengan tulisan berwarna putih)
- Definisi Sestem Reproduksi - Organ Reproduksi Manusia - Gametogenesis - Hormon Reproduksi Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Animasi :
- Judul berganti warna (merah, kuning, merah muda, putih)
- Gelembuang air menuju ke atas - Bintang terjun
- Ketika tombol navigasi disentuh, maka akan bercahaya Audio 5 Uraian Materi Bagian I : Definisi Sistem Reproduksi Lihat pada Gambar 3.11 Rancangan Tampilan Penyajian Isi Materi Definisi Sistem Reproduksi
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul Materi:
Definisi Sistem Reproduksi (sebelah kiri di bawah sub judul materi)
Teks : (Di bagian tengah di bawah sub judul materi, berwarna biru)
Definisi Sistem Reproduksi Manusia Isi
Animasi :
- Judul berganti warna (merah, kuning, merah muda, putih)
- Gelembuang air menuju ke atas - Bintang terjun
- Ketika tombol navigasi disentuh, maka akan bercahaya Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Tombol navigasi :
1. (berwarna biru, berbentuk oval, dengan tulisan berwarna putih)
- Definisi Sestem Reproduksi - Organ Reproduksi Manusia - Gametogenesis
- Hormon Reproduksi
2. (berwarna putih, berbentuk rumah, di sebelah kiri bawah)
- Kembali ke tampilan utama 3. Sound On
Untuk tidak mengaktifkan suara
Audio 6 Uraian Materi Bagian II : Organ Reproduksi Manusia Lihat pada Gambar 3.12 Rancangan Tampilan Penyajian Isi Materi Organ Reproduksi Manusia
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul Materi: Organ Reproduksi
Teks :
- Materi (berwarna putih berada di bawah judul) Organ Reproduksi (berwarna putih berada di sisikanan)
Animasi :
- Judul berganti warna (merah, kuning, merah muda, putih)
- Gelembuang air menuju ke atas - Bintang terjun Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual
Ketika tombol navigasi disentuh, maka akan bercahaya
Tombol Navigasi :
1. (berwarna biru, berbentuk oval, dengan tulisan berwarna putih)
- Definisi Sestem Reproduksi - Organ Reproduksi Manusia - Gametogenesis
- Hormon Reproduksi
2. (berwarna putih, berbentuk rumah, di sebelah kanan bawah)
- Kembali ke tampilan utama
3. Pria (Untuk menuju ke organ reproduksi pria, berwarna hijau)
4. Wanita (Untuk menuju ke organ reproduksi wanita, berwarna hijau)
Audio 7 Uraian Materi Bagian III : Gametogenesis Lihat pada Gambar 3.13 Rancangan Tampilan Penyajian Isi Materi Gametogenesis
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul Materi: Gametogenesis
Teks :
- Gametogenesis (berwarna biru)
- Definisi Gametogenensis (berwarna merah) - Isi (berwana coklat dan hitam)
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Animasi :
- Judul berganti warna (merah, kuning, merah muda, putih)
- Gelembung air menuju ke atas - Bintang terjun
- Ketika tombol navigasi disentuh, maka akan bercahaya
Tombol Navigasi :
1. (berwarna biru, berbentuk oval, dengan tulisan berwarna putih)
- Definisi Sestem Reproduksi - Organ Reproduksi Manusia - Gametogenesis
- Hormon Reproduksi
2. (berwarna putih, berbentuk rumah, di sebelah kiri bawah)
- Kembali ke tampilan utama
3. Definisi Gametogenesisi (berbentuk persegi panjang, berwarna biru)
4. Spermatogenesis (berbentuk persegi panjang, berwarna biru)
5. Oogenesis (berbentuk persegi panjang, berwarna biru)
No Rancangan Visual Audio 8 Uraian Materi Bagian IV: Hormon Reproduksi Lihat Gambar 3.14 Rancangan Tampilan Penyajian Isi Materi Hormon Reproduksi
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul Materi: Hormon Reproduksi
Tombol navigasi :
1. (berwarna biru, berbentuk oval, dengan tulisan berwarna putih)
- Definisi Sestem Reproduksi - Organ Reproduksi Manusia - Gametogenesis
- Hormon Reproduksi
2. (berwarna putih, berbentuk rumah, di sebelah kiri bawah)
- Kembali ke tampilan utama
3. (terletak di kanan bawah. berwarna hijau, berbentuk bulat dengan tanda panah kanan) - Menuju teks selanjutnya pada bagian
Hormon Reproduksi
Teks:
- Hormon Reproduksi (berwarna biru, berada di tengah bawah sub judul)
- Hormon yang Mempengaruhi Spermatogenesis (berwarna merah)
- Isi (berwarna hitam dan coklat)
Sound Effect muncul ketika meng-klik tombol
No Rancangan Visual Animasi:
- Judul berganti warna (merah, kuning, merah muda, putih)
- Gelembung air menuju ke atas - Bintang terjun
- Ketika tombol navigasi disentuh, maka akan bercahaya Audio 9 Menu Latihan Lihat pada Gambar 3.15 Rancangan Tampilan Penyampaian Menu Materi
Judul : Aplikasi Pengajaran Berbantuan Komputer Sistem Reproduksi Manusia Untuk Tingkat SMA (warna merah, kuning, merah muda, putih)
Sub Judul: Latihan
Teks :
- Latihan (berwarna putih, berada di tengah bawah judul)
- Masukkan Nama Anda di Sini
- Apakah anda telah siap mengikuti latihan ini?
Tombol navigasi :
- Yes (berwarna Orange)
Untuk melanjutkan ke bagian soal-soal latihan - No (berwarna ungu)
Untuk kembali ke tampilan utama - Sound On
Untuk tidak mengaktifkan suara
Sound Effect muncul ketika meng-klik tombol