Desain

Media
Interaktif

Desain/ Perancangan Alur Untuk

Multimedia Interaktif Berbasis
Halaman Web dan Media Interaktif M
XI M
Kompetensi Dasar (KD)
Indikator Pencapaian Kompetensi(IPK)
3.2. Memahami (desain/ perancangan alur)
untuk multimedia interaktif berbasis
halaman web dan media interaktif
3.2.1 Menjelaskan perancangan storyboard
4.2. Membuat (desain/perancangan alur) 3.2.2 Menjelaskan perancangan Flowchart
untuk multimedia interaktif berbasis
halaman web dan media interaktif 3.2.3 Menjelaskan perancangan struktur flowchart Storyborad
3.2.4 Menjelaskan komponen storyboard

4.2.1 Membuat storyboard

4.2.2 Membuat Flowchart
4.2.3 Menjalankan struktur flowchart
4.2.4 Membuat komponen storyboard
4.2.5 Membuat template Storyborad

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 2
Pendahuluan
Perkembangan teknologi saat ini sangat Pengertian storyboard
berpengaruh dalam berbagai bidang, industry,
Storyboard secara sederhana bisa diartikan
bisnis, pendidikan, penjualan, layanan informasi sebagai sketsa gambar. Pada umumnya storyboard
berisi penjelasan visual dan audio dari masing-
dan hiburan, seperti perfilman, games dalam
masing alur dalam flowchart yang dirinci untuk
bentuk pemanfaatan aplikasi computer, setiap frame/slide berupa tabel (baris-kolom), setiap
kolom di dalamnya mewakili satu tampilan di layar
smartphone dan android.
monitor.
storyboard merupakan konsep komunikasi dan
ungkapan kreatif, teknik dan merupakan media
untuk menyampaikan pesan dan gagasan secara
visual, termasuk audio dengan mengolah elemen
desain grafis berupa bentuk dan gambar, huruf dan
warna, serta tata letaknya, sehingga pesan dan
gagasan dapat di terima oleh sasarannya

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 3
Tujuan penggunaan storyboard
Tujuan penggunaan storyboard :
1. Membantu memikirkan detail diam dan
alam keseluruhan dari game. (versi
games)
2. Menggabungkan konsep menjadi
dokumen desain ( semacam movie script)
3. Sebagai acuan kameramen dalam
mengambil gambar secara tepat ( versi
film)
4. Sebagai acuan sutradara dalam
mengarahkan crew untuk mengambil
gambar yang tepat, waktu yang tepat dan
tempat yang tepat.
Fungsi storyboard animasi adalah sebagai
berikut :
1. Merencanakan sequance sinematik.
2. Membangun animasi.
3. Menunjukkan aksi aksi komplek.
4. Menunjukkan aksi aksi player.
Fungsi Storyboard multimedia
interaktif adalah:
1. Untuk memperjelas flowchart
2. Sebagai pedoman/acuan bagi animator,
programmer, narrator dan tim lain
3. Merupakan dokumen tertulis
4. Bahan pembuatan manual book / petunjuk
penggunaan.
Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson
Nurdin/ SMK Bina Putra
4
 XI MM 1. Gambar yang disiapkan disertai dengan
penjelasan dan narasi
2. Pembuatan storyboard diawali dengan gambar
visual
3. Narasi digunakan untuk melengkapi hal sulit
yang tidak bias diwakili dengan bentuk visual
storyboard 4. Bahasa lisan yang digunakan terutama yang

multimedia interaktif dibaca oleh narrator

5. Gunakan struktur kalimat yang sederhana
6. Gunakan symbol yang sederhana dan mudah
Ketentuan umum storyboard dipahami ol;eh semua orang
multimedia interaktif 7. Gunakan gambar dalam bentuk yang menarik
serta komposisi yang tepat dan mudah
dipahami.

Jens
Jens Martensson
Martensson 5
Komponen-komponen penyusun
storyboard interaktif antara lain :

