Bahan Ajar DMI 3.6 4.6

2022

Syaif Nurhuda

Style Multimedia
Interaktif Berbasis
Halaman Web Dan Media
Interaktif__

[BAHAN AJAR DESAIN MEDIA
INTERAKTIF]

Bahan ajar ini merupakan paparan materi pembelajaran KD. 3.6 4.6 pada mata pelajaran Desain
Media Interaktif

KATA PENGANTAR

Puji dan syukur kepada Tuhan Yang Maha Esa, bahan ajar untuk kelas 12 SMK
Multimedia ini bisa dibuat untuk membantu siswa dalam materi pembelajaran.
Bahan ajar ini memuat materi tentang pengenalan style dan penerapannya pada multimedia
interaktif berbasis halaman web.

Bahan ajar ini merupakan paparan materi pembelajaran KD. 3.6 4.6 pada mata pelajaran
Desain Media Interaktif. Dengan adanya bahan ajar ini mudah-mudahan bisa membantu siswa
agar lebih mudah dalam memahami materi pembelajaran. Bahan ajar ini dibuat dengan
sederhana dan mudah dipahami serta disisipkan gambar, agar siswa dalam mempelajari bahan
ajar ini bisa paham tentang materi yang ada didalamnya.

Ikutilah petunjuk serta panduan dalam menggunakan bahan ajar ini supaya
pembelajaran lebih optimal.

1 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

DAFTAR ISI

KATA PENGANTAR..........................................................................................................................0
DAFTAR ISI ......................................................................................................................................2
PETA KONSEP..................................................................................................................................3

B. INDIKATOR PENCAPAIAN KOMPETENSI................................................................................4
C. POKOK – POKOK MATERI......................................................................................................4
D. PETUNJUK PENGGUNAAN MODUL BAHAN AJAR .................................................................4
E. TUJUAN PEMBELAJARAN ......................................................................................................5
F. URAIAN MATERI....................................................................................................................5

Unsur-unsur Multimedia ....................................................... Error! Bookmark not defined.
Menggunakan Unsur-Unsur Multimedia pada Sajian Media Interaktif Berbasis Halaman
Web
Error! Bookmark not defined.

Menggabungkan Unsur-Unsur Multimedia Pada Sajian Media Interaktif Berbasis Halaman
Web
Error! Bookmark not defined.

2 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

PETA KONSEP

Style Multimedia Interaktif Berbasis Halaman Web
dan Media Interaktif

Jenis Struktur Perancangan Struktur Navigasi
Navigasi

3 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

A. KOMPETENSI DASAR
3.6 Memahami style pada multimedia interaktif berbasis halaman web dan media
interaktif
4.6 Membuat style pada multimedia interaktif berbasis halaman web dan media interaktif

B. INDIKATOR PENCAPAIAN KOMPETENSI
Pengetahuan:
3.6.1 Menjelaskan style pada multimedia interaktif berbasis halaman web dan media
interaktif
3.6.2 Mengidentifikasi style pada multimedia interaktif berbasis halaman web dan media
interaktif
Keterampilan:
4.6.1 Menentukan style pada multimedia interaktif berbasis halaman web dan media
interaktif yang sesuai
4.6.2 Membuat produk multimedia interaktif berbasis halaman web dan media interaktif
yang sesuai

C. POKOK – POKOK MATERI
1. Struktur navigasi web
2. Perancangan struktur navigasi

D. PETUNJUK PENGGUNAAN MODUL BAHAN AJAR
1. Pelajarilah isi bahan ajar ini dengan sungguh-sungguh, jika ada uraian materi yang
kurang dapat dimengerti dapat ditanyakan kepada guru.
2. Agar pembelajaran lebih terarah maka bacalah bahan ajar ini dengan cara yang
berurutan.
3. Tandailah bagian-bagian materi yang penting.
4. Cermati tugas yang harus didiskusikan dengan teman pada sesi diskusi.
5. Pahami rangkuman materi untuk lebih menguasai materi dalam bahan ajar ini.
6. Kerjakan tugas yang terdapat diakhir materi.

4 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

