PERANCANGAN SISTEM
3.4 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.
Tabel 3.3 Storyboard Perancangan Aplikasi Pengajaran Berbantuan Komputer Mata Pelajaran Bahasa Inggris Studi Kasus Tenses
No Rancangan Visual Audio
1 Menu Intro : Lihat pada Gambar 3.32 Rancangan Tampilan Intro
Judul : Pengajaran Berbantuan Komputer Tenses (warna putih di bagian tengah stage)
Tampilan intro ini berisi judul PBK yaitu “Pengajaran Berbantuan Komputer Tenses”
Animasi : teks muncul dalam keadaan berputar dari ukuran kecil ke ukuran besar hingga berhenti kemudian akan masuk ke menu utama program
Sound Effect muncul ketika program di buka 2 Menu Utama : Lihat pada Gambar 3.33 Rancangan Tampilan Menu Utama halaman 1
1. Isi menu home : Teks berwarna putih berada di tengah stage
Secara sederhana, tense berarti bentuk kata kerja yang menunjukkan waktu dari suatu tindakan atau kegiatan.
Kata kerja itu dapat memberi tahu kepada kita: a. Bahwa suatu tindakan atau kegiatan dilakukan
Sound Effect muncul ketika program di buka
pada waktu sekarang
b. Bahwa suatu tindakan atau kegiatan dilakukan pada waktu lampau
c. Bahwa suatu tindakan atau kegiatan dilakukan pada waktu yang akan datang
2. Tombol menu home : berupa teks dengan warna hitam dan background berwarna putih, apabila kursor mengarah ke teks maka background teks akan berubah menjadi warna cokelat. Klik tombol home untuk melihat isi halaman home.
3. Tombol menu materi : berupa teks dengan warna hitam dan background berwarna putih, apabila kursor mengarah ke teks maka
background teks akan berubah menjadi warna
cokelat. Klik tombol materi untuk melihat isi pembahasan materi. Anda dapat memilih untuk memulai dari menu dan topik yang mana saja.
4. Tombol menu latihan : berupa teks dengan warna hitam dan background berwarna putih, apabila kursor mengarah ke teks maka
background teks akan berubah menjadi warna
cokelat.
warna hitam dan background berwarna putih, apabila kursor mengarah ke teks maka
background teks akan berubah menjadi warna
cokelat. Klik tombol tentang saya untuk melihat isi halaman tentang saya.
6. Gambar tumpukan buku
7. Tombol navigasi next : berwarna hijau, bentuk bulat. Klik untuk ke halaman selanjutnya yaitu lanjutan pembahasan pengenalan tenses (bawah kanan halaman isi).
8. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
9. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi. 3 Menu Materi: Lihat pada Gambar 3.34 Rancangan Tampilan Menu Materi
1. Gambar orang sedang membaca buku
2. Tombol menu present tense : Teks berwarna hitam, klik untuk melihat semua pembahasan
present tense.
3. Tombol menu past tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past tense.
Sound Effect muncul ketika program di buka
4. Tombol menu future tense : Teks berwarna hitam, klik untuk melihat semua pembahasan
future tense.
5. Tombol menu past future : Teks berwarna hitam, klik untuk melihat semua pembahasan
past future.
6. Gambar pensil
7. Gambar buku
8. Tombol navigasi back : berwarna hijau, bentuk bulat. Klik untuk kembali ke halaman home (bawah kanan halaman isi).
9. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
10. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi. 4 Menu Materi
1: Present
Tense
1. Halaman isi simple present tense
simple present tense
Sound Effect
Lihat pada Gambar 3.35 Rancangan Tampilan Isi Present Tense Rumus : I/we/you/they + Verb 1 He/she/it + Verb 1 + s
2. Tombol menu simple present tense : Teks berwarna hitam, klik untuk melihat semua pembahasan simple present tense.
3. Tombol menu present continuous tense : Teks berwarna hitam, klik untuk melihat semua pembahasan present continuous tense.
4. Tombol menu present perfect tense : Teks berwarna hitam, klik untuk melihat semua pembahasan present perfect tense.
5. Tombol menu present perfect Continuous Tense : Teks berwarna hitam, klik untuk melihat semua pembahasan present perfect continuous tense.
6. Gambar Pensil
7. Tombol kembali ke pilihan materi : Gambar rumah berwarna putih. Klik untuk kembali ke
ketika program di buka
pilihan menu materi (bawah kiri halaman isi).
8. Tombol navigasi next : berwarna hijau, bentuk bulat. Klik untuk ke halaman berikutnya (bawah kanan halaman isi, di samping tombol kembali ke pilihan materi).
9. Tombol navigasi back : berwarna hijau, bentuk bulat. Klik untuk kembali ke halaman sebelumnya (bawah kanan halaman isi, di samping tombol navigasi next).
10.Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
11. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi. 5 Menu Materi 1: Past Tense Lihat pada Gambar 3.36 Rancangan Tampilan Isi
1. Halaman isi past tense
simple past tense
Rumus : S + Verb 2
2. Tombol menu simple past tense : Teks berwarna hitam, klik untuk melihat semua pembahasan
Sound Effect muncul ketika program di buka
Past Tense simple past tense.
3. Tombol menu past continuous tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past continuous tense.
4. Tombol menu past perfect tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past perfect tense.
5. Tombol menu past perfect continuous tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past perfect continuous tense.
6. Gambar Pensil
7. Tombol kembali ke pilihan materi : Gambar rumah berwarna putih. Klik untuk kembali ke pilihan menu materi (bawah kiri halaman isi).
8. Tombol navigasi next : berwarna hijau, bentuk bulat. Klik untuk ke halaman berikutnya (bawah kanan halaman isi, di samping tombol kembali ke pilihan materi).
9. Tombol navigasi back : berwarna hijau, bentuk bulat. Klik untuk kembali ke halaman
sebelumnya (bawah kanan halaman isi, di samping tombol navigasi next)
10. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
11. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi. 6 Menu Materi 1: Future Tense Lihat pada Gambar 3.37 Rancangan Tampilan Isi Future Tense
1. Halaman isi Future Tense
Future Tense
Rumus :
S + Shall/Will + Verb 1
atau
S + is/am/are + going to + Verb 1
2. Tombol menu simple future tense : Teks berwarna hitam, klik untuk melihat semua pembahasan simple future tense.
3. Tombol menu future continuous tense : Teks berwarna hitam, klik untuk melihat semua
Sound Effect muncul ketika program di buka
pembahasan future continuous tense.
4. Tombol menu future perfect tense : Teks berwarna hitam, klik untuk melihat semua pembahasan future perfect tense.
5. Tombol menu future perfect continuous tense : Teks berwarna hitam, klik untuk melihat semua pembahasan future perfect continuous tense.
6. Gambar pensil
7. Tombol kembali ke pilihan materi : Gambar rumah berwarna putih. Klik untuk kembali ke pilihan menu materi (bawah kiri halaman isi).
8. Tombol navigasi next : berwarna hijau, bentuk bulat. Klik untuk ke halaman berikutnya (bawah kanan halaman isi, di samping tombol kembali ke pilihan materi).
9. Tombol navigasi back : berwarna hijau, bentuk bulat. Klik untuk kembali ke halaman sebelumnya (bawah kanan halaman isi, di samping tombol navigasi next)
berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
11. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi. 7 Menu Materi 1: Past Future Tense Lihat pada Gambar 3.38 Rancangan Tampilan Isi Past Future Tense
1.Halaman isi past future tense
Past Future Tense
Rumus :
S + Should/Would + Verb 1
2. Tombol menu simple past future tense : Teks berwarna hitam, klik untuk melihat semua pembahasan simple past future tense.
3. Tombol menu past future continuous tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past future continuous tense.
4. Tombol menu past future perfect tense : Teks berwarna hitam, klik untuk melihat semua pembahasan past future perfect tense.
5. Tombol menu past future perfect continuous
tense : Teks berwarna hitam, klik untuk melihat
Sound Effect muncul ketika program di buka
semua pembahasan past future perfect continuous tense.
6. Gambar Pensil
7. Tombol kembali ke pilihan materi : Gambar rumah berwarna putih. Klik untuk kembali ke pilihan menu materi (bawah kiri halaman isi).
8. Tombol navigasi next : berwarna hijau, bentuk bulat. Klik untuk ke halaman berikutnya (bawah kanan halaman isi, di samping tombol kembali ke pilihan materi).
9. Tombol navigasi back : berwarna hijau, bentuk bulat. Klik untuk kembali ke halaman sebelumnya (bawah kanan halaman isi, di samping tombol navigasi next)
10. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
11. Tombol close : Warna merah berbentuk bulat (sudut kiri atas). Klik untuk menutup aplikasi.
: Lihat pada Gambar 3.39 Rancangan Tampilan Menu Latihan
2. Kotak isi teks : Kotak persegi panjang berwarna putih. Kotak ini harus diisi untuk mulai melakukan latihan.
3. Tombol kembali ke home : Gambar rumah berwarna putih. Klik untuk kembali ke menu utama (bawah kanan halaman isi).
4. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
5. Gambar pensil
6. Tombol close : Warna merah berbentuk bulat (sudut kanan atas). Klik untuk menutup aplikasi.
Effect muncul ketika program di buka 9 Menu Latihan : Lihat pada Gambar 3.40 Rancangan Tampilan Saat Mengerjakan Soal Latihan
1. Pertanyaan : Teks berwarna putih dengan model soal random. Soal yang disajikan hanya 10 soal. 2. Pilihan jawaban A : Teks berwarna putih. Klik
apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
3. Pilihan jawaban B : Teks berwarna putih. Klik apabila menurut Anda jawaban yang benar.
Sound Effect muncul ketika program di buka
Setelah di klik maka akan masuk ke soal berikutnya.
4. Pilihan jawaban C : Teks berwarna putih. Klik apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
5. Pilihan jawaban D : Teks berwarna putih. Klik apabila menurut Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
6. Tombol kembali ke home : Gambar rumah berwarna putih. Klik untuk kembali ke menu utama (bawah kanan halaman isi).
7. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
8. Gambar pensil
9. Tombol close : Warna merah berbentuk bulat (sudut kanan atas). Klik untuk menutup aplikasi.
10 Menu Latihan : Lihat pada Gambar 3.41 Rancangan Tampilan Hasil Latihan
1. Hasil jumlah benar : Terdapat teks dan angka. Teks berupa jumlah soal yang benar berwarna putih, kemudian di samping teks terdapat angka (warna putih) yang menunjukkan jumlah soal yang benar.
2. Hasil jumlah salah : Terdapat teks dan angka. Teks berupa jumlah soal yang salah berwarna putih, kemudian di samping teks terdapat angka (warna merah) yang menunjukkan jumlah soal yang salah.
3. Hasil nilai latihan : Terdapat teks dan angka. Teks berupa nilai dari tes (berwarna putih) dan disamping teks terdapat angka yang menunjukkan nilai yang diperoleh.
4. Pesan hasil latihan : pesan sesuai dengan hasil yang diperoleh.
5. Tombol kembali ke home : Gambar rumah berwarna putih. Klik untuk kembali ke menu utama (bawah kanan halaman isi).
6. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik. Sound Effect muncul ketika program di buka
7. Gambar pensil
8. Tombol close : Warna merah berbentuk bulat (sudut kanan atas). Klik untuk menutup aplikasi. 11 Menu Tentang Saya: Lihat pada Gambar 3.42 Rancangan Tampilan Menu Tentang Saya
1. Tampilan isi tentang saya : Nama : Aidul Fachrie
TTL : Medan, 22 Juli 1987
E-ma
2. Gambar buku
3. Tombol kembali ke home : Gambar rumah berwarna putih. Klik untuk kembali ke menu utama (bawah kanan halaman isi).
4. Tombol sound : Warna putih transparan berbentuk bulat (bawah kanan halaman isi, di samping tombol navigasi next). Klik untuk menghentikan musik.
5. Tombol close : Warna merah berbentuk bulat (sudut kanan atas). Klik untuk menutup aplikasi.
Sound Effect muncul ketika program di buka