11/5/2018

STORYBOARD
(Multimedia Interaktif – Media Pembelajaran)

Pipin Piniman, S. Kom., M. Pd.

Nip. 19850316 201101 1 002
===============================
Mapel – Desain Multimedia Interaktif
Multimedia – SMKN 1 Rancah

MATERI

1. Flowchart
2. Struktur Navigasi
3. Storyboard

1
 11/5/2018

Perancangan Multimedia Interaktif

Perancangan adalah penggambaran, perencanaan dan

pembuatan sketsa, flowchart atau pengaturan dari
beberapa elemen yang terpisah ke dalam satu kesatuan
yang utuh dan berfungsi;

Macam-Macam Perancangan

Desain berbasis multimedia

• Disain ini dikembangkan dari metode perancangan pembuatan film
menggunakan storyboard.
• Saat ini karena multimedia memerlukan aspek interaktif, sehingga
perlu dilengkapi dengan flowchart.

Desain Struktur Navigasi

• Memberikan gambaran link dari halaman satu kehalaman lain.
• Digunakan pada multimedia non linear, dan adaptasi dari disain web.

Desain Berorientasi Obyek

Adalah metode perancangan dimana komponen multimedia dinyatakan
sebagai obyek.

2
 11/5/2018

Perancangan yang baik

• Perancangan yang baik yaitu dengan

menggabungkan metode diatas sehingga
mendapatkan gambaran dan pemahaman yang
lengkap.
• Contoh : pembuatan story board dilengkapi
dengan disain struktur navigasi agar
mendapatkan struktur sistem secara
keseluruhan.

Struktur Navigasi

Struktur Navigasi merupakan struktur

atau alur informasi dari suatu program
yang merupakan rancangan hubungan
(rantai kerja) dari beberapa area yang
berbeda dan dapat membantu
mengorganisasikan seluruh elemen
pembuatan Multimedia Interaktif.

3
 11/5/2018

Struktur Navigasi

Struktur Navigasi Struktur Linear

Struktur Non -Linear

Struktur Hierarchical

Struktur Composit

Struktur Linear

 Struktur yang hanya mempunyai satu rangkaian cerita

berurut.
 Tampilan yang dapat ditampilkan pada struktur jenis ini
adalah satu halaman sebelumnya atau satu halaman
sesudahnya
 Biasanya struktur ini digunakan Multimedia Presentasi
karena tidak menuntut keinteraksian tetapi hanya
memerlukan keindahan dan kemudahan menampilkan data
sebagai informasi.

4
 11/5/2018

Struktur Linear

Struktur Non-Linear

 Struktur navigasi non linear ( tidak berurut ) merupakan

pengembangan dari struktur navigasi linear.
 Pada struktur ini diperkenankan membuat navigasi
bercabang.
 Percabangan yang dibuat pada struktur linear ini berbeda
dengan percabangan pada struktur hierarki, karena pada
percabangan non linear ini walaupun terdapat percabangan,
tetapi tiap-tiap tampilan mempunyai kedudukan yang sama
tidak ada master page dan slave page.

5
 11/5/2018

Struktur Non-Linear

Struktur Hierarchical

 Struktur navigasi hierarchi ( bercabang ) merupakan

suatu struktur yang mengandalkan percabangan
untuk menampilkan informasi yang berdasarkan
kriteria tertentu.
 Informasi pada halaman utama disebut parent dan
informasi pada cabangnya disebut child.

6
 11/5/2018

Struktur Hierarchical

Struktur Composite

 Struktur Navigasi Composite ( campuran ) merupakan

struktur gabungan dari ketiga struktur sebelumnya.
 Struktur ini disebut juga struktur navigasi bebas.
 Kelebihan dengan menggunakan struktur navigasi ini
adalah suatu aplikasi mampu memberikan keterkaitan
informasinya lebih baik.

7
 11/5/2018

Struktur Composite

Penugasan Struktur Navigasi

8
 11/5/2018

Flowchart view

Pengertian
• Disebut juga diagram tampilan
• Adalah diagram yang memberikan
gambaran alir dari suatu scene (tampilan)
ke scene lainnya
• Digunakan untuk pengembangan
multimedia interaktif.

