DESAIN MULTIMEDIA INTERAKTIF

SMK TUNAS BANGSA DEPOK

Kompetensi Dasar :
3.10 Menerapkan pembuatan produk multimedia interaktif berbasis waktu
4.10 Mencipta produk multimedia interaktif berbasis waktu

Materi
Pembuatan Produk Multimedia Interaktif
 Perancangan
 Pembuatan
 Pengujian
 Publishing
 KONSEP PERANCANGAN

Konsep Perancangan Multimedia Interaktif

Multimedia interaktif yang akan dibuat nanti dibuat sebagai cara baru
media informasi yang atraktif dan menarik. Setelah menganalisa data
yang ada terutama pada kebudayaan dan hasil karya ketiga negara
yaitu jepang, china dan korea, bahwa banyak unsur yang dapat
diambil untuk dijadikan nilai positif guna perancangan multimedia
interaktif nanti. Konsep dasar yang diambil nanti adalah minimalis,
modern dan elegan serta susunan komposisi navigasi tombol
interaktif yang mudah untuk operasikan. Dengan mengambil
beberapa unsur karakter dari masing masing negara sebagai identitas
diharapkan setiap orang yang melihatnya terkesan unik dan menarik.
Target audience
Adapun target atau sasaran audien multimedia interaktif
dikhususkan untuk:
a. Demografi
- Dewasa usia 19 – 35 tahun
- Status Ekonomi Sosial: Menengah atas
- Pekerjaan (Siswa SMA, Mahasiswi/a, Bos)
b. Geografi
- Jabodetabek khususnya
- Daerah-daerah metropolitan
- Indonesia umumnya
c. Psikografi
- Calon Konsumen Kompak
- Pelaku bisnis Kompak
 Perancangan site map

Opening

Halaman Depan

Tentang Kompak Peluang Usaha Produk Foto Galeri

Sambutan Marketing plan Jepang China Korea Foto tour

Cabang Kompak Kompak Business Foto Training

System
Kesaksian

Ending

Kosep Desain Layout

Konsep desain layout pada halam menu multimedia interaktif
nanti adalah desain memiliki karakter mengambil dari ketiga
begara yaitu, Jepang, China dan Korea. Agar para audiennya
nanti lebih produk MLM kompak, bahwasannya sebagian
besar berasal dari ketiga negara tersebut.

Konsep Visual Layout

Setelah konsep desain didapat maka dalam layout halaman
multimedia interkatif nanti terdapat didalamnya unsur-unsur
grafis yang menyatu dengan komposisi diharapkan. Berikut
adalah konsep visual layoutnya.
a. Komposisi
Pengaturan letak atau bidang rancangan media disajikan
secara terus simple mudah dibaca dan tidak rame dengan
gambar animasi dan teks, banyaknya pemberian ruang
kospng pada kompisisi layout agar mata tidak lelah
membacanya dan enak dilihat.

b. Videografi
Unsur videografi dalam multimedai interaktif nanti hanyalah
sebagai pelengkap dan bukan halam utama, vdeo grafi
terdapat pada opening sebelum masuk halaman menu
utama kemudian halaman tentang Kompak yaitu video
sambutan vice president director serta kesaksian produk
pada halaman produk.

c. Konsep Typografi
Selain gambar dan video tentunya unsur tipografi sangat
penting untuk dipertimbangkan karena tanpa mem-
pertimbangkan typografi yang baik maka konsep desain
yang diharapkan kurang tercapai. Untuk mencapai desain
minimalis, clean, simple dan elegan maka saya memilih
jenis huruf myriad pro. Alasan pemilihan tipe huruf tersebut
adalah stylenya yang simple mudah dibaca.
d. Konsep warna
Warna yang dipakai pada halaman multimedia yaitu:
1. Halaman pada setiap menu berlatar belakang abu-abu,
memberikan kesan netral dan clean dan mudah di
baca.
2. Pada tulisan agar muda dibaca dan kotras dengan
background saya pilih yaitu warna hitam.
3. Pada setiap tombol menu, mengambil konsep warna
dari pakian korea yang disebut handbok yang memiliki
keaneka ragaman warna. Oleh sebat itu saya
mengambil beberapa warna untuk dari tombol 4 menu
yang aktif berupa bunga sakura yaitu hijau, orange,
pink dan biru. Sedangkan warna merah pada daun
sakura lainnya mengambil unsur warna dari china.

e. Konsep Animasi & Transisi

Konsep animasi & transisi dibuat sesederhana mungkin
agar tidak tersesan ramai dan membingungkan.

Konsep Audio
Konsep audio yang pakai nanti terdapat dalam beberapa
bagian yaitu
a. Opening
Bagian musik/audio yang terdapat pada video opening
sebelum masuk pada halaman menu utama. Konsep audio
yang pakai nanti adalah audio yang terkesan ngebit dan
bersemangat.
b. Halaman Menu utama
Audio yang dipakai untuk backsound pada multimedia
interaktif nanti yaitu musik yang bernuansa asia yaitu
Jepang China dan Korea.
 c. Tombol
Pada tombol navigasi nanti diberikan sound efek agar
membedakan bahwa tembol tersebut aktif.

Storyboard

No. KET VISUAL AUDIO

1. Animasi:
Logo Perusahaan Kompak

Insert teks/Image:
- Memberikan Peluang Usaha
Opening Mandiri Music
- Klip video animasi foto-foto
tentang Perusahaan Kompak

Klik Tombol: Skio Intro

Masuk Kehalaman Utama

2. Animasi:
1. Muncul bunga sakura
Halaman Menu Dan button menu
Utama: 2. Muncul logo Kompak
Backsound
Tentang Kompak, 3. Muncul image pendukung.
Peluang Usaha, instrument
Produk, Insert teks/Animasi (replay):
Foto galeri Selamat datang di dunia
Sukses Kompak

