2020

DMI
Yayan Yoga Dwi Swastika, S.Kom

Desain Media
XII MM 2
Interaktif
KD
3.2 Memahami (desain perancangan alur) untuk multimedia
interaktif berbasis halaman web dan media interaktif

IPK
3.2.1 Memahami perancangan alur produksi website dan
P-2
media interaktif

3.2.2 Menganalisis sitemap dan alur media interaktif

SMKN 1 PASURUAN
KOMPETENSI KEAHLIAN MULTIMEDIA
 MATERI PEMBELAJARAN
Tahap Pengembangan Multimedia

Agar multimedia dapat menjadi alat keunggulan bersaing, maka pengembangannya harus
mengikuti tahapan pengembangan sistem multimedia, diataranya adalah :
a. Mendefinisikan kebutuhan;
Analisis sistem mendefinisikan masalah kebutuhan pemakai dan menentukan bahwa
pemecahannya memerlukan multimedia. Masalah yang dipelajari Analis Sistem adalah masalah
yang dihadapai pengguna. Langkah-langkah yang harus dijalankan :
- mendefinisikan batasan dan sasaran
- mendefinisikan masalah yang dihadapi pengguna
- mengidentifikasi penyebab masalah dan titik keputusan
- mengidentifikasi pengguna akhir sistem - memilih prioritas penanganan masalah
- memperkirakan biaya dan manfaat secara kasar
- membuat laporan hasil dari pendefinisian masalah (proposal sistem)

b. Studi kelayakan;
Suatu studi yang digunakan untuk menentukan kemungkinan apakah pengembangan proyek
sistem multimedia layak diteruskan atau tidak.

c. Analisis kebutuhan sistem;

Apakah sistem yang sudah ada sudah memenuhi kebutuhan minimal.

d. Merancang konsep;
Analisis sistem dan pemakai mungkin bekerjasama denganprofesional komunikasi seperti
produser, sutradara dan teknisi video, terlibat dengan rancangan konsep yang menentukan
keseluruhan pesan dan memeriksa urutan utama.
Pembuatan Flowchart merupakan bagian dari perancangan konsep. Flowchart adalah bagian-
bagian yang mempunyai arus yang meggambarkan langkah-langkah penyelesaian suatu
masalah.Untuk multimedia interaktif flowchart meggambarkan secara langsung alur dari proyek
yang dibuat.Mulai dari awal program,input,proses,output di lanjutkan dengan keluar dari program.
 Bentuk-bentuk yang digunakan dalam flowchart.

Penerapan flowchart untuk program tutorial akan sangat membantu dalam menentukan
navigasi dari proyek multimedia interaktif yang dibuat.
Site map sangat berguna bagi proyek multimedia interaktif karena berupa daftar isi dan
menjelaskan apa yang akan terjadi ketika pengguna berinteraksi. Struktur navigasi adalah urutan
alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat
maka suatu aplikasi multimedia mempunyai suatu pedoman dan arah informasi yang jelas

e. Merancang isi;
Pengembangan terlihat dalam rancangan isi dengan menyiapkan spesifikasi aplikasi yang
rinci. pada tahap inilah media dipilih.

f. Menulis naskah;
Dialog atau semua elemen terinci dari urutan yang ditentukan.
Beberapa pertimbangan dalam menulis naskah multimedia agar efektif, antara lain:
• Memahami penglihatan, suara dan gerakan yang berhubungan dengan persepsi dari pesan yang
diingkan penonton.
• Kata yang ditampilkan dalam iklan menginterprestasikan gambar dan pemikiran yang lebih lanjut.
• Tampilan multimedia umumnya lebih efektif dalam penampilan daripada dalam perkataan, maka
kemampuan video untuk berkomunikasi dengan penonton harus lebih menonjol.
• Sejumlah adegan direncanakan hati-hati. Terlalu banyak adegan cenderung membuat penonton
bingung.
 • Pada dasarnya multimedia adalah media yang “Close-Up”. Layar multimedia umumnya terlalu