Flowchart view

• Dalam flowchat view dapat dilihat komponen

yang terdapat dalam suatu scene dengan
penjelasan yang diperlukan.
• Transisi dari scene ke scene lainnya
disebutkan, disamping hubungan antara satu
scene dengan scene lain yang dinyatakan
dengan garis berikut tanda panah.
• Hotkey dapat berupa teks, image, atau button
yang digunakan untuk menghubungkan scene
satu dengan lainnya.

9
 11/5/2018

Contoh flowchart view

Scene 1 Scene 2 Button Scene 3 Button

Buton Clik 1 Click
Opening Home
Click Button Topik 1
Click 2

Scene 5
End
Close Scene
Scene 4
Button
Topik 2 Click

Penugasan Flowchart

10
 11/5/2018

Storyboard Media Pembelajaran

SKENARIO STORYBOARD

Menyusun materi yang akan Storyboard dibuat untuk

diajarkan pada pembelajaran
beserta cara penyampaiannya
dengan memberikan deskripsi
materi dan media
penyampainya dengan
menggunakan Suara, Gambar,
Animasi, atau Video
menjelaskan Skenario secara
lebih detail dari detik demi
detik.
Storyboard menjelaskan
tentang susunan materi yang
disampaikan pada detik demi
detik beserta suara, grafis,
animasi, dan video yang
dibutuhkan.

Pengertian Storyboard (Media Pembelajaran)

 Merupakan gambaran dari media yang

akan dibuat, maka harus mudah
dimengerti oleh semua pihak.
 Merupakan rangkaian gambar manual
yang dibuat secara keseluruhan
sehingga menggambarkan suatu media
 Merupakan deskripsi dari setiap scene
yang secara jelas menggambarkan
obyek multimedia serta perilakunya.

11
 11/5/2018

Manfaat story board

• Bagi pengembang dan pemilik  berfungsi

sebagai visual test yang pertama-tama
dari gagasan secara keseluruhan dapat
dilihat apa yang akan disajikan.
• Bagi staff pembuat MM  merupakan
pedoman dari aliran pekerjaan yang akan
dilakukan.
• Bagi sponsor  gambaran dari suatu
multimedia yang akan diproduksi.

Pembuat storyboard

• Untuk project yang kecil

bisa dibuat oleh produser
sendiri
• Untuk perusahaan yang
besar ada departemen
khusus storyboard (team)

12
 11/5/2018

Contoh Storyboard

Contoh storyboard

13
 11/5/2018

Contoh Storyboard

Contoh storyboard
SCENE VISUAL DESKRIPSI AUDIO DURASI LINK

Pada scene 1 (menu Scene 2

APLIKASI PEMBELAJARAN
IBADAH HAJI BERBASIS
utama) terdapat menu- Scene 3
MULTIMEDIA
menu pilihan, yaitu Lagu Raihan Scene 4
Definisi Haji User
1 Pendaftaran Haji
definisi haji, pendaftaran berjudul Scene 5
Perjalanan Haji Dependent
Haji Tamattu'
Haji Ifrad background
haji, perjalanan haji, haji “Pergi Haji” Scene 6
Haji Qiran
EvaluasiI
ka'bah

EXIT tamattu’, haji ifrad, haji Scene 7

qiran, dan evaluasi. Scene 8

Menu definisi haji berisi Scene 1

penjelasan mengenai Lagu Raihan Scene 2.1
Teks judul

Definisi Haji
2 Syarat Haji
Rukun Haji
Teks
Teori
teori haji meliputi definisi berjudul User Scene 2.2
Wajib Haji
haji, syarat haji, rukun “Pergi Haji” Dependent Scene 2.3
Halaman Utama haji, dan wajib haji. Scene 2.4

Teks judul
Menu definisi haji Scene 1
Definisi Haji
menjelaskan pengertian Lagu Raihan Scene 2
2.1 Teks Teori
mengenai haji dalam berjudul User Scene 2.2
bentuk teks. “Pergi Haji” Dependent Scene 2.3
Halaman Utama
Scene 2.4

14
 11/5/2018

Penugasan Storyboard

15