3.7 Perancangan Layar
3.7.1 Story Board
Perancangan Storyboard berikut ini adalah prancangan layar yang terdapat dalam aplikasi antara lain:
Tabel 3.29 Halaman : Splash Screen Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 1 of 19 Screen ID: S-01
Screen Description : Halaman ini adalah halaman pertama pada saat aplikasi dijalankan , berisi logo judul aplikasi yang akan dilanjutkan ke halaman intro Link From Screen ID : - Link to Screen ID : I-01
Color scheme : Background - black Text Attribute : Broadway
Still Images :Logo.png Audio :-
Video :-
Tabel 3.30 Halaman : Intro
Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 2 of19 Screen ID: I-01
Screen Description : Pada halaman ini menampilkan sebuah intro yang jika ditekan tombol ‘ENTER’ akan melanjutkan ke halaman menu utama
Link From Screen ID : S-01 Link to Screen ID : MPK-01 Color scheme : red
Text Attribute : Arial Still Images : firefighter.jpg Audio : The Rise of a Hero.mp3 Video : -
Tabel 3.31 Halaman : Menu Utama Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 3 of 19 Screen ID: MPK-01
Screen Description :Halaman ini merupakan halaman menu yang berisi judul diatas dan fitur tombol plihan yaitu :Pengenalan Alat, Pemadaman api, Pengaturan, Keluar.
Link From Screen ID : I-01 Link to Screen ID : PA-01 Color scheme : black, brown, white, red
Text Attribute :Arial
Still Images : Background_Brown.jpg, dark-grey-background-texture.jpg Audio : btn_klik.mp3
Video
Tabel 3.32 Halaman: Sub Menu Materi Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 4 of 19 Screen ID: S1-01
Screen Description : Pada halaman ini menampilkan sub menu dari PENGENALAN ALAT, yang berisi materi-materi yang akan dipilih.
Link From Screen ID : MPK-01 Link to Screen ID : S1-02 Color scheme : black, brown, red, white
Text Attribute : Arial Still Images : tekstur.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.33 Halaman : Materi Pengenalan Alat
Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 5 of 19 Screen ID: S1-02
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang jenis alat.
Link From Screen ID : S1-01 Link to Screen ID : S1-03 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.34 Halaman : Materi Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 6 of 19 Screen ID: S1-03
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang jenis alat,serta akhir dari slide materi dan menuju ke layar kuis.
Link From Screen ID : S1-02 Link to Screen ID : N1-00 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.35 Halaman : Input nama materi Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 6 of 19 Screen ID: N1-00
Screen Description : Pada tampilan layar ini menjelaskan tentang input nama sebelum melakukan kuis.
Link From Screen ID : S1-03 Link to Screen ID : S1-04 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.36 Halaman : Kuis Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 7 of 19 Screen ID: S1-04
Screen Description : Pada tampilan layar ini menampilkan pertanyaan-pertanyaan yang akan dijawab pengguna dimana setiap pertanyaan akan mendapat nilai/poin pada akhir kuis.
Link From Screen ID : S1-03 Link to Screen ID : N1-01 Color scheme : red, black, yellow
Text Attribute : Arial Still Images : note.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.37 Halaman : Hasil Kuis Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 8 of 19 Screen ID: N1-01
Screen Description : Pada tampilan layar ini menjelaskan skor dari jawabanserta pilihan antara kembali ke menu atau melihat daftar nilai
Link From Screen ID : S1-04 Link to Screen ID : S1-01,N1-01 Color scheme :brown, yellow
Text Attribute : Arial Still Images : note.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.38 Halaman : Daftar nilai materi Pengenalan Alat Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 6 of 19 Screen ID: N1-02
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang jenis alat,serta akhir dari slide materi dan menuju ke layar kuis.
Link From Screen ID : N1-01 Link to Screen ID : S1-01 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.39 Halaman : Sub Menu PemadamanApi Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 9 of 19 Screen ID: S2-00
Screen Description : Pada tampilan layar ini menjelaskan tentang pilihan menu dari materi dan simulasi pemadaman, apabila pengguna menekan tombol ‘Materi’, maka akan masuk ke halaman materi pemadaman, apabila menekan tombol ‘Simulasi’ maka aka masuk ke halaman simulasi.
Link From Screen ID : MPK-01 Link to Screen ID : S2-01 Color scheme : black, red, brown
Text Attribute : Arial Still Images : tekstur.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.40 Halaman : Materi Pemadaman Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 10 of 19 Screen ID: S2-01
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang Materi pemadaman.
Link From Screen ID : S2-00 Link to Screen ID : S2-02 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.41 Halaman : Materi Pemadaman Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 11 of 19 Screen ID: S2-02
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang Materi pemadaman
Link From Screen ID : S2-01 Link to Screen ID : N2-00 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.42 Halaman : Input nama materi Pemadaman Api Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 6 of 19 Screen ID: N2-00
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang jenis alat,serta akhir dari slide materi dan menuju ke layar kuis.
Link From Screen ID : S2-02 Link to Screen ID : S2-03 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.43 Halaman : KuisMateri Pemadaman Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 12 of 19 Screen ID: S2-03
Screen Description : Pada tampilan layar ini menampilkan kuis tentang pemadaman api
Link From Screen ID : S2-02 Link to Screen ID : S2-04 Color scheme :brown, yellow
Text Attribute : Arial Still Images : note.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.44 Halaman : Hasil Kuis Materi Pemadaman Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 13 of 19 Screen ID: S2-04
Screen Description : Pada tampilan ini menampilkan hasil nilai kuis
Link From Screen ID : S2-02 Link to Screen ID : S2-04, N2-01 Color scheme :brown, yellow
Text Attribute : Arial Still Images : note.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.45 Halaman : Daftar nilai materi Pemadaman Api Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 6 of 19 Screen ID: N2-01
Screen Description : Pada tampilan layar ini menjelaskan tentang materi-materi pembelajaran tentang jenis alat,serta akhir dari slide materi dan menuju ke layar kuis.
Link From Screen ID : S1-05 Link to Screen ID : S1-01 Color scheme : black, red, brown
Text Attribute : Arial Still Images : wood.jpg Audio : btn_klik.mp3 Video :-
Tabel 3.46 Halaman : Instruksi Simulasi
Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 14 of 19 Screen ID: I1-00
Screen Description :Pada tampilan layar ini menampilkan instruksi simulasi dari pemadaman. Jika user menekan lanjut maka sistem akan load ke halaman simulasi, jika user menekan kembali maka sistem kembali ke halaman submenu pemadaman
Link From Screen ID : S2-00 Link to Screen ID : P2-01 Color scheme :brown, yellow
Text Attribute : Arial Still Images : - Audio : Video : Animation :
Tabel 3.47 Halaman : Simulasi Pemadaman kebakaran Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 14 of 19 Screen ID: P2-01
Screen Description :Pada tampilan layar ini menampilkan simulasi dari pemadaman.
Link From Screen ID : I1-00 Link to Screen ID : MPK-01,P2-02, P2-03
Color scheme :brown, yellow Text Attribute : Arial
Still Images : - Audio : Video : Animation :
Tabel 3.48 Halaman Hasil “BERHASIL” Simulasi Pemadaman kebakaran Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 15 of 19 Screen ID: P2-02
Screen Description : Pada tampilan layar ini menjelaskan bahwa pengguna telah berhasil menyelesaikan simulasi, jika menekan ‘ENTER’ akan kembali ke sub menu pemadaman
Link From Screen ID : S2-02 Link to Screen ID : S2-04 Color scheme : white, black
Text Attribute : Arial Still Images : - Audio :- Video :-
Tabel 3.49 Halaman Hasil “GAGAL” Simulasi Pemadaman kebakaran Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 16 of 19 Screen ID: P2-03
Screen Description : Pada tampilan layar ini menjelaskan bahwa pengguna telah gagal menjalankan simulasi, jika menekan ‘ENTER’ akan kembali ke sub menu pemadaman, dan jika menekan ‘SPACE’ akan mengulang kembali simulasi.
Link From Screen ID : S2-02 Link to Screen ID : S2-00,P2-01 Color scheme :red, yellow
Text Attribute : Arial
Still Images : Paper Texture.jpg Audio :-
Video :-
Tabel 3.50 Halaman : Menu Pengaturan Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 17 of 19 Screen ID: PS-00
Screen Description :Halaman ini merupakan halaman pemberitahuan akan kontrol pada keyboard, kontrol mouse serta suara.
Link From Screen ID : PK06 Link to Screen ID : MPK-01 Color scheme : Background- coklat, hitam, abu - abu
Text Attribute : Arial
Still Images : kontrol_keyboard.png, mouse.png Audio : btn_klik.mp3
Video :- Animation : -
Tabel 3.51 Halaman : Pause Menu Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 18 of 19 Screen ID: PS-01
Screen Description : Halaman ini merupakan halaman dari pause yang berisi tombol ‘Lanjutkan’ apabila ingin melanjutkan simulasi dan tombol ‘Main Menu’ apabila ingin kembali ke main menu.
Link From Screen ID : PK014 Link to Screen ID : MPK-01,P2-01 Color scheme : background, coklat, hitam , abu - abu
Text Attribute : Arial Still Images :- Audio : - Video :- Animation : -
Tabel 3.52 Halaman : Konfirmasi Keluar Multimedia Storyboard
Project : Aplikasi Simulasi CAI Pemadam Kebakaran
Date: 1 Desember 2013
Screen : 19 of 19 Screen ID: PS-02
Screen Description : Halaman ini merupakan halaman konfirmasi keluar, jika pengguna menekan tombol ‘Ya’ maka aplikasi akan keluar, jika pengguna menekan tombol ‘Tidak’ maka aplikasi akan kembali ke menu utama.
Link From Screen ID : PK014 Link to Screen ID : MPK01 Color scheme : background, coklat, hitam , abu - abu
Text Attribute : Arial Still Images :- Audio : - Video :- Animation : -