- Sketsa atau gambaran layar, halaman atau frame Format/ template storyboard :
1. Kolom
- Warna, penempatan dan ukuran grafik, jika perlu
2. Layout
- Teks asli, jika ditampilkan pada halaman atau layar
3. Blanko
- Warna, ukuran dan tipe font jika ada teks
- Narasi jika ada
- Animasi jika ada
- Video jika ada
- Audio jika ada
- Interaksi dengan penggunaan, jika ada
- Dan hal-hal yang perlu diketahui oleh staf produksi

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson
Nurdin/ SMK Bina Putra
6
 Contoh Storyboard
N Sce Gambar Keterangan Dialog Wakt
o ne u
   1  Opening    14
1 Detik

   2    Suasana pagi yang  Kancil :   7

1 cerah terdengar Aku adalah hewan yang cerdik dan pintar, tidak ada hewan yang Detik
kicauan burung saling menandingiku dihutan ini
bersautan. Ada seekor
kancil yang berjalan
menelusuri hutan
sambil berteriak-teriak
menyombingkan diri
   3  Sampai ditepi sungai  Siput :   10
2 dan bertemu dengan Hai … Kancil mau pergi kemana kamu ? Detik
siput
Kancil :
  Hai juga, aku hanya sedang ingin berjalan-jalan saja

   4   Siput :   16
2 Sepertinya kamu sedang bergembira kancil… ? Detik
Tadi aku dengar kamu berteriak-teriak
Kancil :
Ya, aku hanya memberitahukan kepada semua penghuni hutan ini, kalo aku
  hewan yang paling cerdik dan pintar, tidak ada hewan yang bisa
menandingiku
Siput :
Jangan sombong kamu, masih ada hewan yang lebih cerdik dan pintar
dihutan ini
Bentuk Kolom

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 7
 Title Area

Content Area

Sequence No:
Navigation
Area

Description:
………………………..

Bentuk Layout

Jens
Jens Martensson
Martensson 8
Bentuk Blanko Storyboard

Jens
Jens Martensson
Martensson 9
Storyboard “Kancil dan Siput”
No Scene Gambar Keterangan Dialog Waktu
 1  1  Opening    14
Detik

 1  2    Suasana pagi yang cerah  Kancil :   7

terdengar kicauan burung saling Aku adalah hewan yang cerdik dan pintar, tidak ada hewan Detik
bersautan. Ada seekor kancil yang yang menandingiku dihutan ini
berjalan menelusuri hutan sambil
berteriak-teriak menyombingkan
diri
 2  3  Sampai ditepi sungai dan bertemu  Siput :   10
dengan siput Hai … Kancil mau pergi kemana kamu ? Detik

Kancil :
  Hai juga, aku hanya sedang ingin berjalan-jalan saja
 2  4   Siput :   16
Sepertinya kamu sedang bergembira kancil… ? Detik
Tadi aku dengar kamu berteriak-teriak
Kancil :
Ya, aku hanya memberitahukan kepada semua penghuni hutan
  ini, kalo aku hewan yang paling cerdik dan pintar, tidak ada
hewan yang bisa menandingiku
Siput :
Jangan sombong kamu, masih ada hewan yang lebih cerdik
dan pintar dihutan ini

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 10
Tugas membuat storyboard untuk Media Interaktif

Buatlah storyboard materi pembelajaran untuk diterapkan/ dibuat di Ms. PowerPoint,

dengan langkah :
1. Siapkan kertas gambar/ buku tulis, pensil, penghapus, penggaris atau alat bantu
gambar yang dibutuhkan serta Camera Handphone
2. Gunakan bentuk Storyboard Layout seperti gambar pada slide ke-8 (Layout)
3. Tentukan judul materi pembahasan sesuai Kompetensi Dasar (KD) dan Indikator
Pencapaian Kompetensi (IPK)
4. Buatlah storyboard sesuai langkah nomor 1,2 dan 3 (bentuk penyajian storyboard
bebas)
5. Hasil gambar kalian silahkan di foto dan di upload ke googleclassroom

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 11
Terimaksih
Selamat Mengerjakan

Tetaplah bersyukur, setiap orang hidup dengan perjuangannya

masing-masing.

Dan berdo’a semoga Allah SWT mengangkat semua penyakit dan

wabah virus corina COVID-19 di negeri ini.

Aamiin….

Nurdin/ SMK
Jens
Jens Bina Putra
Martensson
Martensson 12