E. TUJUAN PEMBELAJARAN
1. Setelah melihat dan mengamati bahan ajar, peserta didik dapat memahami tentang
style pada multimedia interaktif berbasis halaman web dengan benar.
2. Setelah melakukan kegiatan diskusi berkelompok, peserta didik mampu menerapkan
style pada multimedia interaktif berbasis halaman web.

F. URAIAN MATERI

Pengertian Style Produk Multimedia Interaktif
Style produk pada multimedia interaktif merupakan gaya atau cara yang

digunakan dalam suatu produk multimedia interaktif supaya gagasan dan tujuannya
tercapai. Teks adalah suatu kombinasi huruf yang membentuk satu kata atau kalimat yang
menjelaskan suatu maksud atau materi pembelajaran yang dapat dipahami oleh orang
yang membacanya. Gambar digunakan dalam presentasi atau penyajian multimedia karena
lebih menarik perhatian dan dapat mengurangi kebosanan dibandingkan dengan teks.

A. Struktur Navigasi
Struktur navigasi adalah susunan hierarki menu yang menggambarkan isi dari

keseluruhan aplikasi media interaktif. Salah satu ciri multimedia interaktif adalah
kemudahan navigasi titik sebuah aplikasi multimedia interaktif harus dirancang
sesederhana mungkin sehingga pengguna tidak akan kesulitan dalam mengoperasikannya,
bahkan sampai bentuk tombol atau icon pun harus dibuat secara komunikatif mungkin.
Misalnya saat kursor berada di atas teks atau tombol yang memiliki link ke interface lain
maka kursor otomatis akan berubah menjadi icon tangan, yang artinya menandakan
bahwa pengguna dipersilahkan mengklik bila ingin mengakses informasi yang ada di
dalamnya.

5 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi multimedia
atau dapat pula dianalogikan sebagai diagram alur dalam perancangan bahasa
pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan
dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi. Dengan
penggambaran struktur navigasi, pembuatan sebuah aplikasi dapat sistematis dan mudah
titik jenis struktur navigasi dikelompokkan menjadi empat struktur yang berbeda yaitu
linier, hierarki, jaringan dan kombinasi yang mempunyai perbedaan dalam bentuk
rangkaiannya.
a. Struktur Linier

Struktur yang paling sederhana dalam mendesain aliran aplikasi multimedia adalah
struktur linier titik dalam menampilkan aplikasi multimedia dapat maju
(next) dan mundur (back) jika Mouse di klik akan menampilkan isi informasi dari
aplikasi multimedia tersebut dan bila diklik lagi akan muncul pada halaman berikutnya.
struktur linear banyak digunakan dan berhasil dengan baik pada beberapa macam
aplikasi seperti:
- presentasi
- aplikasi computer Based training
- aplikasi yang memerlukan informasi berurutan

6 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

b. Struktur Hirarki
Struktur hierarki merupakan struktur seperti tangga atau pohon, dimana masing-
masing objek menyediakan sebuah menu pilihan yang memiliki lebih banyak menu
dengan banyak pilihan titik Tidak ada batas ukuran atau jumlah menu dan sub menu
yang dapat dimiliki dalam sebuah struktur hierarki. Struktur hierarki diadaptasi dari
top-down design konsep navigasi ini dimulai dari 1 node yang menjadi halaman utama
atau halaman awal. dari halaman tersebut dapat dibuat beberapa cabang ke halaman-
halaman level 1. halaman tersebut adalah isi atau halaman penunjang dari sebuah
halaman utama, dari tiap halaman level 1 dapat juga dikembangkan menjadi beberapa
cabang lagi.

Struktur navigasi hirarki merupakan jenis navigasi web yang sering digunakan oleh situs
portal berita. Menu yang disajikan dibuat berbeda pada setiap halaman yang dibuka.
Contoh navigasi hirarki bisa kamu temui di website berita seperti The New York Times.
Menu yang ditampilkan di halaman beranda berisi link yang diarahkan ke kategori tertentu.
Tetapi, ketika kamu klik salah satu kategori maka menu navigasinya pun berubah menjadi
sub-kategori.

7 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

Misalnya, di halaman Sports menunya menampilkan tautan ke sub-kategori lain seperti
College Football, Soccer, Golf, dan Tennis.

