Perancangan Antar Muka Desain dan Produksi 1..

Gambar 4.29 Rancangan Layar Intro 2. Rancangan Layar Halaman Menu Utama Halaman latar ini dirancang sebagai navigasi awal untuk user berinteraksi dengan aplikasi. Terdapat 4 tombol navigasi yaitu: ”home” untuk menuju ke halaman menu utama, ”petunjuk” untuk masuk ke halaman petunjuk penggunaan aplikasi, ”profile” untuk masuk ke halaman profil pembuat dan tombol ”exit” untuk keluar dari aplikasi. Gambar 4.30 Rancangan Layar Halaman Menu Utama 3. Rancangan Menu Home Menu home dirancang dengan 3 tombol navigasi utama di dalamnya yaitu: tombol ”kuliah” yang berisi materi dasar pengolahan citra dan materi yang berkaitan langsung dengan teknik konvolusi, tombol ”konvolusi” berisi halaman dimana animasi teknik konvolusi diilustrasikan disertai pula dengan fitur olah citra dengan filter konvolusi. Gambar 4.31 Rancangan Menu Home 4. Rancangan Menu Petunjuk Menu petunjuk dirancang menjadi 4 tombol navigasi halaman yaitu tombol halaman 1-4 yang disertai dengan penjelasan fungsi dari menu navigasi yang ada dan kegunaannya di tiap-tiap bagian halaman, sehingga dapat mempermudah user untuk mengetahui informasi lebih awal. Gambar 4.32 Rancangan Menu Petunjuk 5. Rancangan Menu Kuliah Rancangan menu kuliah berisi 6 tombol navigasi yang masing-masing berisi materi terkait dengan pengolahan citra dan teknik konvolusi. Pada menu ini juga disertakan animasi gambar dan video yang dapat dilihat di sisi kanan untuk menambah pemahaman materi yang berformat teks. Gambar 4.33 Rancangan Menu Kuliah 6. Rancangan Menu Konvolusi Pada menu konvolusi user nantinya diberi interaktivitas untuk memahami materi konvolusi dan juga adanya fitur olah citra sederhana untuk menunjukkan perbandingan antara perhitungan matematis dengan aplikasi sebenarnya. Gambar 4.34 Rancangan Menu Konvolusi 7. Rancangan Menu Quiz Dibuat sebagai tes evaluasi kemampuan mahasiswa sebagai proses dari hasil belajar dengan tipe soal pilihan ganda disertai dengan hasil perolehan nilai dan keterangan. Gambar 4.35 Rancangan Menu Quiz 8. Rancangan Menu Profile Dibuat sebagai halaman info yang berisi biodata singkat beserta software authoring tools yang dipakai untuk membuat aplikasi ini. Gambar 4.36 Rancangan Menu Profile 9. Rancangan Menu Exit Menu yang dirancang sebagai akhir dari penggunaan aplikasi yang akan langsung menutup saat user memilih untuk selesai menggunakan aplikasi. Gambar 4.37 Rancangan Menu Exit

2. Produksi

Setelah semua bahan yang diperlukan terkumpul dan desain konsep telah ditentukan sebelumnya. Pada tahap ini akan dijelaskan proses pembuatan animasi pembelajaran teknik konvolusi.  Pertama, aplikasi dibuat dengan spesifikasi layar 1024 x 768 pixel dengan tampilan fullscreen, nilai frame rate diatur menjadi 25 fps yang merupakan standar maksimal dari pembuatan sebuah CD-Interaktif. Pada layar intro dibuat sebuah animasi yang menggambarkan pesan singkat tentang pembelajaran. Layar intro ini dilengkapi dengan tombol navigasi ‘skip button’ untuk memudahkan user mencari shortcut menuju menu utama. Gambar 4.38 Pembuatan Layar Intro  Tahap kedua adalah membuat halaman menu utama yang berisi 4 pililhan tombol menu yang berisi fungsi dan penjelasan singkat dari masing-masing halaman. Gambar 4.39 Pembuatan Halaman Menu Utama  Ketiga adalah membuat halaman menu home yang berisi 3 menu pilihan yaitu kuliah, konvolusi dan quiz. Gambar 4.40 Pembuatan Halaman Menu Home  Pada menu home yang telah dibuat sebelumnya, dibuat pula isi dari masing- masing pilihan menu yaitu pada link tombol kuliah dibuat 6 tombol menu materi lain untuk mengisi materi dari teori seputar pengolahan citra dan teknik konvolusi. Selain itu disertakan pula elemen video maupun animasi untuk membantu pemahaman teori.