Belajar Membaca
Klik Belajar Membaca Tampilkan Belajar Membaca
Menu Evaluasi
Pilihan Ganda
Klik Pilihan Ganda Tampilkan Pilihan Ganda
Klik Menu Utama Tampilkan Menu Utama
Klik Menu Evaluasi Tampilkan Menu Evaluasi
Menu Utama
Gambar 3.11. Diagram Transisi Menu Evaluasi
3.2.2.4. Perancangan Antarmuka User Interface
1. Rancangan Layar Opening Rancangan ini merupakan tampilan awal sebelum
masuk ke tampilan Menu Utama. Pada tampilan layar
Opening terdapat dua tombol
untuk menentukan halaman selanjutnya, yaitu :
• Tombol Menu Utama untuk masuk ke halaman Menu Utama.
• Tombol keluar untuk keluar dari aplikasi.
63
Judul Aplikasi
Animasi Huruf Hijaiyah
Tombol Menu Utama Tombol Keluar
Gambar
Gambar 3.12. Rancangan Tampilan halaman Opening
2. Rancangan Layar Menu Utama Rancangan ini merupakan tampilan halaman Menu
Utama dari aplikasi Makharijul Huruf Hijaiyah berbasis Multimedia. Dalam layar Menu Utama ini
terdiri dari 6 tombol yaitu : • Tombol Pengantar, untuk masuk ke halaman
Pengantar. • Tombol Sifat Huruf Hijaiyah, untuk masuk ke
halaman Sifat Huruf Hijaiyah. • Tombol Makharijul Huruf, untuk masuk ke
halaman Makharijul Huruf. • Tombol Evaluasi, untuk masuk ke halaman
Evaluasi.
64
• Tombol Tentang Penulis, untuk masuk ke halaman Tentang Penulis.
• Tombol Keluar, untuk keluar dari program aplikasi.
Gambar 3.13. Rancangan Tampilan Menu Utama
3. Rancangan Layar Pengantar Rancangan layar ini berisi materi tentang pengertian
dari makharijul huruf, jenis-jenis huruf hijaiyah dan tempat-tempat makharijul huruf.
65
Gambar 3.14. Rancangan Tampilan Menu Pengantar
4. Rancangan Layar Menu Makharijul Huruf Rancangan layar ini berisi tentang pembagian
tempat keluar huruf hijaiyah. Di dalam layar ini, terdapat animasi mulut, bibir ,suara huruf hijaiyah
apabila tombol huruf hijaiyah tersebut ditekan, dan video yang berfungsi untuk memberikan penjelasan
dari masing-masing huruf hijaiyah, rancangan layar ini menggambarkan bagaimana cara mengucapkan
huruf hijaiyah yang benar dalam membaca Al- Qur’an. Layar ini terdapat 6 tombol, 5 tombol untuk
pembagian makharijul huruf dan 1 tombol untuk kembali ke Menu Utama yaitu :
• Tombol Al-Jauf untuk masuk ke halaman Al-Jauf
.
66
• Tombol Al-Halqu untuk masuk ke halaman Al-Halqu
yang digambarkan dengan animasi huruf Al-Halqu yang keluar dari kerongkongan
dan hurufnya berjumlah 6. • Tombol Al-Lisan untuk masuk ke halaman
Al-Lisan yang digambarkan dengan animasi
lidah dan hurufnya berjumlah 18. • Tombol Asy-Syafatain untuk masuk ke halaman
Asy-Syafatain yang digambarkan dengan animasi
bibir dan hurufnya berjumlah 4. • Tombol Al-Khoisyum untuk masuk ke halaman
Al-Khoisyum .
• Tombol Menu Utama untuk kembali ke halaman Menu Utama.
Gambar
Animasi Makharijul Huruf
Gambar 3.15. Rancangan Tampilan Menu Makharijul Huruf
67
5. Rancangan Layar Evaluasi Rancangan layar ini berisi materi latihan, latihan
yang diberikan ada 2 macam, yaitu latihan Belajar Membaca berisi materi tentang mengikuti suara
yang ada di dalam aplikasi dengan cara merekam suara pengguna dan Pilihan Ganda berisi materi
tentang mengenali suara yang dicocokkan dengan teks.
Gambar
Animasi Menu Pilihan Ganda
Gambar 3.16. Rancangan Tampilan Menu Evaluasi
6. Rancangan Layar Tentang Penulis Rancangan layar ini berisi informasi mengenai
identitas pembuat aplikasi Makharijul Huruf dan software
yang digunakan dalam pembuatnya.
68
Judul Aplikasi Logo
UIN
Foto Pembuat
Identitas Pembuat Aplikasi dan Aplikasi
Software yang Digunakan dalam Aplikasi
Gambar 3.17. Rancangan Tampilan Menu Tentang Penulis
3.2.3. Pengumpulan Bahan material collecting