Animasi:
1. Muncul bunga sakura
Dan button menu utama lain.
2. Muncul logo Kompak
Halaman Menu: 3. Muncul image gedung
Backsound
3. (Effect Button)
Insert teks scrol: Instrument
Tentang Kompak Profil perusahaan

Menu Pendukung:
Sambutan Vice President
Cabang Kompak
 Animasi:
1. Muncul bunga sakura
Dan button menu utama lain.
2. Muncul logo Kompak
Halaman Menu 3. Muncul image pendukung
(Effect button) Backsound
4.
Insert teks scrol: instrument
Peluang usaha Isi penjelasan

Menu Pendukung:
Marketing Plan
Kompak Busines System
Animasi:
1. Muncul bunga sakura
Dan button menu utama lain.
2. Muncul logo Kompak
3. Muncul image produk

Halaman Menu Insert teks scrol:

(Effect button) Isi penjelasan Backsound
5.
instrument
Produk Menu Scrol:
Image produk lainnya

Menu Pendukung:
Kesaksian
Kategori produk: Jepang, China
dan Korea

Animasi:
1. Muncul bunga sakura
Dan button menu utama lain.
Halaman Menu 2. Muncul logo Kompak
(Effect button) 3. Muncul foto Backsound
6.
Instrument
Foto Galeri Insert teks:
Caption foto

Scrol daftar foto-foto

Klik Tombol: Close

7. Ending Scene penutupan, muncul logo Sound effect
(Effect button) kompak
Perancangan Layout

Konsep perncangan layout dirancang clean dan simple

mudah dan jelas dibaca. Draft tampilan layout terdiri 1
halaman depan dan 4 halaman menu utama yaitu tentang
kompak, peluang usaha, produk dan foto galeri.

a. Draft layout halaman depan / menu utama

Perancangan desain layout pada halaman depan/
menu utama didesain dengan konsep penggabungan
karakter jepang, china dan korea. Dimana pada halaman
depan saya ambil elemen bunga sakura pada jepang,
warna merah dan sulur dari china dan warna hijau, pink,
kuning dan biru dari korea. Icon bunga sakura saya jadikan
objek utama dalam unsur gambar yang terdapat pada
halam multimedia, icon jepang yang sudah familiar itu
sekaligus saya gunakan sebagai tombol menu untuk
mengakses halaman – halaman berikutnya.
(terlampir pada halaman berikutnya)
 d

b
a
c

Sket menu utama / halaman depan

Keterangan:
a. Animasi bunga sakura
b. Bungan sakura sebagai button
(kuncup/mengembang: Mouse over)
c. Animasi teks
d. Animasi Logo
e. Image pendukung

b. Draft layout menu halaman tentang kompak

Pada halaman sub menu nuansa desainnya masih
sama, untuk menjaga konsistensi desain mengambil
benang merah yaitu bunga sakura diletakkan berbeda
posisi dari halaman utama. Untuk memudahkan navigasi
tiap halaman sub menu terdapat sub menu lainnya. Hal ini
bertujuan agar dapat mudah perpindah dari sub menu
 yang satu ke yang lainnya. Untuk dapat kembali ke
halaman depan terdapat tombol dengan simbol sakura
pada pojok kiri atas.

f d
b
c e
a

Sket rancangan menu tentang kompak

Keterangan:
a. Image
b. Title menu
c. Teks scroll
d. Bunga sakura sebagai button
(kuncup/mengembang: Mouse over)
e. Animasi bunga sakura
f. Kembali ke menu utama
 c. Draft layout menu halaman peluang usaha

e
d f
g b

a c

Sket rancangan menu peluang usaha

Keterangan:

a. Image
b. Title Menu
c. Teks penjelasan
d. Sub menu pendukung
e. Bunga sakura sebagai button
(kuncup/mengembang: Mouse over)
f. Animasi bunga sakura
g. Kembali ke menu utama

d. Draft layout menu halaman Produk

(halaman berikutnya)
 c d e
h b

Keterangan:

a. Image produk
b. Title Menu
c. teks scrol
d. Bunga sakura sebagai button
(kuncup/mengembang: Mouse over)
e. Animasi bunga sakura
f. Menu produk scrol
g. Tombol kesaksian konsumen (video)
h. Kembali ke menu utama

e. Draft layout menu halaman (halaman

berikutnya)
 c
f
b d e

Sket rancangan menu

Keterangan:

a. Image
b. Title Menu
c. Sub menu scrol foto-foto
d. Bunga sakura sebagai button
(kuncup/mengembang: Mouse over)
e. Animasi bunga sakura
f. Kembali ke menu utama
g. Penjelasan foto

Perancangan tombol navigasi

a. Tombol menu utama
Perancangan tombol navigasi pada 4 menu utama yaitu
tentang kompak, peluang usaha, produk dan galeri foto di
buat dengan stilasi bunga sakura yang menempel pada
ratingnya. Dengan keadaan menguncup dan kemudia
apabila tersentuh mouse akan mengembang pertanda
 bahwa bunga sakura tersebut aktif untuk berpindah ke menu
lainnya.

b. Tombol menu lain

Tombol pendukung menu lainnya di buat berbeda dengan
tombol menu utama, agar terkesan variatif tidak monoton
dan membosankan.

TUGAS
Buatlah Rancangan Desain Media Interaktif seperti Contoh pada Materi Diatas yang meliputi:
1. Story Board (Dari Mulai Halaman Loading, Materi,Vidio,Quiz, Profil)
2. Desain Layout
Materi Media Interaktif Bebas.(Tutorial, Profil Company, Pembelajaran untuk jenjang
SD/SMP/SMA/SMK, Game Interaktif dl)