3.2 Flowchart
FlowChart Bagan Alir Program adalah suatu bagan yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dari awal sampai akhir. Berikut adalah beberapa
simbol yang digunakan dalam menggambar suatu flowchart :
Berikut ini flowchart dari Aplikasi PBK Sistem Reproduksi Manusia untuk Pelajaran Tingkat SMA dapat dilihat pada gambar 3.6.
Universitas Sumatera Utara
Start Tampilan Awal
Home Kompetensi
Materi Latihan
Exit Case
Home Kompetensi
Materi Latihan
Exit Tampilan
Home Tampilan
Kompetensi Soal-soal
Latihan Stop
- Definisi sistem Reproduksi - Organ Reproduksi
- Gametogenesis - Hormon Reproduksi
Case
Defenisi Sistem Reproduksi
Organ Reproduksi Gametogenesis
Hormon Reproduksi
Pria Wanita
Defenisi Gametogenesis Spermatogenesis
Oogenesis
Case Case
Materi Organ Reproduksi
Manusia Materi Organ
Reproduksi Wanita Materi Definisi
Gametogenesis Materi
Spermatogenesis Materi Oogenesis
Gambar 3.6 Flowchart Aplikasi PBK Sistem Reproduksi Manusia Untuk Pelajaran Tingkat SMA
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Audio
Universitas Sumatera Utara
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
Universitas Sumatera Utara
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
Universitas Sumatera Utara
3.4 Perancangan Tampilan