Tampilan Home Tampilan Menu Utama Tampilan Penjelasan Tampilan Animasi

20

3.2.1 Perancangan Kebutuhan Scene Animasi

Scene merupakan halaman atau tampilan yang disajikan kepada user agar dapat menikmati aplikasi dengan nyaman.

3.2.1.1 Scene Home

Scene home berisi tentang tampilan awal dan judul.

3.2.1.2 Scene Menu Utama

Scene Menu Utama berisi tombol menu pilihan yaitu menu sholat, wudhu, berdoa, tayamum, quiz dan profil.

3.2.1.3 Scene Sholat, Wudhu, Berdoa, Tayamum

Scene ini berisi tombol untuk menuju ke halaman penjelasan sumber, animasi dan video dari sholat, wudhu, berdoa serta tayamum.

3.2.1.4 Scane Quiz

Scene ini berisi teks, suara dan gambar untuk quiz.

3.2.1.5 Scene Profil

Scene ini berisi biografi pembuat aplikasi.

3.2.2 Rancangan Tampilan

3.2.2.1 Tampilan Home

Tampilan home seperti pada Gambar 3.3. Gambar 3.3 Tampilan Home Aplikasi Tampilan home adalah tampilan awal aplikasi. Berisi tombol masuk, untuk lanjut ke menu utama aplikasi. commit to user 21

3.2.2.2 Tampilan Menu Utama

Tampilan menu utama seperti pada Gambar 3.4. Gambar 3.4 Tampilan Menu Utama Tampilan menu utama aplikasi adalah tampilan lanjutan setelah halaman home. Tampilan ini terdiri dari enam tombol menu yang tersedia pada aplikasi dengan empat menu utama pembelajaran yaitu Sholat, Wudhu, Berdoa, Tayamum, ditambah sebuah menu Quiz sebagai sarana evaluasi pembelajaran dan sebuah menu Profil yang berisi profil pembuat aplikasi. Pada tampilan ini pengguna aplikasi dapat mengklik salah satu tombol menu untuk masuk ke menu yang diinginkan. 3.2.2.3 Tampilan Content Menu Tampilan content menu seperti pada Gambar 3.5. Gambar 3.5 Tampilan Content Menu Tampilan content menu merupakan tampilan awal ketika salah satu menu utama diklik. Setiap menu yang dipilih berisi tiga buah submenu yaitu Penjelasan, Animasi dan Video. Submenu ini dapat diklik untuk menampilkan content di dalamnya Di sisi kiri bawah terdapat tombol back untuk kembali ke menu utama. commit to user 22

3.2.2.4 Tampilan Penjelasan

Tampilan penjelasan seperti pada Gambar 3.6. Gambar 3.6 Tampilan Penjelasan Tampilan penjelasan adalah tampilan yang muncul ketika submenu penjelasan diklik, berisi judul dan pengertian dari menu pembelajaran yang dipilih tadi. Contohnya seperti gambar diatas yaitu untuk menu penjelasan sholat. Disebelah kanan atas ditambahkan tombol close untuk keluar dari halaman ini dan kembali ke content menu Sholat.

3.2.2.5 Tampilan Animasi

Tampilan animasi seperti pada Gambar 3.7. Gambar 3.7 Tampilan Animasi Tampilan animasi adalah tampilan yang muncul ketika submenu animasi diklik, berisi judul dan animasi yang akan dimainkan sesuai dengan menu yang telah dipilih sebelumnya. Contoh seperti gambar diatas maka akan memainkan animasi untuk memperagakan gerakan sholat. Disebelah kanan atas ditambahkan tombol close untuk keluar dari halaman ini dan kembali ke content menu Sholat. commit to user 23

3.2.2.6 Tampilan Video