c. Struktur Jaringan (Spoke and Hub)
Bentuk struktur jaringan merupakan desain yang paling kompleks dengan banyak objek
dalam setiap arah pada setiap objek dalam aplikasi multimedia.
Untuk membuat struktur hyperlink yang fleksibel, struktur jaringan dapat bekerja
dengan baik. Hub dinyatakan dengan halaman utama yang mempunyai hubungan
dengan setiap node Setiap node dapat berhubungan kembali dengan halaman
utama. pada model ini hanya terdapat dua macam link yaitu dari halaman utama ke
halaman tertentu, dan dari halaman tersebut kembali ke halaman utama.

8 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

d. Struktur Kombinasi
Struktur kombinasi merupakan struktur seperti tangga, pohon-pohon gabungan antara
struktur linier dan menu di mana didalamnya Tidak ada batas untuk menyediakan
banyak pilihan dengan menu utama dan sub menu yang ada.

Struktur Navigasi Web
Struktur navigasi web adalah bagian dari desain website untuk memudahkan

pengunjung mengakses halaman-halaman yang ada di website tersebut. Navigasi web biasanya
berupa menu berisi link yang mengarah ke page lain. Dengan navigasi yang baik,
memungkinkan pengunjung masuk ke halaman yang mereka inginkan secara cepat dan mudah.
Teknologi yang digunakan navigasi web disebut dengan hyperlink dan hypertext. Sesuai
namanya, hyperlink merupakan tautan yang mengarahkan pengguna pada URL tertentu.
Sementara hypertext adalah teks yang memuat hyperlink untuk menghubungkan website
dengan halaman.

9 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

Adapun istilah lain yang perlu kamu ketahui, yaitu internal link dan external link.
Internal link mengarahkan pengunjung ke halaman tertentu di lingkup domain yang sama.
Sedangkan external link mengarahkan pengguna ke luar website atau domain, termasuk
halaman dan server web terpisah. Nah, navigasi web menggunakan internal link untuk
mengarahkan pengguna ke halaman lain di domain atau website yang sama.

Manfaat Struktur Navigasi Web
Penggunaan struktur navigasi web bukan hanya bermanfaat untuk pengguna saja.

Terdapat sejumlah keuntungan yang bisa diperoleh untuk website itu sendiri. Diantaranya
adalah sebagai berikut:

1. Bermanfaat untuk Search Engine Optimizer (SEO)
Internal link membuat suatu halaman lebih mudah ditemukan oleh mesin

telusur seperti Google. Terlebih jika jumlahnya cukup banyak, Google akan
menganggap bahwa halaman tersebut cukup penting. Selain itu, kualitas internal link
juga berpengaruh terutama jika berasal dari halaman yang telah memiliki ranking SERP.
2. User experience

User experience menjadi salah satu indikator SEO yang cukup penting. Pasalnya,
hal ini berkaitan dengan CTR, bounce rate, dan average time duration. Jika user
experience atau UX website dinilai urang baik, segera benahi dan perbaiki.
3. Durasi kunjungan meningkat

Adanya referensi dan related post berfungsi meningkatkan potensi durasi
kunjungan. Selain itu, halaman yang sering dikunjungi akan lebih mudah ditemukan oleh
pengunjung dan direkomendasikan search engine.
4. Crawling lebih cepat

Jika kamu memiliki halaman yang telah terindeks, kamu dapat menambahkan
internal link dari page lain. Hal ini memungkinkan robot crawler Google merayapi
halaman baru agar lebih cepat terindeks.

B. Perancangan Struktur Navigasi

Tips Membuat Struktur Navigasi Web
1. Rencanakan dengan Matang

Untuk menyusun struktur website yang ramah pengguna, Anda perlu

10 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

merencanakan strukturnya dengan matang. Buatlah wireframe secermat mungkin, baik
secara manual di kertas maupun menggunakan beragam tools wireframe.
2. Ketahui Standar Penggunaan dan Penempatan Elemen

