Rancangan Intro Rancangan Halaman

commit to user i INTRO MENU HURUF HIJAIYAH TANDA BACA HUKUM BACAAN KUIS KELUAR MATERI SIMULASI Tanda baca Baris dua Tanda baca baris satu Tanda baca mati Tanda baca ganda Tanda baca panjang idzhaar idgham iqlab madd Idzhaar halqi Idzhaar syafawi Idzhaar qamariyah Idgham bighunnah Idgham bilaghunnah Idgham mimi Idgham mutajanitsain Idgham mutaqaribain 1 2 3 4 Madd asli Madd MAKHRAJUL HURUF Gambar 3.5 Struktur Menu Aplikasi

3.6 Rancangan Desain Aplikasi

Jika data unsur unsur grafis yang akan dipakai telah dipastikan sebelumnya, maka selanjutnya dapat melakukan proses perancangan desain tata letak layout . Tahap perancangan desain bertujuan untuk mencari bentuk yang optimal dari aplikasi yang akan dibangun dengan pertimbangan faktor faktor permasalahan dan kebutuhan yang ada pada sistem seperti yang telah ditetapkan pada tahap analisis. Upaya yang dilakukan yaitu dengan berusaha mencari kombinasi penggunaan teknologi, perangkat keras dan perangkat lunak yang tepat sehingga diperoleh hasil yang optimal dan mudah untuk diimplementasikan. Berikut rancangan pembelajaran Al-

3.6.1 Rancangan Intro

Halaman intro merupakan tampilan pembuka sebelum memasuki halaman utama menu utama dari aplikasi ini, sebuah intro biasanya menampilkan gambar, animasi text , tombol mulai, bahkan ada yang menampilkan animasi yang berhubungan dengan objek tersebut. commit to user i Hal ini dimaksudkan untuk menarik perhatian pengguna pada saat melihat aplikasi pembelajaran Al- ini. Tapi bukan berarti sebuah pembelajaran Al- harus memiliki intro yang terdiri atas animasi animasi yang rumit atau tampilan tampilan yang unik. Intro akan semakin hidup apabila diiringi oleh sound atau musik. Seperti halnya sebuah animasi, intro pun akan terasa mati jika tidak disertai suara setiap prosesnya. Intro Pembelajaran Al- an ini terdapat animasi judul aplikasi dan gambar. Untuk mengakhiri halaman ini maka harus tekan mulai , kemudian akan menuju ke halaman berikutnya yaitu menu utama dari pembelajaran Al- ini. Rancangan tampilan intro seperti Gambar 3.6 Animasi judul aplikasi Gambar mulai Gambar 3.6 Rancangan Tampilan Intro 3.6.2 Rancangan Tampilan Menu Halaman utama menu merupakan tampilan untuk menampung isi dari aplikasi pembelajaran Al- ini dan merupakan inti dari aplikasi pembelajaran Al- ini. Pada halaman ini, user dapat langsung mengoperasikan aplikasi ini. Tampilan berada di tengah tengah dengan tampilan fullscreen . Pada bagian tengah terdapat empat tombol , yaitu huruf commit to user i hijjaiyah, tanda baca, hukum bacaan, dan kuis. Serta pada bagian kanan bawah terdapat button exit , yaitu untuk keluar dari aplikasi. Rancangan tampilan menu pada gambar 3.7 Animasi judul aplikasi tombol tombol tombol tombol EXIT tombol Gambar 3.7 Rancangan Tampilan Menu

3.6.3 Rancangan Halaman

Huruf Hijaiyyah Seperti yang telah dijelaskan sebelumnya, tombol huruf hijaiyyah berada di tengah. Pada halaman ini berisi huruf huruf hijjaiyyah. Pada bagian bawah terdapat dua tombol, yaitu tombol home dan exit. Tombol home digunakan untuk kembali ke halaman utama , dan tombol exit untuk keluar aplikasi. Rancangan halaman huruf hijaiyyah pada gambar 3.8 commit to user i Animasi judul aplikasi EXIT tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol tombol Home Gambar 3.8 Rancangan halaman huruf hijaiyyah

3.6.4 Rancangan Halaman Tanda Baca