Desain Tampilan Produk Hasil dan Pembahasan

Gambar 4.4 Desain tampilan jika tidak mengisi kolom login Gambar 4.5 Desain tampilan jika sudah mengisi kolom login Maaf Anda Belum Mengisi Kolom dengan Lengkap Silahkan Melengkapi Kolom Dahulu TOMBOL UNTUK KEMBALI KE MENU LOGIN Selamat Datang Saudara ................ sesuai nama yang dimasukkan TOMBOL UNTUK LANJUT Gambar 4.6 Desain tampilan pendahuluan Gambar 4.7 Desain tampilan cover pertama WELCOME AHLAN WA SAHLAN MEDIA PEMBELAJARAN PENDIDIKAN AGAMA ISLAM KELAS X MULAI PENDAHULUAN ISI LANJUT Gambar 4.8 Desain tampilan cover kedua 2. Desain tampilan utama Desain tampilan utama merupakan tampilan yang menampilkan lima tombol pilhan, yaitu petunjuk, kompetensi, materi, tugas, dan profil. Desain tampilannya sebagai berikut : Gambar 4.9 Desain tampilan petunjuk penggunaan ASMAUL HUSNA MEDIA PEMBELAJARAN PENDIDIKAN AGAMA ISLAM KELAS X LANJUT PETUNJUK KOMPETENSI MATERI TUGAS PROFIL PETUNJUK PETUNJUK PENGGUNAAN FOOTER Gambar 4.10 Desain tampilan kompetensi Gambar 4.11 Desain tampilan materi PETUNJUK KOMPETENSI MATERI TUGAS PROFIL KOMPETENSI KOMPETENSI INTI KOMPETENSI DASAR TUJUAN PEMBELAJARAN FOOTER TEMPAT HASIL KELUARAN KETIKA TOMBOL : KI, KD, TP DIPILIH PETUNJUK KOMPETENSI MATERI TUGAS PROFIL Asmaul husna MATERI 7 macam asmaul husna FOOTER Gambar 4.10 Desain tampilan sub materi Gambar 4.12 Desain tampilan sub materi Gambar 4.13 Desain tampilan sub materi asmaul husna PETUNJUK KOMPETENSI MATERI TUGAS PROFIL Asmaul husna MATERI FOOTER PENGERTIAN DALIL TEMPAT HASIL KELUARAN KETIKA TOMBOL : PENGERTIAN DAN DALIL DIPILIH PETUNJUK KOMPETENSI MATERI TUGAS PROFIL Asmaul husna MATERI FOOTER PENGERTIAN DALIL TEMPAT HASIL KELUARAN KETIKA TOMBOL : PENGERTIAN, DALIL, SIKAP, PERILAKU DIPILIH SIKAP PERILAKU Gambar 4.14 Desain tampilan tugas Gambar 4.15 Desain tampilan profil PETUNJUK KOMPETENSI MATERI TUGAS PROFIL TUGAS FOOTER PILIHAN GANDA SOAL ESSAY Tombol Keluar PETUNJUK KOMPETENSI MATERI TUGAS PROFIL PROFIL FOOTER IDENTITAS PENYUSUN DOSEN PEMBIMBING UCAPAN TERIMAKASIH 3. Desain tampilan penutup Desain tampilan penutup merupakan tampilan penutup ketika pengguna mengakhiri atau ingin keluar dari program media pembelajaran interaktif. Desain tampilannya sebagai berikut : Gambar 4.16 Desain tampilan peringatan keluar

5. Pembuatan Produk

Pembuatan produk adalah proses menerjemahkan desain tampilan awal ke tampilan yang sebenarnya. Pembuatan produk ini dilakukan kurang lebih dua bulan. Hasil pembuatan media dari masing- masing desain adalah sebagai berikut : 1. Bagian Awal a. Login Media Pembelajaran Interaktif Login berfungsi untuk masuk ke dalam media pembelajaran interaktif. Tanpa melakukan login, pengguna tidak dapat melanjutkan ke menu berikutnya dalam media pembelajaran interaktif. Dalam tampilan login terdapat kolom- kolom yang berisikan data pengguna, seperti : nama, nomor, dan kelas. APAKAH ANDA YAKIN INGIN KELUAR YA TIDAK Gambar 4.17 Tampilan login Gambar 4.18 Tampilan jika tidak mengisi kolom dengan lengkap