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