61
3. Tahap Perancangan Komponen
Tahap desain merupakan tahap yang digunakan untuk merancang sistem dan antarmuka dari media yang akan dikembangkan. Dalam tahap ini media
pembelajaran didesain sesuai dengan hasil analisis kebutuhan, analisis hardware,
dan analisis software pada tahap analisis. Dalam tahap ini, dilakukan
perancangan antarmuka media pembelajaran yang akan dikembangkan. Perancangan antarmuka media digambarkan melalui
storyboard program.
a. Storyboard Program
Dalam storyboard digambarkan visualisasi tampilan media dalam bentuk
gambar. Sehingga dapat menjelaskan antarmuka media secara jelas. Tabel 16.
Storyboard Program
No Nama
Desain Keterangan
1
Splash Screen
Pada halaman
splash screen
menampilkan logo Unity 3D sebagai
branding
aplikasi. Tidak ada musik atau
backsound Durasi 3-5 detik
62
No Nama
Desain Keterangan
2. Halaman menu
utama Pada halaman menu
utama terdapat logo aplikasi di pojok kiri
atas, judul media di pojok kanan atas,
tombol SKKD, tombol tujuan, tombol soal,
tombol Let’s Begin, tombol bantuan, tombol
profil, dan tombol keluar.
Tombol SKKD untuk menuju ke halaman SK
dan KD. Tombol tujuan untuk
menuju ke halaman tujuan.
Tombol soal untuk menuju ke halaman
latihan soal.
Tombol let’s begin untuk masuk ke dalam
materi pembelajaran. Tombol bantuan untuk
menuju ke halaman bantuan
Tombol profil untuk menuju ke halaman
profil Tombol keluar untuk
keluar dari aplikasi. 3.
Menu SK-KS Pada halaman SKKD
berisi penjelasan SK dan KD materi.
Pada pojok kanan atas terdapat judul menu.
Pada pojok kiri atas terdapat tombol home
untuk kembali ke menu utama.
Pada pojok kanan bawah terdapat tombol
exit untuk keluar dari aplikasi.
63
No Nama
Desain Keterangan
4. Menu tujuan
Pada halaman tujuan berisi penjelasan tujuan
pembelajaran. Pada pojok kanan atas
terdapat judul menu. Pada pojok kiri atas
terdapat tombol home untuk kembali ke menu
utama. Pada pojok kanan
bawah terdapat tombol exit untuk keluar dari
aplikasi.
5. Menu Let’s Begin
Pada halaman ini terdapat petujuk
penggunaan media. Tombol start untuk
masuk ke dalam load kamera.
Pada halaman load kamera terdapat tombol
home dan exit. Tombol home untuk
kembali ke menu utama Tombol exit untuk
keluar aplikasi
64
No Nama
Desain Keterangan
Pada halaman load kamera ketika kamera
pada device di arahkan ke marker maka akan
muncul gambar 3D seperti ilustrasi
disamping.
Selain gambar 3D aplikasi juga mampu
menampilkan video yang diawali dengan
muncul tombol icon video.
Jika user menekan icon tersebut maka video
akan berjalan.
65
No Nama
Desain Keterangan
Halaman ini berisi tombol untuk mengatur
kamera pada device ketika menggunakan
media ini.
Pengaturan dapat berupa pengaturan
kamera depanbelakang,
autofocus, fullscreen, flash, dan lain-lain.
6. Menu Soal
Pada halaman soal berisi lembar latihan
soal. Di bawah soal terdapat
tombol submit untuk mengecek jawaban dan
tombol next untuk lanjut ke soal
berikutnya.
Pada pojok kanan atas terdapat judul menu.
Pada pojok kiri atas terdapat tombol home
untuk kembali ke menu utama.
Pada pojok kanan bawah terdapat tombol
exit untuk keluar dari aplikasi.
7. Menu Bantuan
Pada halaman bantuan berisi petunjuk
penggunaan program. Pada pojok kanan atas
terdapat judul menu. Pada pojok kiri atas
terdapat tombol home untuk kembali ke menu
utama. Pada pojok kanan
bawah terdapat tombol exit untuk keluar dari
aplikasi
66
No Nama
Desain Keterangan
8. Menu Profil
Pada halaman profil berisi identitas
pengembang. Pada pojok kanan atas
terdapat judul menu. Pada pojok kiri atas
terdapat tombol home untuk kembali ke menu
utama. Pada pojok kanan
bawah terdapat tombol exit untuk keluar dari
aplikasi.
4. Tahap Penulisan Kode-kode Program
Tahap implementasi merupakan tahap pembuatan media pembelejaran perakitan komputer berdasarkan desain yang telah dibuat pada tahap
sebelumnnya. Berikut ini beberapa langkah yang dilakukan pada tahap implementasi ini.
a. Pembuatan Desain Interface