Desain
Media
Interakti
f
Izza Rahmat Sanjaya
Dimas Nur Riffa’i
MENU
Bab 1 Bab 3
Bab 2 Bab 4
Bab 5 Bab 7 Bab 9
Bab 6 Bab 8
BAB 1
Konsep Multimedia Interaktif Berbasis Web
A. Definisi dan Konsep
dasar Multimedia
B. Penerapan dan Pemanfaatan
Multimedia Interaktif Berbasis
Web
Menu
A. Definisi dan Konsep dasar Multimedia
Definisi
Desain multimedia interaktif adalah konsep
yang hasil desainnya dikatakan interaktif bila
terdapat masukan (input) dari penggunanya.
Menu
Pengertian Desain Multimedia Berbasis
Halaman Web
Sama halnya definisi desain multimedia. Hanya saja, yang
digunakan sebagai media interaksi dengan pengguna adalah
sebuah website atau aplikasi online yang dapat diakses oleh
pengguna.
Menu
B. Penerapan dan Pemanfaatan Multimedia
Interaktif Berbasis Web
1. Dunia Pendidikan
2. Dunia Industri
3. Dunia Advertising
4. Dunia Entertaining
Menu
Bab 2
Merancang Desain Alur Multimedia Berbasis Web
A. Definisi Storyboard
B. Komponen Storyboard
Menu
A. Definisi Storyboard
Storyboard merupakan penuangan ide dalam bentuk
visual yang ditampilkan untuk memperjelas naskah.
Menu
B. Komponen Storyboard
1. Judul 2. Subjudul 3. Visual
4. Audio 5. Dialog atau Action
6. Properties
Menu
Bab 3 Prinsip – Prinsip Desain User Interface
A. Definisi Desain User Interface
B. Tujuan dan Manfaat Desain User Interface
Menu
A. Definisi Desain User Interface
User Interface atau dalam Bahasa Indonesia disebut antarmuka
pengguna merupakan cara interaksi manusia dan komputer (Human
Computer Interaction, HCI). User Interface dapat di definisikan
sebagai tampilan, termasuk desain interaksi dan struktur informasi
yang menghubungkan pengguna dengan sistem operasi sehingga
komputer dapat dioperasikan.
Menu
B. Tujuan dan Manfaat Desain User Interface
Tujuan User Interface
• Memudahkan masukan data oleh pengguna
• Memberikan tampilan hasil pemrosesan data yang jelas
• Membuat program atau aplikasi menjadi lebih menarik
• Mempermudah pembacaan data
• Mengefisiensikan pekerjaan pengguna
• Memberikan kesan familiar pada pengguna
• Memberikan respon yang tepat pada pengguna
• Menghilangkan ambiguitas atas perintah pada sistem
• Meminimalisasi kesalahan pengguna
Menu
B. Tujuan dan Manfaat Desain User Interface
Manfaat User Interface
User Interface bermanfaat sebagai penghubung yang
menerjemahkan informasi antara pengguna dan sistem.
Dengan kata lain, User Interface dapat di artikan pula
sebagai mekanisme integrasi total dari perangkat lunak dan
keras yang membentuk experience penggunanya.
Menu
Tipe- tipe User Interface
CLI (Command Line Interface)
GUI (Graphical User Interface)
Touchscreens
Direct Manipulation Interface
Gesture Interfaces Search Interface
Voice User
Menu
BAB 4 Aplikasi Desain Multimedia Berbasis Halaman Web & Media Interaktif
A. Pengenalan Aplikasi
Pada Bab sebelumnya, ada berbagai aplikasi multimedia
yang biasa digunakan baik yang berbayar maupun yang
tidak. Fungsinya pun beragam, misalnya untuk membuat
video, animasi, gambar hingga audio.
Menu
B. Fungsi-Fungsi pada Aplikasi Berbasis Halaman Web
1. Flash 2. DreamWeaver
Memiliki fungsi: Memiliki fungsi:
- Teknik membuat animasi - Kemampuan pengelolaan web
- Mampu menyisipkan video sehingga memudahkan mengatur
keseluruhan elemen dalam web.
lengkap dengan playback FLV - Mengevaluasi web dengan
- Terdapat fasilitas ActionScript kompabilitas browser, mengecek
broken link, serta melihat perkiraan
waktu untuk mengunduh halaman web
tersebut.
Menu
C. Halaman/Slide
1. Mengenal Prinsip Desain pada Halaman Web
Prinsip-Prinsip yang harus kita pegang:
- Kesederhanaan
- Pemilihan warna yang tidak tajam
- Penggunaan huruf non-serif atau disebut dengan san-serif.
- Penggunaan ukuran gambar yang tidak terlampau besar karena diakses melalui
konektivitas internet, dan
- Penggunaan efek-efek yang tidak memberatkan tampilan saat dipanggil.
Menu
2. Mengenal Prinsip Desain pada SlideI
Prinsip ini telah dipaparkan oleh ahli desain slide, Garr Reynold & Robin Williams:
- Signal to noise ration (tidak memasukkan unsur yang kurang relevan
- Picture priority effect (menyarankan pengguna gambar)
- Empty space (menyediakan suatu ruangan kosong pada slide)
- Contrass (menonjolkan suatu pesan tertentu pada tampilan slide
- Alignment (menempatkan unsur slide secara beraturan dan seimbang
- Repetition (pengulangan elemen yang sama dalam setiap slide
Menu
D. Jenis Jenis Desain Multimedia
1. Desain Tema 2. Animasi Transisi
(Theme) (Transition)
3. WordArt dan Shape
Menu
1. Desain Tema (Theme)
Secara harfiah, tema berarti apapun yang keluar dari
pikiran manusia, bagaimana manusia
menuangkannya ke dalam bentuk desain. Sementara,
desain tema mengacu pada ide atau gagasan yang
keluar dari pemikiran manusia ke dalam bentuk
komponen desain.
Menu
2. Animasi Transisi ( Transition)
Merupakan konsep animasi yang didalamnya sebuah
media bergerak untuk menampilkan perpindahan baik
itu perpindahan halaman atau perpidahan Slide
Menu
3. WordArt dan Shape
WordArt bisa dikatakan sebagai desain atau seni dari
pemanipulasian bentuk teks yang digunakan dalam desain.
Sementara Shape atau bentuk bangun 2D adalah bentuk ruang
bangun datar yang disediakan atau dibuat secara mandiri oleh
kita. Bentuk bentuk (Shapes) biasanya berupa persegi,
lingkaran, segitiga, jajargenjang, layang layang dan sebagainya.
Menu
BAB 5 Sajian Sajian Komponen Desain Media Interaktif
A. Gambar
B. Animasi
C. Audio
D. Video
Menu
BAB 5 Sajian Sajian Komponen Desain Media Interaktif
A. Gambar 1. Menambahkan Image Pada Halaman Web
2. Menambahkan Image Pada Slide
Menu
BAB 5 Sajian Sajian Komponen Desain Media Interaktif
B. Animasi 1. Menambahkan Animasi Pada Halaman Web
2. Menambahkan Animasi Pada Halaman Slide
Menu
BAB 5 Sajian Sajian Komponen Desain Media Interaktif
C. Audio 1. Menambahkan Audio Pada Halaman Web
2. Menambahkan Audio Pada Halaman Slide
Menu
BAB 5 Sajian Sajian Komponen Desain Media Interaktif
D. Video 1. Menambahkan Video Pada Halaman Web
2. Menambahkan Video Pada Halaman Slide
Menu
BAB 6 TEKNIK PEMBUATAN MULTIMEDIA INTERAKTIF
A. Perancangan Produk B. Pembuatan Produk
Multimedia Interaktif Multimedia Interaktif
Berbasis Halaman Web Berbasis Halaman Web
C. Pengujian Dan Publikasi
Produk
Menu
Bab 7 Aplikasi Terapan Desain Multimedia
Menggunakan Kode Program
A. Action Panel
B. Fungsi-Fungsi Tools Pada Aplikasi Adobe Flash
C. Menggambar dan Bekerja dengan Warna
Menu
A. Action Panel
Action Panel adalah antar muka lingkunagn pengembangan aplikasi
atau dalam Bahasa komputernya (Intergrated Development
Environment- IDE).
Bagian – Bagian Action Panel
Menu Bar Zoom, Property, Library Timeline
Nama Proyek Stage Toolbox
Menu
B. Fungsi – Fungsi Tools pada Aplikasi Adobe Flash
Nama Tool Fungsi Tool
Subselection Tool Menyeleksi Ojek
Free Transfrom Tool Pengubah Bentuk Objek
3D Rotasion Tool Rotator atau Merotasi Objek 3D
Lasso Tool Menyeleksi Objek dengan Pola Bebas
Pen Tool Menggambar Sebuah Objek
Text Tool Menambahkan Text
Line Tool Menambhakan Objek Garis Lurus
Rectangle Tool Membuat Objek Persegi
Pencil Tool Menambahkan Objek Seperti Pensil
Brush Tool Menambahkan Objek Seperti Kuas
Menu
B. Fungsi – Fungsi Tools pada Aplikasi Adobe Flash
Nama Tool Fungsi Tool
Deco Tool/Width Tool Menggambar Corak Dekorasi
Bone Tool Membuat Animasi Berulang
Paint Bucket Tool Memberikan Warna pada Objek
Eyedropper Tool Mengambil Sampel Warna
Erasser Tool Menghapus Objek
Menu
Bab 8 Penggunaan Data Menggunakan
ActionScript
A. Pengolahan Data Berbasis Text
B. ActionScript
Menu
A. Pengolahan Data Berbasis Text
1. Bekerja dengan Input Text
Input text merupakan komponen yang berfungsi untuk memasukan
data dengan format text dengan berbagai karakter, bisa berupa huruf,
anngka, atau simbol
2. Bekerja dengan Dynamic Text
Dynamic text merupakan text yang memiliki fungsi dapat dikendalikan
atau di ubah perannya (tidak stasis seperti static text)
Menu
A. ActionScript
1. Menganal Sintaksis ActionScript
Ada tiga hal mendasar yang harus kita ketahui yaitu
2. Case Sensitive
3. Fungsi Trace
4. Cara Menulis Komentar
2. Object pada ActionScript
Objek bisa di artikan sebagai suatu tipe data yang memuat suara,
gambar, dan text untuk mengendalikan animasi
Menu
Bab 9 Evaluasi Produk Multimedia Ineraktif
Pengujian dan Evaluasi Hasil Desain Website
Menu
Pengujian dan Evaluasi Hasil Desain Website
Menurut Nilsen ada lima kategori utama untuk seberapa mudah
tampilan (interface) suatu web yaitu:
1. Learnability
2. Efficiency
3. Memorability
4. Eror
5. Satisfaction
Menu