Layout Struktur Navigasi Perancangan Flowchart

55 3 Technology Analysis , hasil yang diperoleh kesiapan fasilitas ruang komputer ada 1 ruang dan berjumlah 20 komputer dirasa masih kurang untuk siswa satu kelas. Jika mampu digunakan dalam pembelajaran mikroprosesor tentunya bermanfaat. Solusinya setelah media pembelajaran jadi meminta izin untuk pelaksanaan pembelajaran media interaktif dapat dilakukan di ruang komputer.

2. Hasil Desain Design

Tahap desain berfungsi untuk membuat kerangka media pembelajaran. Hal ini disusun sebagai pedoman pengembangan produk. Kerangka tersebut terdiri atas layout, struktur konten, dan struktur navigasi. Hasil perancangan kerangka adalah sebagai berikut:

a. Layout

Desain layout dimaksudkan untuk pemilihan warna yang digunakan, penempatan dan konsistensi tombol menu, jenis dan ukuran font. Hasil yang didapatkan yaitu warna yang digunakan terdiri dari warna biru tua biru muda yang dikombinasikan dan dibuat serasi. Penempatan tombol menu diletakkan pada bagian bawah dan bagian samping sebelah kiri dari layout media.

b. Struktur Navigasi

Struktur navigasi menggambarkan hubungan antara beberapa konten media pembelajaran interaktif. Hasil yang didaptkan yaitu rancangan navigasi dapat dilihat pada gambar 5. berikut: 56 Gambar 5. Struktur Navigasi Media Pembelajaran Interaktif

c. Perancangan Flowchart

Tahap ini dimaksudkan untuk membuat flowchart yang merupakan penggambaran alur program secara menyeluruh. Flowchart dikembangkan berdasarkan struktur konten dan struktur navigasi yang telah dibuat. Hasil didapatkan berupa desain kerangka produk yang berupa flowchart media pembelajaran interaktif yang terdiri dari: Intro Menu Utama Tujuan Materi Panduan Evaluasi Referensi Pengenalan Mikroprosesor Perkemb. Tek. Mikroprosesor Perbedaan antar mikroprosesor Dasar komp. Mikroprosesor Rangkaian Pembentuk ALU Kembali Keluar Hal Soal Hasil Evaluasi Ulangi 57 1 Halaman utama Hasil perancangan halaman menu utama media pembelajaran interaktif dapat digambarkan pada flowchart berikut: MULAI OPENING MENU UTAMA TUJUAN MATERI PANDUAN EVALUASI A B C REFERENSI KELUAR D E F Flowchart Program 2 Gambar 6. Flowchart Halaman Menu Utama 2 Halaman Tujuan Hasil perancangan halaman tujuan media pembelajaran interakif dapat digambarkan pada flowchart berikut: Flowchart Tujuan Belajar A TUJUAN 2 Gambar 7. Flowchart Halaman Tujuan Belajar 58 3 Halaman Panduan Program Hasil perancangan halaman panduan media pembelajaran interakif dapat digambarkan pada flowchart berikut: Flowchart Panduan Program C PANDUAN 2 Gambar 8. Flowchart Halaman Panduan 4 Halaman Materi Hasil perancangan halaman materi media pembelajaran interakif dapat digambarkan pada flowchart berikut: PENGENALAN MIKROPROSSESOR Flowchart MenuMateri DASAR KOMPONEN MIKROPROSSESOR PERKEMBANGAN TEK. MIKROPROSSESOR PERBEDAAN ANTAR MIKROPROSSESOR RANGKAIAN PEMBENTUK UNIT ARITMATIK LOGIC ALU KEMBALI F KELUAR 2 2 2 2 2 2 MENU MATERI B Gambar 9. Flowchart Halaman Materi 59 5 Halaman Evaluasi Hasil perancangan halaman evaluasi media pembelajaran interakif dapat digambarkan pada flowchart berikut: Flowchart Latihan Soal D LATIHAN SOAL 2 Soal Habis TAMPIL NILAI YA BELUM Gambar 10. Flowchart Halaman Evaluasi 6 Halaman Referensi Hasil perancangan halaman referensi media pembelajaran interakif dapat digambarkan pada flowchart berikut: 60 Flowchart Referensi E REFERENSI 2 Gambar 11. Flowchart Halaman Referensi 7 Halaman Keluar Program Hasil perancangan halaman keluar media pembelajaran interakif dapat digambarkan pada flowchart berikut: Flowchart Keluar Program F 2 KELUAR Batal Ya SELESAI Gambar 12. Flowchart Halaman Keluar Program 61

3. Hasil Pengembangan dan Implementasi Development and