hasil dan pembahasan desain 5.1 format media interaktif...

14
BAB 5 HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif 5.1.1 Resolusi Format resolusi media untuk CD interaktif dongeng fabel adalah 1100 x 559 pixel. Penentuan resolusi media ini berdasarkan ukuran layar monitor jaman sekarang pada umumnya. Format visual yang digunakan vector dan image .png, sehingga gambar tidak akan terlalu pecah apabila diperbesar dengan resolusi lebih dari ukuran aslinya. 5.1.2 Flash CD Dongeng Fabel Interaktif merupakan sebuah media interaktif dengan menggnakan basis flash. Penentuan ini dikarenakan oleh rencana perancangan komunikasi visual yang terkesan bermain dan ditujukan untuk anak-anak. Untuk mendesain sebuah layout yang menarik dan tidak membosankan bagi anak-anak , harus bisa menciptakan penampilan yang tidak kaku dan adanya interaksi yang tidak membuat anak bosan untuk menyimak sebuah cerita. Hal tersebut dapat dicapai apabila media interaktif yang digunakan adalah media interaktif yang berbasis flash. 5.2 Desain Visual 5.2.1 Layout Gambar 5.1 Grid Layout

Upload: vunhan

Post on 12-Mar-2019

224 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

BAB 5

HASIL DAN PEMBAHASAN DESAIN

5.1 Format Media Interaktif

5.1.1 Resolusi Format resolusi media untuk CD interaktif dongeng fabel adalah 1100 x 559 pixel. Penentuan resolusi media ini berdasarkan ukuran layar monitor jaman sekarang pada umumnya. Format visual yang digunakan vector dan image .png, sehingga gambar tidak akan terlalu pecah apabila diperbesar dengan resolusi lebih dari ukuran aslinya.

5.1.2 Flash

CD Dongeng Fabel Interaktif merupakan sebuah media interaktif dengan menggnakan basis flash. Penentuan ini dikarenakan oleh rencana perancangan komunikasi visual yang terkesan bermain dan ditujukan untuk anak-anak. Untuk mendesain sebuah layout yang menarik dan tidak membosankan bagi anak-anak , harus bisa menciptakan penampilan yang tidak kaku dan adanya interaksi yang tidak membuat anak bosan untuk menyimak sebuah cerita. Hal tersebut dapat dicapai apabila media interaktif yang digunakan adalah media interaktif yang berbasis flash.

5.2 Desain Visual 5.2.1 Layout

Gambar 5.1 Grid Layout

Page 2: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Penggaris dan guide line berfungsi untuk menyamaratakan button pada setiap halaman agar konsisten dan tidak mengalami perubahan

5.2.2 Nameplate

Gambar 5.2 Nameplate Utama Ilustrasi papan kayu yang diikat dengan tali “ Fabel Interaktif Kisah Persahabatan” sebagai nameplate utamanya, disertai dengan judul dari seri dongeng yang bersangkutan. Ilustrasi papan kayu dipilih sebagai nameplate karena disesuaikan dengan tema fabel yang binatangnya hidup di sebuah hutan. Papan kayu seumpama memberikan petunjuk arah didalam hutan tersebut. 5.2.3 Interface

Gambar 5.3 Layout Intro

Page 3: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Pada saat baru mulai, terdapat nameplate dan karakter binatang pendukung yang akan mengajak pengguna software masuk kedalam menu utama dari CD interaktif ini.

Gambar 5.4 Layout Menu Utama

Masuk ke menu utama, diawali dengan transisi yang diikuti beberapa objek yang muncul satu per satu. Terdapat karakter bernama Fabi yang seolah mengajak untuk memilih menu yang tersedia dan lanjut ke halaman yang telah dipilih.

Gambar 5.5 Halaman Pertama Landak yang Kesepian

Masuk kedalam menu cerita “Landak Yang Kesepian”, akan langsung dimulai sebuah cerita yang diawali dengan animasi landak yang berjalan dan disertai oleh narasi cerita yang telah disesuaikan.

Page 4: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Gambar 5.6 Landak Yang Kesepian: Halaman 4

Tampilan dari halaman kedua bagian cerita apabila memilih option button lanjut yang berada disamping kanan bawah halaman. Pengguna juga bisa kembali ke halaman sebelumnya dengan memilih button kembali yang ada disamping kiri bawah yang selalu tersedia di setiap halaman cerita.

Gambar 5.7 Landak Yang Kesepian: Halaman 5

Sesuai dengan temanya interaktif, maka terdapat gerakan animasi disetiap halamannya dan penggunaan transisi pada setiap halaman yang telah ditentukan. Terdapat beberapa objek yang apabila disentuh oleh kursor mouse, maka akan bergerak dan mengeluarkan suara tertentu untuk menarik perhatian anak.

Page 5: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Seperti contoh pada Gambar 5.7, burung pelatuk yang berada dipohon, apabila kursor diarahkan kepadanya, maka burung tersebut akan bergerak mematuk dan mengeluarkan suara agar tidak membosankan.

