107
b. Desain Arsitektur
Desain arsitektur adalah tahap setelah desain data dibuat. Dari Data Flow Diagram DFD level 0 kemudian ditranformasikan ke
dalam diagram alir program. Diagram alir program berupa bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses
dan hubungan antar proses secara mendetail dalam suatu program.
Gambar 33. Diagram Alir Program
Petunjuk Materi
Menu Keluar
Loading
Tombol masuk ke
menu Tombol
navigasi Tombol
masuk ke materi
Tombol keluar
program Tombol
pemutar video
Halaman Awal Home
Perawatan CVT
Sistem CVT
Fungsi Komponen
Mekanisme CVT
Pendingin CVT
Over Haul CVT
Ya Tidak
Keluar
108
c. Desain Interface
Tahap desain interface adalah penggambaran mengenai struktur program. Desain interface atau tampilan dibuat untuk
memudahkan Programmer menterjemahkan ke dalam bentuk bahasa pemrograman. Desain interface dibuat berdasarkan flowchart yang
telah dibuat pada tahap desain arsitektur. Berikut ini adalah desain interface produk media pembelajaran yang akan dibuat.
1 Desain Tampilan Pembuka Desain tampilan awal, dibuka dengan animasi pergerakan
loading untuk menampilkan kesan menarik bagi siswa. Desain tampilan pembuka dapat dilihat sebagai berikut.
Gambar 34. Desain Tampilan Pembuka 2 Desain Tampilan Halaman UtamaHome
Desain tampilan halaman awal terdiri dari empat tombol menu utama, tombol pengatur musik, nama pengembang, logo
UNY, gambar sepeda motor matic, gambar transmisi CVT, tulisan judul materi, dan tulisan multimedia pembelajaran. Desain
tampilan halaman awal dapat dilihat sebagai berikut.
109
Gambar 35. Desain Tampilan Halaman AwalHome 3 Desain Tampilan Halaman Petunjuk
Desain tampilan halaman petunjuk terdiri dari empat tombol menu utama, nama pengembang, logo UNY, judultulisan
petunjuk penggunaan, tulisan petunjuk pengoperasian media pembelajaran, tombol pengatur musik, dan tombol untuk pindah ke
halaman berikutnya. Desain tampilan halaman petunjuk dapat dilihat sebagai berikut.
Gambar 36. Desain Tampilan Halaman Petunjuk Penggunaan
110 4 Desain Tampilan Menu Materi
Desain tampilan menu materi terdiri dari empat tombol menu utama, nama pengembang, enam tombol pengaturan untuk
masuk ke bahasan materi, tulisan judul materi yang dibahas, gambar sepeda motor matic dan bagian transmisi CVT, dan tombol
pengatur musik. Desain tampilan halaman utama dapat dilihat sebagai berikut.
Gambar 37. Desain Tampilan Menu Materi 5 Desain Tampilan Halaman Materi
Desain tampilan halaman materi terdiri dari empat tombol menu utama, nama pengembang, enam tombol pengaturan untuk
masuk ke bahasan materi, tulisan judul materi yang dibahas, tulisan materi yang dibahas, dan tombol untuk pindah ke halaman
berikutnya. Desain tampilan halaman materi dapat dilihat sebagai berikut.
111
Gambar 38. Desain Tampilan Halaman Materi 6 Desain Tampilan Halaman Keluar
Desain tampilan halaman keluar terdiri dari dua tombol pengatur untuk keluar dan dilengkapi “gambar petunjuk keluar”.
Desain tampilan halaman keluar dapat dilihat sebagai berikut.
Gambar 39. Desain Tampilan Halaman Keluar
d. Desain Prosedural
Kategori