Perancangan Multimedia

Bertalya

1
 Struktur Navigasi

• Linier
• Hirarki
• Non-Linier
• Komposit

2
 Linier

• Navigasi berurutan (prosedur secara berurutan)

• Biasanya Forward atau Backward.
• Cth. Presentasi slide2 & video

3
 Hirarki

• Berdasarkan logika dari konten

• Terstruktur melalui menu2

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
frame2 yg berbeda
• Hal storyboard digunakan utk menggbrkan waktu frame
yg khusus. Terdiri dari format, layout dari konten, layout
pengontrolan dgn navigasi, informasi yg interaktif &
komentar2 yg berguna.

7
 Storyboard
• Halaman contoh yg menggambarkan layout secara garis
besar

8
 Title Area

Sequence No:
Content Area

Navigation
Area

Description:

9
 (lanj.)
Representasi Komponen2 :
• Gambarkan komponen2 yg akan ditampilkan pada layar,
termasuk teks.

Struktur navigasi :
• Gambarkan button2 ,
• tunjukkan link2 (mis. Dgn anak panah atau nomor)

10
 (lanj.)
Anotasi penggambarannya:
– tunjukkan dimana animasi akan muncul
– tunjukkan dimana file suara akan diputar
– tambahkan efek3 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.
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
Dance (early 1950s - 1970s)
Multimedia
(without compute r interaction)
Alwin Nikolais (1910-1993) employed lights,
slides, electronic music, and stage prop s
to create environments through whi ch
dancers moved, and more important, into
which they bl ended.
Gambar latar menonjol
Dance (early 1950s - 1970s)
Multimedia
(without compute r interaction)
Alwin Nikolais (1910-1993) employed lights,
slides, electronic music, and stage prop s
to create environments through whi ch
dancers moved, and more important, into
which they bl ended.
Gambar latar tidak menonjol
24
Pastikan bahwa kontras cukup antara latar depan dengan
latar belakang yang bertekstur

User will be able to

User will not be able to read this easier
read this easily

25
• Berhati-hati dalam penggunaan efek2 khusus

26
• Gunakan tipe huruf yang gelap pada latar belakang yang
terang

Mudah dibaca Sulit dibaca

27
How Does the Internet Work?

• Packet switched networks

– if it uses phone lines, it must work like the
Gunakan layout
phone system, right? WRONG! yang konsisten
– circuit switched/packet switched
difference untuk materi yang
What Makes the
• A better model -- the postal system
Internet Go?
saling berhubungan
– think of a packet as an envelope with an
address
H Protocols -- rules of H Routers -- connect
– point-to-point collection and distribution
the road for nets various networks
H Packets H The Internet
– 1-1500 characters Protocol
– travel out of – addresses the
sequence and by packets
various routes How Does the Internet Work?
– tells the routers the
best way to go

• The Transmission Control Protocol

– breaks the info into packets, puts ordering
info on and inserts into IP “envelopes”
– opens the envelopes and reassembles
– if packets are missing or damaged, it asks
for retransmission -- parity bits
• The User Datagram Protocol (UDP)
– used for short messages only
– doesn’t worry about missing packets
28
• Gunakan cropping dan penempatan gambar yang efektif

Gambar yang sudah di crop

29
 For Further Reading
Marr , David (1982). Vision: A computational
gation into the human representation and process-
investi -
ing of visual information. Freeman: San Francisco.
Parker, Roger (1993). Looking good in print: A guide
to basic design for desktop publishing (3rd Edi -
tion ). Ventana Press: Chapel Hill, NC.
Peretz , Isabel (1993). Auditory agnosia : A functional
analysis. In S. McAdams & E. Bigand (Eds .),
Thinking in sound: The cognitive psychology of hu -
man audition (pp . 199-230). Oxford University
Press: Oxford.
Porkorney , Cornel & Gerald, Curtis (1989). Computer
Graphics: The principles behind the art and sci -
ence . Franklin, Beedle & Associates: Irvine, CA.
Hindari penggunaan penebalan
huruf dan garis bawah pada teks
For Further Reading
Marr , David (1982). Vision: A computational
investigation into the human rep resentation and
processing of visual information. Freeman: San
Francisco.
Parker, Roger (1993). Looking good in print: A guide to
basic design for desktop publi shing (3rd Edition).
Ventana Press: Chapel Hill, NC.
Peretz , Isabel (1993). Auditory agnosia : A functional
analysis. In S. McAdams & E. Bigand (Eds .),
Thinking in sound: The cognitive psychology of
human audition (pp . 199-230). Oxford University
Press: Oxford.
Porkorney , Cornel & Gerald, Curtis (1989). Computer
Graphics: The princi ples behind the art and sci ence.
Franklin, Beedle & Associates: Irvine, CA.
30
sekian

31