kecil untuk mengungkapkan secara rinci adegan dalam iklan.
• Menggunakan kata super (kata yang mudah diingat dan menarik perhatian) sebagai tema dasar,
sehingga penonton melihat dan mendengar keunggulan produk yang diiklankan.
• Jika memungkinkan tampilkan nama merk, jika ingin menonjol bidikan kamera pada kemasan
atau logo untuk membangun identifikasi merk.
• Komunikasikan satu ide dasar saja, hindari manfaat tambahan yang tidak terlalu menonjol.
• Pembacaan audio dengan keras untuk menarik perhatian
• Tulis kalimat yang pendek dan strukturnya tidak rumit (gunakan kata sehari-hari).

g. Merancang Storyboard
Storyboard merupakan serangkaian sketsa dibuat berbentuk persegi panjang yang
menggambarkan suatu urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi
multimedia.
Storyboard digunakan untuk:
- Memungkinkan tim dan klien (pengguna) memeriksa, menyetujui, dan meningkatkan
rancangan.
- Menjadi panduan bagi programmer dan graphics designer.
- Mengetahui elemen (material) multimedia yang dipakai.
- Menjaga konsistensi di sepanjang aplikasi multimedia.
- Memungkinkan rancangan diimplentasikan pada platform yang berbeda, karena storyboard
bersifat platform independent.

Storyboard perlu mengandung:

- Nama aplikasi (program) atau modul dan nomor halaman atau nomor layar.
- Gambar sketsa layar atau halaman beserta rincian objek-objek yang ada pada layar, meliputi:
Teks, Gambar, Animasi, Audio, Narasi, Video, Warna, penempatan, ukuran gambar, jika
penting, Warna dan font dari teks.
- Interaksi: pencabangan dan aksi-aksi lainnya (tombol).
Yang perlu diperhatikan dalam membuat storyboard:
- Storyboard dapat digambar dengan tangan, tidak perlu bagus dilihat asalkan cukup jelas
sebagai panduan bagi anggota tim proyek lainnya.
- Tersedia storyboard untuk setiap layar atau halaman.
- Semua rincian yang penting harus ditunjukkan.
- Teks dan narasi dapat sangat panjang, karena itu boleh ditulis pada lembar terpisah (script
document) asalkan disertai dengan nomor layar storyboard yang jelas.
- Setiap anggota tim produksi mempunyai salinan storyboard atau dapat mengakses storyboard
dengan mudah.
 Format Storyboard dan Komponen
Komponen-komponen penyusun storyboard interaktif antara lain
- Sketsa atau gambaran layar, halaman atau frame
- Warna, penempatan dan ukuran grafik, jika perlu
- Teks asli, jika ditampilkan pada halaman atau layar
- 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

h. Merancang grafik (grafis/gambar);

Grafik yang dipilih mendukung media. Latar belakang dan perlengkapan yang perlu digunakan
dalam merancang media
Warna merupakan elemen grafik yang sangat kuat dan provokatif, sehingga multimedia yang
dirancang sesuai dengan warna yang disukai pasar. Beberapa saran untuk merancang warna
yang efektif adalah sebagai berikut:
• Pilihlah warna sesuai dengan konsep yang anda desain
• Pilihlah warna yang akan membangkitkan semangat dan kepribadian pemesan multimedia anda.
• Periksalah di antara warna yang kontras dalam desain anda untuk memberikan dampak visual.
• Buat sketsa dengan banyak warna
• Desain dengan satu warna, kemudian dengan dua warna dan pada akhirnya dengan warna
penuh.
• Bedakan warna desain di monitor dan pada saat pencetakan
• Pelajari simbol warna pada budaya yang berbeda

Beberapa pertimbangan dalam merancang teks dalam tampilan multimedia, antara lain:
• Pertimbangkan format, teks dirancang untuk mudah dibaca
• Desain teks adalah hirarki visual, orang cenderung membaca elemen yang terbesar, baru
kemudian yang terkecil.
• Susunan teks harus menyempurnakan kemudahan dibaca
• Semua faktor dari spasi huruf, spasi kata, dan spasi garis mudah dibaca, komunikatif dan
ekspresif.
• Pertimbangkan bentuk huruf, pakailah huruf yang asli, pikirkan tentang hubungan positif/negatif
spasi
 • Bila melakukan pencampuran permukaan teks, harus disesuakand engan etnis terhadap pesan,
kontras, bobot, skala dan hirarki visual.
• Hindari sesuatu yang baru atau tipe huruf yang dekoratif.

