2 1
3 Mulai
Tampilan Utama
Proses
Selesai T
Tombol Mulai Y
Selesai
3.3 Perancangan Tampilan
3.3.1 Halaman utama
Halaman utama adalah tampilan awal yang pertama kali muncul ketika aplikasi dibuka. Halaman utama ini berisi judul aplikasi yaitu “Aplikasi Tajwid Membaca
Al qur’an” serta tombol mulai yang akan menampilkan hukum tajwid apa saja yang
disajikan pada aplikasi ini, pada saat dijalankan halaman awal akan muncul bersamaan dengan tombol mulainya. Halaman awal ini memiliki bebrapa perpaduan warna yaitu :
Kuning, putih, ungu, hijau dan disebelah kanan terdapat gambar seorang anak yang sedang membaca Al qur’an, serta judul aplikasi berwarna biru.
Gambar 3.2 Kerangka dan flowchart halaman utama Ket :
1. Background aplikasi berupa gambar seorang anak yang sedang membaca
Al qur’an, terdiri dari perpaduan warna kuning, putih, ungu, hijau. 2.
Judul aplikasi berupa tulisan dengan perpaduan warna hitam, merah, biru. 3.
Tombol “mulai”.
Universitas Sumatera Utara
2 3
4
6 5
7 8
1
Tampilan halaman ini merupakan perpaduan antara warna kuning, putih, ungu, hijau, dan di sebelah kanan terdapat gambar seorang anak yang sedang membaca Al qur’an.
Ketika dijalankan background, judul, dan tombol “mulai” akan tampil bersamaan.
3.3.2 Halaman menu
Halaman menu merupakan halaman yang menamipilkan menu-menu yang berisi macam-macam tombol hukum ilmu tajwid, yaitu tombol makhroj huruf ,
ikhfa’ haqiqi, izhar halqi, idgham, iqlaab, qalqalh, madd. Halaman mempunyai background
sebuah gambar yang menunjukkan dua orang anak yang sedang memegang papan tulis, pada halaman ini terdapat garis pinggir yang terdiri dari beberapa warna yaitu :
kuning, putih, hijau, ungu. Pada saat dijalankan nantinya tombol-tombol menu dalam halaman ini akan terurai dari satu bagian sebelumnya membentuk sebuah tampilan
pilihan menu.
Ket :
1. Background, berupa gambar 2
orang anak dan papan tulis. 2.
Pilihan menu Makhroj Huruf. 3.
Pilihan meu Ikhfa’ Haqiqi.
4. Pilihan Menu Izhar Halqi.
5. Pilihan Menu Idgham.
6. Pilihan menu Iqlaab
7. Pilihan menu Maad
8. Pilihan menu Qalqalah.
Gambar 3.3 Kerangka halaman menu
Universitas Sumatera Utara
Mulai
Tampilan Menu
Proses
Makhroj Huruf Buka Makhroj
Huruf Y
Y
T Ikhfa’ Haqiqi
Buka Ikhfa’ Haqiqi Y
T Izhar Halqi
Idgham T
Iqlaab T
Madd T
Qalqalah T
Buka Izhar Halqi Y
Buka Idgham
Buka Iqlaab
Buka Madd
Buka Qalqalah Y
Y Y
Y Tampilan
Menu Selesai
T Selesai
Gambar 3.4 Flowchat halaman menu
Tampilan halaman ini memiliki background berupa dua orang anak yang sedang mengangkat papan tulis.
Universitas Sumatera Utara
Tampilan Makhroj Huruf
Proses
Tombol Huruf Alif sampai ya
Y
Tombol Home T
Y Selesai
Y T
A
Menu Utama
Audio Penjelasan
Huruf T
3.3.3 Halaman makhroj huruf
Kategori