Perancangan Tampilan Perancangan Aplikasi .1 Pemodelan Sistem

3.2.4 Perancangan Tampilan

Perancangan tampilan pada aplikasi pengajaran berbantuan komputer untuk mata pelajaran seni budaya dan keterampilan adalah: 1. Tampilan Halaman Utama Tampilan utama aplikasi ini menampilkan menu materi, simulasi, latihan, profil. Pada tampilan ini juga tersedia tombol untuk keluar aplikasi dan tombol-tombol pilihan lagu. Gambar 3.6 Tampilan Halaman Utama 2. Tampilan Menu Materi Menu materi menampilkan dua pilihan materi, yaitu materi warna dan nada. Pada tampilan ini disediakan tombol tutup untuk kembali ke halaman utama. Tombol keluar dan tombol-tombol pilihan lagu. Materi Simulasi Latihan Materi Keluar Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara Gambar 3.7 Tampilan Menu Materi Setelah dipilih salah satu tombol materi, maka akan ditampilkan isi dari materi tersebut. Di bagian kiri atas tersedia tombol navigasi untuk kembali ke menu pilihan materi, sedangkan di bagian kanan bawah tersedia tombol navigasi untuk materi selanjutnya ataupun materi sebelumnya. Disini juga tersedia tombol tutup untuk kembali ke halaman utama, tombol keluar dan tombol-tombol pilihan lagu. Gambar 3.8 Tampilan Isi Materi Keluar Tutup Isi Materi Musik1 Musik2 Musik3 Musik4 stop Keluar Warna Nada Tutup Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara 3. Tampilan Menu Simulasi Menu simulasi menampilkan dua pilihan simulasi, yaitu simulasi warna dan nada. Pada tampilan ini disediakan tombol tutup untuk kembali ke halaman utama, tombol keluar dan tombol-tombol pilihan lagu. Gambar 3.9 Tampilan Menu Simulasi Jika pada menu simulasi yang dipilih adalah tombol warna, maka akan masuk ke dalam tampilan simulasi warna. Pada tampilan ini disediakan area untuk memilih warna, area untuk mencampur warna dan gambar hitam putih untuk diwarnai. Di bagian kiri atas disediakan tombol navigasi untuk kembali ke menu simulasi. Disini juga tersedia tombol tutup untuk kembali ke halaman utama, tombol keluar dan tombol-tombol pilihan lagu. Keluar Warna Nada Tutup Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara Gambar 3.10 Tampilan Simulasi Warna Jika pada menu simulasi yang dipilih adalah tombol nada, maka akan masuk ke dalam tampilan simulasi nada. Pada tampilan ini disediakan sebuah alat musik, yaitu pianika dan contoh lagu. Di bagian samping kiri dan kanan contoh lagu, tersedia tombol navigasi untuk memilih contoh lagu yang lain, sedangkan di bagian kiri atas disediakan tombol navigasi untuk kembali ke menu simulasi. Disini juga tersedia tombol tutup untuk kembali ke halaman utama, tombol keluar dan tombol-tombol pilihan lagu. Gambar 3.11 Tampilan Simulasi Nada Keluar Tutup Contoh Lagu Alat Musik Pianika Musik1 Musik2 Musik3 Musik4 stop Keluar Tutup Gambar Pilihan warna Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara 4. Tampilan Menu Latihan Menu latihan menampilkan kotak teks untuk mengisi nama dan sebuah tombol OK untuk masuk ke pertanyaan. Pada tampilan ini disediakan tombol tutup untuk kembali ke halaman utama. Tombol keluar dan tombol-tombol pilihan lagu. Gambar 3.12 Tampilan Menu Latihan Setelah memasukkan nama dan menekan tombol OK, maka akan masuk ke tampilan pertanyaan. Pada halaman ini ditampilkan pertanyaan dan 3 pilihan jawaban A, B dan C. Setelah menjawab 10 soal yang telah dirandom, maka akan masuk pada halaman hasil latihan tersebut. Pada halaman ini ditampilkan jumlah jawaban yang benar, jumlah jawaban yang salah, hasil yang berupa sebuah nilai dan sebuah pesan yang sesuai dengan hasil yang diperoleh. 5. Tampilan Menu Profil Menu profil menampilkan data diri dari penulis. Pada tampilan ini disediakan tombol tutup untuk kembali ke halaman utama. Tombol keluar dan tombol-tombol pilihan lagu. Keluar Tutup Teks nama OK Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara Gambar 3.13 Tampilan Menu Profil Keluar Tutup Isi data diri Musik1 Musik2 Musik3 Musik4 stop Universitas Sumatera Utara BAB 4 IMPLEMENTASI

4.1 Implementasi