Salah satu hal penting yang perlu Anda pahami bahwa navigasi website lebih
mengutamakan kemudahan pengguna daripada kebebasan kreativitas. Jangan sampai
keinginan Anda untuk menumpahkan kreativitas malah akan membuat penggunaan
situs terkesan rumit. Gunakan tanda yang standar dan familiar agar pengguna lebih
mudah mengeksplorasi situs Anda, misalnya tanda garis tiga bertumpuk, atau titik tiga
berjajar horizontal yang menunjukkan menu yang dapat diperluas.
3. Gunakan Bahasa yang Digunakan oleh User
Gunakan bahasa yang sering digunakan atau familiar bagi pengunjung situs Anda. Hal
ini juga berkaitan erat dengan On Page Search Engine Optimation (SEO) yang
menggunakan kata kunci tertentu pada website Anda agar website mudah ditemukan
pada hasil pencarian di search engine.
4. Gunakan Menu Responsif

Gunakan menu yang responsif agar pengguna Anda tidak kabur. Di zaman serba
digital saat ini, situs dan menu yang kurang responsif akan mudah ditinggalkan oleh
pengguna karena mereka sudah terbiasa dengan segala hal yang mudah, cepat, dan
instan.
5. Pemisahan Menu Navigasi dengan Elemen Lain

Gunakan white space, warna, atau ukuran dan jenis font yang berbeda untuk
membedakan menu dengan konten utama dan sidebar.
6. Buat Struktur yang Melebar

Jika Anda ingin membuat pelanggan menjangkau dan mengeksplorasi situs Anda
dengan mudah, buat struktur navigasi website sedatar mungkin. Buat halaman
sesederhana mungkin dan tautkan subkategori yang relevan
7. Hindari Dropdown Menu

Menu dropdown bisa jadi tidak berguna di sebagian besar website. Memiliki
terlalu banyak tautan di menu utama juga akan membingungkan pengguna. Sebaiknya
Anda menggunakan struktur website hirarki atau lokal sebagai pengganti menu drop
down.

11 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

12 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

RANGKUMAN

1) Pengertian Strukur Navigasi
Struktur navigasi adalah susunan hierarki menu yang menggambarkan isi dari keseluruhan
aplikasi media interaktif.

2) Jenis – jenis Struktur Navigasi
a. Struktur Linier
b. Struktur Hirarki
c. Struktur Jaringan (Spoke and Hub)
d. Struktur Kombinasi

3) Struktur Navigasi Web
Struktur navigasi web adalah bagian dari desain website untuk memudahkan pengunjung
mengakses halaman-halaman yang ada di website tersebut. Navigasi web biasanya berupa
menu berisi link yang mengarah ke page lain.

4) Manfaat Struktur Navigasi
a. Bermanfaat untuk Search Engine Optimizer (SEO)
b. User experience
c. Durasi kunjungan meningkat
d. Crawling lebih cepat

5) Tahapan Pembuatan Struktur Navigasi
a. Buat rancangan dasar
b. Letakkan menu navigasi di tempat yang strategis
c. Gunakan menu navigasi yang responsif
d. Manfaatkan breadcrumbs
e. Gunakan taksonomi

13 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

LATIHAN SOAL
Tugas Individu
Kerjakan soal berikut pada buku catatan kalian masing – masing!

1. Apakah yang dimaksud style pada multimedia interkatif berbasis web?
2. Sebutkan jenis-jenis struktur navigasi !
3. Sebutkan langkah-langkah dalam merancang struktur navigasi !

14 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda

DAFTAR PUSTAKA
Nurcahyo, R., Mulyati, L., 2018, Desain Media Interaktif, Malang, Kitto Book
Huda, N. 2022, Mengenal Struktur Navigasi Web, Jenis-Jenis, dan Tips Membuatnya,
diakses pada 29 September 2022, https://www.dewaweb.com/blog/mengenal-struktur-
navigasi-web/
Gunawan, J. 2021, Struktur Navigasi Website: Penjelasan, Jenis, Tips Membuatnya,
diakses pada 30 September 2022, Struktur Navigasi Website: Penjelasan, Jenis, Tips
Membuatnya (meson-digital.com)

15 Desain Media Interaktif KD. 3.6 4.6 | Syaif Nurhuda