Perancangan Multimedia Bertalya 1 Struktur Navigasi Linier Hirarki

Perancangan Multimedia Bertalya 1

Struktur Navigasi • • Linier Hirarki Non-Linier Komposit 2

Linier • Navigasi berurutan (prosedur secara berurutan) • Biasanya Forward atau Backward. • Cth. Presentasi slide 2 & video 3

Hirarki • Berdasarkan logika dari konten • Terstruktur melalui menu 2 4

Non-linier • Navigation dengan rute yg pre-determine • Cth. Suatu situs 5

Komposit • Struktur campuran • Pengguna dapat menelusuri dengan bebas, tetapi dibatasi dengan presentasi linier dari suatu tampilan atau informasi penting, serta data tersusun secara hirarki (logis) 6

Storyboard • Storyboarding : membuat cerita atau hal contoh pada kertas yg menggambarkan layout secara garis besar • Merupakan proses dari pembuatan media termasuk pembuatan film, animasi kartun. Presentasi visual dari frame 2 yg berbeda • Hal storyboard digunakan utk menggbrkan waktu frame yg khusus. Terdiri dari format, layout dari konten, layout pengontrolan dgn navigasi, informasi yg interaktif & komentar 2 yg berguna. 7

Storyboard • Halaman contoh yg menggambarkan layout secara garis besar 8

Title Area Navigation Area Sequence No: Content Area Description: 9

(lanj. ) Representasi Komponen 2 : • Gambarkan komponen 2 yg akan ditampilkan pada layar, termasuk teks. Struktur navigasi : • Gambarkan button 2 , • tunjukkan link 2 (mis. Dgn anak panah atau nomor) 10

(lanj. ) Anotasi penggambarannya: – tunjukkan dimana animasi akan muncul – tunjukkan dimana file suara akan diputar – tambahkan efek 3 yg lain (transisi, efek teks, dll) Tambahan – indikasi warna pada latarbelakang & pada teks – Gambarkan gaya dan font teks 11

Komponen Antar Muka • • • Latarbelakang & tekstur Button, icon & picon Rollover & slider Hotspots & menu Feedback 12

Latar belakang dan Tekstur 13

Buttons, icons & picons 14

Rollovers & sliders 15

Hotspots & menus • Bagian dari gambar yg bisa di klik utk meng-link ke yg lain • Menu digunakan biasanya berupa menu dari atas ke bawah 16

Feedback • Bagian dimana pengguna dapat memberikan respon terhadap pertanyaan yg diajukan • Mis. , jawaban betul atau salah 17

Tip Desain Antar Muka • • Pastikan informasi dapat dibaca dengan jelas. Pergunakan warna latar dan depan yang sesuai serta batasi penggunaan warna terang seperti merah. Pengontrolan nasvigasi ditunjukkan sesuai dengan fungsinya. Pastikan pengguna tidak terlalu sering menekan tombol untuk melihat informasi yang spesifik. Jangan meletakkan terlalu banyak obyek atau informasi pada satu tempat saja karena layar terlihat terlalu ramai. 18

Lanj. • • • Buat antar muka yang sederhana Pastikan ukuran teks dan grafik sesuai Selalu konsisten dalam penggunaan simbol dan warna. 19

• Konten simpel dan jelas 20

• Penggunaan margin tepat dan baik dengan latar putih 21

Mobil polisi tidak ada relevansi nya dengan presentasi taman bermain 22

Hindari penggunaan warna yang terlalu banyak Uses of Type Serif type • Ideal for large headlines • Difficult to read in long blocks of text • Looks best when surrounded by lots of white space. Sans-Serif type • Works well in smaller sizes especially in body text • Looks busy and cluttered in large size. 23

• Suatu gambar seharusnya tidak mengganggu pesan atau teks pada layar Gambar latar menonjol Gambar latar tidak menonjol 24

Pastikan bahwa kontras cukup antara latar depan dengan latar belakang yang bertekstur User will not be able to read this easily User will be able to read this easier 25

• Berhati-hati dalam penggunaan efek 2 khusus 26

• Gunakan tipe huruf yang gelap pada latar belakang yang terang Mudah dibaca Sulit dibaca 27

Gunakan layout yang konsisten untuk materi yang saling berhubungan 28

• Gunakan cropping dan penempatan gambar yang efektif Gambar yang sudah di crop 29

Hindari penggunaan penebalan huruf dan garis bawah pada teks 30

sekian 31