86 Deskripsi konsep aplikasi belajar Teknologi Informasi Komunikasi seperti
Tabel 4.1. Tabel 4.1. Deskripsi Konsep Aplikasi
4.5 Perancangan
Design
Pada tahap ini peneliti melakukan perancangan aplikasi berupa perancangan storyboard, perancangan flowchart, desain struktur navigasi berupa
hirarki menu, perancangan STD State Definition Diagram dan perancangan antarmuka pemakai user interface.
4.5.1 Perancangan S toryboard
Storyboard merupakan deskripsi tiap scene tampilan, dengan mencantumkan semua obyek multimedia dan link ke scene lain. Secara umum
rancangan storyboard yang dihasilkan terdiri dari 6 scene, yaitu: Judul
: Pengembangan Aplikasi Belajar Teknologi Informasi Komuniksi Berbasis Multimedia
User : Siswa SLTA kelas XI
Image : Menggunakan format file jpg dan gif yang dibuat sendiri
Teks : Font tombol menu Arial ukuran 12 pt dan tampilan menu
menggunkan font Arial ukuran 11 pt Audio
: Menggunakan format file mp3 yang diperoleh dari koleksi mp3 pribadi
Video : Menggunakan format flv yang diperoleh dari Internet
Animasi : Animasi teks dan gambar yang dibuat sendiri Interaktif : Menggunakan link untuk berpindah dari satu halaman ke
halaman lain yang dibuat sendiri
87 Tabel 4.2 Story Board
SCENE VISUAL
AUDIO DURASI
1
LINK: Sene 2 Gawil.mp3
± 10 detik
2
LINK: Scene 3, Scene 4, Scene 5, Scene 6
Gawil.mp3
3
LINK: Scene 2, Scene 3.1, Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5,
Scene 4, Scene 5, Scene 6 The
Calling.mp3
88 3.1
LINK: Scene 2, Scene 3, Scene 3.1A, Scene 3.1B, Scene 3.1C,
Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.1A
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1B, Scene 3.1C,
Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.1B
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1A, Scene 3.1C,
Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
89 3.1C
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.1A, Scene 3.1B,
Scene 3.2, Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.2
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2A, Scene 3.2B,
Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
3.2A
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.2B,
Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
90 3.2B
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.2A,
Scene 3.3, Scene 3.4, Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
3.3
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3A,
Scene 3.3B, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.3A
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3,
Scene 3.3B, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
91 3.3B
LINK: Scene 2,Scene 3, Scene 3.1, Scene 3.2, Scene 3.3,
Scene 3.3A, Scene 3.4, Scene 3.5, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.4
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2,
Scene 3.3, Scene 3.4A, Scene 3.4B, Scene 3.4C,
Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
3.4A
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2,
Scene 3.3, Scene 3.4, Scene 3.4B, Scene 3.4C,
Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
92 3.4B
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2,
Scene 3.3, Scene 3.4, Scene 3.4A, Scene 3.4C,
Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
3.4C
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2,
Scene 3.3, Scene 3.4, Scene 3.4A, Scene 3.4B,
Scene 3.5, Scene 4, Scene 5, Scene 6
The Calling.mp3
3.5
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3,
Scene 3.4, Scene 3.5A, Scene 3.5B, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
93 3.5A
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3,
Scene 3.4, Scene 3.5, Scene 3.5B, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
3.5B
LINK: Scene 2, Scene 3, Scene 3.1, Scene 3.2, Scene 3.3,
Scene 3.4, Scene 3.5, Scene 3.5A, Scene 4, Scene 5,
Scene 6 The
Calling.mp3
4
LINK: Sene 2, Scene 3, Scene 4.1, Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
94 4.1
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1A, Scene 4.1B,
Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
4.1A
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1B,
Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
4.1B
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A,
Scene 4.1C, Scene 4.1D, Scene 4.1E, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
95 4.1C
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A,
Scene 4.1B, Scene 4.1D, Scene 4.1E, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
4.1D
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A,
Scene 4.1B, Scene 4.1C, Scene 4.1E, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
4.1E
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A,
Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1F,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
96 4.1F
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.1A,
Scene 4.1B, Scene 4.1C, Scene 4.1D, Scene 4.1E,
Scene 4.2, Scene 5, Scene 6
Djaduk8.mp3
4.2
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2A,
Scene 4.2B, Scene 5, Scene 6 Djaduk8.mp3
4.2A
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2,
Scene 4.2A, Scene 5, Scene 6 Djaduk8.mp3
97 4.2B
LINK: Sene 2, Scene 3, Scene 4, Scene 4.1, Scene 4.2,
Scene 4.2A, Scene 5, Scene 6 Djaduk8.mp3
5
LINK: Sene 2, Scene 3, Scene 4, Scene 5.1, Scene 5.2, Scene 5.3,
Scene 6 Kebyar-
legong_1.mp3
5.1
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1A,
Scene 5.1B, Scene 5.1C, Scene 5.1D, Scene 5.1E,
Scene 5.2, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
98 5.1A
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.1B, Scene 5.1C, Scene 5.1D, Scene 5.1E,
Scene 5.2, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
5.1B
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.1A, Scene 5.1C, Scene 5.1D, Scene 5.1E,
Scene 5.2, Scene 5.3, Scene 6
5.1C
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.1A, Scene 5.1B, Scene 5.1D, Scene 5.1E,
Scene 5.2, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
99 5.1D
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.1A, Scene 5.1B, Scene 5.1C, Scene 5.1E,
Scene 5.2, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
5.1E
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.1A, Scene 5.1B, Scene 5.1C, Scene 5.1D,
Scene 5.2, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
5.2
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2A, Scene 5.2B, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
100 5.2A
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2, Scene 5.2B, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
5.2B
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2, Scene 5.2A, Scene 5.3, Scene 6
Kebyar- legong_1.mp3
5.3
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2, Scene 5.3A, Scene 5.3B, Scene 6
Kebyar- legong_1.mp3
101 5.3A
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2, Scene 5.3, Scene 5.3B, Scene 6
Kebyar- legong_1.mp3
5.3B
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 5.1,
Scene 5.2, Scene 5.3, Scene 5.3A, Scene 6
Kebyar- legong_1.mp3
6
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6.1, Scene 6.2,
Scene 6.3 Jalan
Satapak.mp3
102 6.1
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.2,
Scene 6.3 Jalan
Satapak.mp3
6.2
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.1,
Scene 6.3 Jalan
Satapak.mp3
6.3
LINK: Sene 2, Scene 3, Scene 4, Scene 5, Scene 6, Scene 6.1,
Scene 6.2 Jalan
Satapak.mp3
103
4.5.2 Perancangan Flowchart
Kategori