Gambar 5.8 Layout “Ayo Mewarnai”

Gambar 5.9 Layout:

Video Mengenal Karakter Hewan

5.2.4 Tipografi Ada tiga jenis typefaces yang digunakan, yaitu;

- Antipasto family: digunakan pada body copy (keterangan) dan beberapa keterangan pada button (tombol).

- Quicksand: digunakan pada keterangan button di halaman utama.

- JL QUIXS: digunakan pada nameplate utama CD Fabel Interaktif.

Page 6: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.2.5 Warna

Gambar 5.10 Warna Cerah Warna yang digunakan oleh penulis adalah warna-warna cerah yang dapat menarik perhatian anak-anak. Selain itu, warna-warna tersebut juga untuk membangun dan mewakili hal-hal yang memberikan kesan fun, cheerful, happy, dan playful. Sistem warna yang digunakan adalah gradasi sebagai penunjang ilustrasi yang sederhana namun tetap menarik untuk dilihat.

Gambar 5.11 Warna Lembut

Penggunaan gradasi diaplikasikan pada setiap elemen visual yang terdapat dalam media interaktif. Seperti, warna karakter utama, karakter pendukung dan elemen visual lainnya agar tidak monoton dan membosankan.

Page 7: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.2.6 Karakter 5.2.6.1 Karakter utama

Gambar 5.12 Karakter Utama

Desain karakter utama dari CD Interaktif dibuat dengan style cute dan simple. Tidak terlalu serius, sehingga anak tidak mudah bosan melihatnya.

5.2.6.2 Karakter Teman-Teman Binatang

Gambar 5.13 Teman-teman Binatang

Page 8: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.2.7 Elemen Pendukung

Gambar 5.14 Elemen Visual Beberapa contoh elemen visual yang digunakan dalam media flash yang berkesan lucu dan imut disesuaikan dengan tema yang telah ditentukan. Elemen-elemen tersebut juga memiliki animasi-animasi khusus disetiap halamannya, jadi tidak hanya diam statis yang akan membuat anak cepat bosan.

5.2.8 Desain Button

5.2.8.1 Button Menu Utama

Gambar 5.15 Button Menu Utama Button pada menu utama sengaja dibuat seperti papan penunjuk arah karena

Page 9: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

disesuaikan dengan tema ilustrasi dari menu utamanya itu sendiri, seperti pada Gambar 5.3 Menu Layout Utama, dan user yang melihatnya langsung mengerti apa tindakan selanjutnya yang harus dilakukan. 5.2.8.2 Navigasi

Gambar 5.16 Navigasi Button navigasi terdapat pada setiap halaman cerita “Landak yang Kesepian”, yang berfungsi sebagai button kembali – untuk balik ke halaman sebelumnya, button lanjut – untuk melanjutkan ke halaman berikutnya, button ulang - untuk mengulang kembali halaman yang baru dibaca dan button keluar – langsung ke menu utama.

5.3 Item Pendukung

5.3.1 Packaging CD

Gambar 5.17 Cover Depan dan CD Packaging CD menggunakan elemen ilustrasi yang terdapat didalam CD interaktif dan sesuai dengan judul masing-masing seri cerita.

Page 10: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Gambar 5.18 Tampak Depan Keseluruhan Cover Pack CD

Gambar 5.19 Tampak Dalam Keseluruhan Cover Pack CD

Gambar 5.20 Desain Cover Seri Fabel Interaktif Kisah Persahabatan

Page 11: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

Gambar 5.21 Desain untuk pengikat pack CD utama sebagai kemasan multi-pack.

5.3.2 Poster

Gambar 5.22 Desain Poster Sebagai media promosi utama.

Page 12: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.3.3 Brosur

Gambar 5.23 Desain Brosur CD Fabel Interaktif sebagai media promosi alternatif.

5.3.4 Mini Banner

Gambar 5.24 Desain Mini Banner sebagai media promosi penjualan.

Page 13: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.3.5 Pin Karakter

Gambar 5.25 Desain Pin Karakter Pin yang terdapat dalam goodie tote bag setiap pembelian multi-pack CD.

5.3.6 Mousepad

Gambar 5.26 Mousepad Karakter Seri Fabel Interaktif Mousepad yang terdapat dalam goodie tote bag setiap pembelian multi-pack CD.

Page 14: HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media Interaktif ...thesis.binus.ac.id/doc/bab5/2011-2-01401-ds bab5001.pdfsederhana namun tetap menarik untuk dilihat. Gambar 5.11 Warna Lembut

5.3.7 Goodie Paper Bag

Gambar 5.27 Goodie Paper Bag “Landak yang Kesepian” tas yang diguunakan untuk setiap pembelian CD Interkatif.

5.3.8 Goodie Tote Bag

Gambar 5.28 Goodie Tote Bag “Landak yang Kesepian” Tas yang didapatkan setiap pembelian multi-pack CD Fabel Interaktif.