i. Memproduksi sistem;
Pengembangan sistem produksi setiap bagian dan menyatukannya dengan sistem. Selain
mengembangkan perangkat lunak aplikasi, tugasnya mencakup kegiatan khusus seperti
menyunting video dan authoring.Authoring adalah pengintegrasian elemen-elemen yang terpisah
dengan menggunakan perangkat lunak siap pakai khusus.
Contoh tahapan pembuatan berdasarkan storyboard, dibuat rancangan antarmukanya
sebagai berikut:
1. Rancangan tampilan awal
Tampilan awal adalah animasi hitungan waktu mundur. Setelah hitungan mencapai
angka 1 maka akan tampil ucapan selamat datang bagi pengguna aplikasi.
2. Rancangan tampilan halaman judul.
Halaman judul menampilkan judul materi dalam aplikasi media
pembelajaran interaktif. Pada halaman ini sudah ditampilkan menu-menu
dalam aplikasi yaitu menu standar kompetensi, sejarah,
petunjuk, materi, kuis dan keluar. Dari halaman judul ini, pengguna dapat langsung
memilih salah satu menu yang ada dalam aplikasi. Jika pengguna memilih menu keluar, maka
aplikasi akan tertutup.
3. Rancangan tampilan halaman standar kompetensi.
Jika pengguna memilih menu standar kompetensi, maka akan tampil
halaman yang memuat informasi mengenai standar kompetensi. Pada
halaman ini terdapat tombol untuk lanjut ke halaman standar kompetensi
berikutnya dan tombol kembali untuk menuju halaman sebelumnya.
Terdapat juga tombol home yang jika dipilih akan membawa pengguna kembali ke
tampilan judul.
4. Rancangan tampilan menu sejarah.
Sejarah sangat panjang dan dapat dikelompokkan
berdasarkan zamannya. Oleh karena itu, pada menu sejarah terdapat beberapa tombol
pilihan untuk mempelajari sejarah sesuai dengan zamannya. Pengguna tinggal memilih salah
satu zaman yang akan dipelajari, maka akan tampil halaman sejarah sesuai dengan
zamannya.
5. Rancangan tampilan menu kuis
Pada menu kuis terdapat form fill in. Pengguna harus memasukkan nama dan NIM, setelah
itu menekan tombol lanjut. Jika tombol lanjut ditekan, maka akan akan menuju ke halaman
yang menampilkan soal-soal kuis.
j. Melakukan tes pemakai;
Analisis sistem mendidik pemakai dalam menggunakan sistem dan memberikan kesempatan
bagi pemakai untuk akrab dengan semua fitur.

k. Menggunakan sistem;
Pemakai mengunakan sistem.

l. Memelihara sistem;
Seperti sistem berbasis komputer lain, sistem multimedia harus dipelihara. perbedaan
utamanya adalah pemakai tidak dapat diharapkan untuk melakukan pemeliharaan, memelihara
sistem merupakan tugas dari spesialis dan profesional

CONTOH:
Multimedia pembelajaran pada saat ini merupakan suatu kebutuhan bagi setiap guru maupun
pendidikan yang akan melaksanakan pembelajaran di era digital saat ini. Hampir setiap sekolah
mempunyai fasilitas ICT di tiap kelas yang harus dimanfaatkan dalam proses pembelajaran. Untuk
merancang multimedia pembelajaran interaktif diperlukan 2 dasar utama yang harus di pahami
untuk memudahkan dalam pembuatan multimedia yaitu Flowchart dasar dan Storyboard dasar
berikut salah satu contoh rancangan multimedia berupa flowchart dasar dan storyboard:

1. Contoh SKEMA multimedia interaktif

2. contoh storyboard.
a. cover

b. Kompetensi

c. Materi
d. Latihan

e. Pustaka

f. Author
Contoh flowchart
 TUGAS 2
1. Browsing dengan kata kunci
- Flowchart media interaktif
- Storyboard media interaktif
2. Pilih salah satu contoh flowchart dan storyboard media interaktif
3. Buat ulang flowchart dan storyboard media interaktif tersebut mengunakan Microsoft word
4. Simpan flowchart dengan nama file FC_No.absen_NamaSiswa.doc/docx
5. Simpan storyboard dengan nama file SB_No.absen_NamaSiswa.doc/docx
6. Kumpulkan melalui link yang tersedia pada google site