70
2. Perancangan
Tahapan perancangan pada penelitian ini yang dilakukan adalah tahapan perancangan, tahapan perancangan yang dilakukan antara lain membuat
flowchat, membuat story board dan rancangan media sebelum dikembangkan, tahapan tersebut antara lain:
a. Flowchart aplikasi
1 Flowchart Proses Kerja Halaman Petunjuk Flowchart yang digunakan untuk menjelaskan proses kerja pada
halaman petunjuk.
Gambar 5. Flowchart Proses Kerja Halaman Petunjuk
2 Flowchart Proses Kerja Halaman Kompetensi Flowchart yang digunakan untuk menjelaskan proses kerja pada
halaman kompetensi.
71 Gambar 6. Flowchart Proses Kerja Halaman Kompetensi
3 Flowchart Proses Kerja Halaman Materi Flowchart yang digunakan untuk menjelaskan proses kerja pada
halaman materi.
Gambar 7. Flowchart Proses Kerja Halaman Materi
72 4 Flowchart Proses Kerja Halaman Simulasi
Flowchart yang digunakan untuk menjelaskan proses kerja pada halaman simulasi.
Gambar 8. Flowchart Proses Kerja Halaman Simulasi
5 Flowchart Proses Kerja Halaman Kuis Flowchart yang digunakan untuk menjelaskan proses kerja pada
halaman kuis.
73 Gambar 9. Flowchart Proses Kerja Halaman Kuis
6 Flowchart Proses Kerja Halaman Profil Flowchart yang digunakan untuk menjelaskan proses kerja pada
halaman profil.
Gambar 10. Flowchart Proses Kerja Halaman profil
74
b. Story Board Aplikasi
Tabel 15. Story Board Aplikasi
No. Visual
1. Halaman Utama
Keterangan : 1 Warna backround biru tua dan orange tua
2 Gambar logo bertuliskan SMK X semester genap 3 Tulisan judul media baris pertama berwarna merah maron, baris
kedua berwarna hijau 4 Tombol
“exit” t 5 Tombol
“music onoff” t t music 2.
Halaman petunjuk
Judul media
Logo
Petunjuk Simulasi
Materi Kompetensi
Profil Kuis
Exit Musik
Onoff
Exit
Gambar halaman yang dijelaskan Judul halaman
Next Undo
75 Keterangan :
1 Background putih tulang mendominasi halaman petunjuk 2
J “ t j ” 3 Warna tulisan judul hijau muda
4 Gambar halaman menunjukkan halaman yang dijelaskan penggunaannya
5 Tombol “next” t j j
6 Tombol “undo” t b t j
sebelumnya 7 Tombol
“exit” t t j b li ke menu utama
3. Halaman Kompetensi
Keterangan : a Background berwarna krem
b J “K t ”
c T b “exit” t
d T b “music onoff” t t c
e T b “next” t j j t
selanjutnya f
T b “undo” t b t j mpetensi sebelumnya
g T b “home” t b t
Exit
Judul halaman
Musik Onoff
Penjelasan kompetensi dan indikator
Home Undo
Next
76 4.
Halaman Materi
Keter angan :
Keterangan:
a. Warna background utama sama seperti menu utama b.
J “M t ” c.
T b “exit” untuk keluar dari program d.
T b “music onoff” t t musik e.
T b “home” t b t 5.
Halaman Simulasi
Home Judul halaman
Exit Musik
Onoff
Pengertia Alat
Bahan Tanda-tanda
Cara mengukur Pola Sistem Bunka
Judul halaman
Exit Musik
Onoff
Home Badan
Lengan Rok
77 Keterangan :
1 Background berwarna krem 2
J “S ” 3
T b “B ” t b b t pola badan
4 T b “L ” t b b t
pola lengan badan 5
T b “R ” t b b t rok
6 T b “exit” untuk keluar dari program
7 T b “music onoff” t t musik
8 T b “home” t b t
6.
Sub Halaman Simulasi Menu Badan
Keterangan :
1 Background berwarna krem 2
J “Proses Pembuatan Pola Dasar Badan Atas System Bunka
” 3
T b “ - ” t t b t bentuk gambar
4 T b “ ” t t b t
5 T b “exit” t t j embali ke
menu utama 6
T b “music onoff” t t musik
Judul halaman
Exit Musik
Onoff
Langkah 1
Langkah 4 Langkah 3
Langkah 5 Langkah 6
Langkah 7
Langkah 9 Langkah
Langkah Simulasi
Langkah 2 Langkah 8
78 7.
Sub Halaman Simulasi Menu Lengan
Keterangan : 1 Background berwarna krem
2 J “P P b t P D L S t
Bunka ”
3 T b “ - 5” t t b t
bentuk gambar 4
T b “simulasi” untuk melihat proses pembuatan dengan animasi 5
T b “exit” t t j b menu utama
6 T b “music onoff” t t musik
8. Sub Halaman Simulasi Menu Rok
Judul halaman
Exit Musik
Onoff
Langkah 1 Langkah 4
Langkah 3
Langkah 5 Simulasi
Langkah 2
Judul halaman
Exit Musik
Onoff
Langkah 1
Langkah 4 Langkah 3
Langkah 5
Simulasi Langkah 2
Langkah 6 Langkah 7
Langkah 8
79 Keterangan :
1 Background berwarna krem 2
J “Proses Pembuatan Pola Dasar Rok System Bunka” 3
T b “ - 8” t t b t bentuk gambar
4 T b “ ” t t b t
5 T b “exit” t t j b e
menu utama 6
T b “music onoff” t k menyalakan dan mematikan musik
9
Halaman Kuis
Keterangan : 1 Background berwarna krem
2 J “K ”
3 Tulis nama pada kotak yang telah disediakan 4 Tulis kelas pada kotak yang telah disediakan
5 T b “ ” t
7 T b “home” t b t
6 T b “music onoff” t k menyalakan dan mematikan musik
7 T b “exit” t
Judul halaman
Exit Musik
Onoff
Mulai Tempat menulis
Tempat menulis
Home
80 10
Halaman Profil
Keterangan : 1 Background berwarna krem
2 J “P f ”
3 T b “home” untuk kembali ke menu utama
4 T b “music onoff” t k menyalakan dan mematikan musik
5 T b “exit” t
6 Titik adalah space tulisan isi profil media berjalan
3. Pengembangan