Komunikasi • K Komunikasi ik i menyampaikan ik “fakta, konsep dan emosi” • Untuk menyampaikan sesuatu, diperlukan bahasa dan media • Bahasa memerlukan huruf, a a, kalimat al ma dan a aturan a a kata, pemakaian (tata bahasa)
Komunikasi Elemen-elemennya : • • • • •
Audiens Setting Pesan Media Metode
Pengajaran - 3 M • Message (Pesan) • Method M • Media
Metode • Presentasi / k li h kuliah • Demonstrasi • Diskusi • Latihan dan Praktik • Tutorial • Simulasi • Permainan • Cooperative learning groups
• Discovery / i inquiry i learning l i • Pemecahan Masalah • Pertanyaan • Praktikum terbimbing • Praktikum Mandiri • Permainan peran • B Berpikir p reflektif fl f
Media Visual • Print P – Artikel, Brosur, Manual, Fine Arts
• Motion – Film, Animasi, Performances
• Interaktif – Website, Online Help, CD-ROM
Beberapa hasil penelitian
Penginderaan kita 75%
11% 7% 3% 4%
Pengaruh 3 metode terhadap penggunaan filem dalam pengajaran 20%
Hanya Film Film + Pengantar Pengantar, Film Review, Film, Review Reshowing
30%
40%
50%
60%
Efektifitas komunikasi meningkat 40 - 50 % bila menggunakan m ngguna an visualisasi Goldstein & Goldstein
Perbandingan Efektifitas Pembicara tanpa visualisasi
Pembicara dengan visualisasi i li i
Kelompok Sasaran Kelompok Konsensus
(Goldstein & Goldstein)
One picture is worth a thousand words
One picture is worth a thousand words
Visualisasi 3D … Tingkat Polusi di bawah tanah
One picture is worth a thousand words
Sebuah S b kawat silindris ii d i dengan sumbu paralel dan ujung-ujungnya berbentuk azimut.
One picture is worth a thousand words
Sebuah S b kawat silindris ii d i dengan sumbu paralel dan ujung-ujungnya berbentuk azimut.
One picture is worth a thousand words
Mata Ma a melihat m l ha da dari ssebelah b lah kiri
41% 41%
20%
25%
14%
Pusat Visual
1/3
1/3
Eye Scanning • Dari Da p pusat a visual al mata a a melihat l ha bergerak membentuk huruf Z
• Kemana mata anda melihat? • Dimana Di h hall tersebut b anda inginkan untuk terlihat?
Direct Eyes • Menarik Perhatian
– Warna W n – Bentuk – Directionality
Prinsip Disain Visual
Bahasa Visual • • • • • • • • •
Layout Typography Warna Tekstur Gambar Identitas Sequencing Animasi Suara
Seni vs Disain • Seni adalah suatu bentuk ekspresi • Disain adalah salah satu bentuk komunikasi
Seni vs Disain
Komunikasi & Disain • Disain* adalah pembuatan antarmuka yang mengkomunikasikan maksud secara jelas dan tepat dalam suatu m di media – – – –
Media Maksud Kejelasan Ketepatan
* Dalam konteks ini
Sebelum Memulai Disain • D Design g for f which h h device? – – – –
Untuk overhead projector? Untuk proyeksi melalui komputer? Untuk presentasi di layar (OHP)? Untuk dicetak: word processing, processing majalah, graphic flyers, dll.
Prinsip Disain Visual • S Sebelum b l mM Memulai m la D Disain a – – – –
Untuk overhead projector? Untuk proyeksi melalui komputer? Untuk presentasi di layar (OHP)? Untuk dicetak: word processing, processing majalah, graphic flyers, dll.
Prinsip Disain Visual • To Organize: memberikan pengguna struktur konseptual yang jelas dan konsisten dengan pengelompokan dan hi ki hirarki • To Economize: Menyampaikan sebanyak banyaknya dengan isyarat sebanyak-banyaknya sesedikit mungkin • To Communicate: menyesuaikan presentasi dengan kemampuan persepsi pengguna
Organize • Konsistensi – Internal: Jenis elemen yang sama disajikan di tempat yang sama – External: Mengacu pada konvensi budaya yang ada – Real world: Konsisten dengan pengalaman nyata, observasi dan persepsi pengguna – Innovation: Menyimpang dari konvensi yang ada, jika hal tersebut memberikan keuntungan yang jelas b i pengguna bagi
Organize
Organize • Screen Layout – Standardkan Struktur • Jangan memaksa orang mengeluarkan energi berlebihan untuk mengikuti alur presentasi
– Kelompokkan K l mp an elemen-elemen l m n l m n yang berhubungan
Organize • Navigasi – memberikan m mb an initial n al ffocus us pada perhatian pemakai – direct attention pada p keseluruhan materi – membantu navigasi ke seluruh presentasi – kurva belajar sederhana
Organize
contoh
Economize • Empa Empat hal utama ama – Simplicity: hanya gunakan elemen yang paling penting untuk komunikasi – Clarity: makna untuk masing-masing komponen tidak bias – Distinctiveness: property penting dari elemen yang berbeda juga berbeda. – Emphasis: E h i elemen penting i mudah d h diketahui/dilihat
Communicate • Untuk U keberhasilan b ha la komunikasi m a disain visual haruslah seimbang dalam: l – – – – –
Legibility Readability Symbolism Typography Color
Legibility & Readability • Elemen-elemen mudah dikenali dan dibedakan • Legible Typefaces • Comprehensible display – Mudah diidentifikasi dan dii diinterpretasikan ik – Menarik dan atraktif
Symbolism • Untuk U mengkomunikasikan m g m a a isi secara efisien, pilih dengan cermat: • • • • • •
Icons Simbol Chart Peta, denah Diagram i Foto
Typography • Typeface
– Terbaca (Legible), i typeface yang jelas j yang berbeda untuk membedakan kelompok informasi dan berbeda (max 3 typeface yang berbeda)
• Typestyle
– Ukuran (Point), italic, boldness, underline, warna (max 3 style)
• Typesetting
– 40 karakter ka akte per pe baris, ba is rata ata kiri, ki i hindari hinda i rata tengah atau rata kanan, spasi antar kata yang memadai, identasi paragraf dan spasi antar baris. baris
Typography • Komposisi K mp – spacial unit + contrast
• Weightage – chroma + lightness + thickness
• Direction – height + positioning + style
• Character – tight/space + type-dimension
Warna Wa a (+) ( ) • Memberi penekanan isyarat penting • Identifikasi subsistem dari suatu struktur • Menggambarkan obyek agar lebih realistis. • Menggambarkan waktu dan proses • Mengurangi kesalahan interpretasi • Meningkatkan comprehensibility
Warna Wa a ((-)) • M Mekanisme a m yang ya g komplex mpl – Display – Reproduksi
• Isu-isu Cross-platform • Color-deficient Color deficient vision • Sifat mengganggu – Visual discomfort – Afterimages
• Isu-isu Cross-culture
W Warna • Psikologi – Karakter Individual • Ungu = Kaya Kaya, Royal Royal, Berkelas • White = Jernih, Kalem, Bersih • Kuning = Muda, Bertenaga, Hangat Biru =Tenang, Bisa Diandalkan, Mendalam • Merah M h = Panas, P B Bersemangat, g Bergairah
W Warna • Roda Warna • Kelompok Warna – Warna W H Hangat • Menggembirakan • Bila Terlalu = Kaku
–W Warna S Sejuk • Tenang, Sabar • Bila berlebihan = Dingin
W Warna • Kelompok Warna – Complementary atau Contrasting
– Analog atau Harmonis
– Monotone, Monochromatic, Dominance
W Warna • R Roda a Warna Wa a
W Warna • R Roda a Warna Wa a
RGB
CMYK
Warna
Satu
• K Kontras a – Latar belakang gelap, teks terang – Latar belakang terang, teks gelap
• • • •
Sederhana Perhatian langsung Kombinasi yang terbaik Uji
Warna
Atau Dua
• K Kontras a – Latar belakang gelap, teks terang – Latar belakang terang, teks gelap
• • • •
Sederhana Perhatian langsung Kombinasi yang terbaik Uji
Warna
Atau Tiga
• K Kontras a – Latar belakang gelap, teks terang – Latar belakang terang, teks gelap
• • • •
Sederhana Perhatian langsung Kombinasi yang terbaik Uji
Warna
Atau Empat
• K Kontras a – Latar belakang gelap, teks terang – Latar belakang terang, teks gelap
• • • •
Sederhana Perhatian langsung Kombinasi yang terbaik Uji
Permasalahan Warna • Perbedaan P b aa warna a a antar a a peralatan.
GUIR logo #AF2534
– Piranti tertentu tidak tida dapat menampilkan warna tertentu Web Safe (misal: #AF5234), ganti dengan #993333 warna lainnya. – Biasanya warna-warna Web safe sangat membantu b mengatasii hal h tersebut
MENYIAPKAN VISUAL
1) Tulis teks-nya lebih dahulu
2) Metode KISS Keep It Simple - Sequential Satu gagasan per visual
3) Metode M d KILL
K p IIt • Keep Large and Legible
Putuskan disain dasar
ABCD
Credits • Graphics: T/Maker Company: ClickArt CD (1996) ( 6) • Goldstein, J. & Goldstein, J. (1993). Videoconferencing secrets. NAVITAR: Rochester, NY. • Pett, D. & Wilson, T. (1997). Effective presentations i . AECT: AECT New N Y York. k
Trims gitu loh!
