• Tidak ada hasil yang ditemukan

Story Board

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 77-100)

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 : -

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 77-100)

Dokumen terkait