BARS HASIL DAN PEMBAHASAN DESAIN 5.1 Format Media

BARS
HASIL DAN PEMBAHASAN DESAIN
5.1
Format Media Interaktif
5.1.1 Resolusi
Format resolusi untuk cd interaktif "Mengenal Serangga" ialah
1024x768 pixel. Penentuan ukuran mt dilakukan berdasarkan
pertimbangan bahwa ukuran 1024x768 merupakan ukuran yang universal
dalam resolusi setiap komputer pribadi atau perangkat portable lainnya.
Sehiin itu tingkat resolusi ini memungkinkan pembuatan media interaktif
berbasis flash dengan visual yang cukup jemih apabila ditampilkan secara
follscreen dan tidak terlalu berat bagi sistem computer dalam memproses
data konten yang ingin ditampilkan.
5.1.2 Flash
CD interaktif "Mengenal Serangga" merupakan media interaktif
berbasis flash. Penentuan ini disebabkan oleh media cd interaktif sendiri
dan target utama yaitu anak-anak. Untuk menciptakan layout yang
menarik bagi anak-anak, tentu harus menciptakan tampilan yang tidak
kaku, serta lebih interaktif. Hal itu lebih mudah dicapai apabila media
interaktif yang digunakan ialah media interaktif berbasis flash.
5.2
Desain Visual Item
5.2.1 Sistem Grid
Sistem Grid yang digunakan dalam CD interaktif "Mengenal Serangga"
ialah template dari 960 Grid System yang menggunakan 16 kolom.
Pemilihan kolom yang banyak sengaja dilakukan agar susunan layout
dapat dilakukan dengan lebih mudah;
Berikut adalah bebenipa contoh penerapan 960 Grid System pada layout
dalam CD interaktif "Mengenal Serangga" :
'
27
29
Gambar 5.3
Gambar 5.4
Grid Festival Cerita dengan Konten
Grid Pembuka halaman Festival Cerita
30
5.2.2 Desain Layout
Dalam mendesain layout, hal utama yang selalu dijadikan dasar
dalam mengeksplorasi visual ialah tone and manner pada 4.2.2.1. Hal ini
bertujuan agar selama pengguna cd interaktif ini menelusuri tiap halaman,
maka mood yang dirasakan dapat sesuai dengan tone and manner.
"Tugas lebah betina
(pekerja) ialah
mengumpulkan
makanan,membuat dan
menjaga sarang.
Gambar 5.5
Halaman Lebah Cerita dengan Konten
Untuk elemen-elemen visual utama, gaya visual yang diterapkan
ialah ilustrasi vector. Penerapan gaya vektor disebabkan oleh efeknya
yang ditimbulkan berupa visual yang jelas dan kuat, yang mempermudah
kontras. Berikut adalah elemen-elemen visual tersebut:
1. Tombol navigasi: exit, home, next (khusus pada hagian cerita)
Gambar 5.6
Gambar 5.7
Tombol navigasi halaman
Tombol navigasi halaman dalam roll over mouse
31
•
2. llustrasi tokoh serangga yang menjadi objek utama dalam hirarki.
(akan dijelaskan lebih detail dalam 5.2.3)
3. Ilustrasi landscape tempat tinggal serangga.
Gambar 5.8
Halaman Lebah Cerita dengan Konten
4. Background yang merupakan pattern distilasi visual 14 Jems
serangga. 14 serangga tersebut ialah serangga-serangga yang akan
dipelajari dalam cd interaktif "Mengenal Serangga". Pada tiap
halaman dari seluruh 15 jenis halaman, menggunakan background
yang sama akan tetapi dengan wama yang berbeda.
Gambar 5.9
Background untuk halaman festival serangga (hijau) dan
halaman lebah (orange kuning)
32
5. Tombol untuk memunculkan konten. Tombol ini terdapat pada 15
halaman jenis serangga dalam cerita maupun direktori. Secara default,
tombol ini dlberi tint abu-abu sedangkan tint tersebut dihilangkan
dalam roll over mouse.
Gambar 5.10
Gambar 5.11
6. Tombol navigasi dalam konten yang terdiri dari previous, next dan
close. Ketiga tombol ini memiliki ciri yang sama yaitu menggunakan
skema warna monochromatic secara default dan ditambahkan warna
33
hijau pada previous dan next dan wama orange merah pada close
dalam roll over mouse.
"Tugas lebah betina
(peke •) lalah
mengumpulkan
makanan,membuat dan
"'Tugas Jebah betina
(pekerja) lalah
mengumpulkan
makilmm,membuat dan
menjaga sarang.
-Tugas lebah betfna
(peke a) lalah
mengumpulkan
makanan,membuat dan
menJaga sarang.
Gambar 5.12
7. Image berupa foto atau ilustrasi pada konten untuk membantu
penjelasan materi. Image ini dapat dklik untuk memperbesar gambar
dan member materi tambaban.
Gambar5.13
34
Lebah pekerjil (betina)
Gambar 5.14
Hasil zoom salah satu image konten
8. Fitur Video pada halaman festival, sebagai basil zoom untuk konten
jenis mulut serangga. Penambahan fitur ini dimaksud agar dapat
member penjelasan yang lebih tepat untuk jenis konten tersebut,
sekaligus sebagai keunggulan media interaktif.
(;'_,_).'
>-...' -
Mu!ut Penusuk
Tipe mulut ini
berhentuk jarum
untuk mempenetrasi
pcrmukaan kcras.
Contohnya ny<Jmuk,
tongge1et.
Gambar 5.15
Video nyamuk
35
Untuk: background, digunakan warna turunan dari tokoh serangga
yang ditarnbahkan tint putih agar dapat menonjolkan objek utarna lainnya
yang memiliki warna lebih terang. Berikut adalah beberapa tarnpilan dari
tiap halaman cd interaktif"mengenal serangga":
Gambar 5.16
Index
mengena @
C.' 1
Gambar 5.17
erangga
Enter Screen
36
"Uhatl Kupu.kupu yang
tnl berbedal"
Gambar 5.18
.
Halaman Kupu-kupu
'(,'... .'-.·-.'.)
/,:..
/
ii
Gambar 5.19
Halaman Tonggeret
37
-xamJ mengecap rasa
dengan kaki..Jmki yang
berbulu, Bulu di kaki
kaml fungsinya sama
Gambar5.20
Halaman Lalat
"Memang betul.
Bela lang sembah betlna
memakan pasangannya
untuk mendapatkan
protein untuk bertelur."
Gambar 5.21
Halaman Belalang Sembah
38
"Oieh karena itu,kami
dlsebut lnsektlsida
Gambar 5.22
Gambar5.23
Halaman Kepik
Halaman Kumbang Kotoran
39
5.2.3 Desain Karakter
Dalam CD interaktif "Mengenal Serangga", terdapat beberapa
karakter yang menjadi fokus utama dalam penggarapan tugas akhir. Hal
ini dilakukan karena dalam penyajian konten, terdapat cerita dan alasan
mengapa konten tersebut disajikan, sehingga terdapat interaksi antar
tokoh yang menyebakan pengguna menjadi pihak ketiga. Untuk tokoh
serangga, mereka digambarkan seolah-olah dapat bertingkah Iaku seperti
manusia.
Terdapat 3 pengelompokan karakter:
1. Tokoh Manusia: dalam CD interaktif "Mengenal Serangga", terdapat
2 tokoh manusia utama yaitu Didi dan Nora. Mereka terlibat dalam
dunia serangga karena serangga peliharaan Didi yang pergi ke dalam
dunia tersebut. Karena khawatir, Didi pergi ke dunia serangga untuk
mencari serangga kesayangannya dan ditemani Nora. Dalam
peJ.jalanan, mereka akan menemui berbagai jenis serangga yang
membantu mereka dan memberikan berbagai macam pengetahuan
tentang serangga.
Gambar 5.24 Didi
Gambar 5.25 Nora
2. Serangga Netral: kelompok serangga netral merupakan kumpulan
beberapa jenis serangga yang tidak berbahaya bagi manusia babkan
beberapa di antaranya sangat bermanfaat bagi manusia. lndikator dari
serangga netral ialah mata mereka yang berwarna biru. Beberapa jenis
serangga netral yang diperkenalkan dalam cd interaktif "Mengenal
Serangga" ialah belalang, kupu-kupu, ngengat, tonggeret, capung,
semut, kumbang kotoran, kepik, kunang-kunang, kumbang rusa.
40
Gambar 5.26 Kupu-kupu
Gambar 5.28 Tonggeret
Gambar 5.30 Sernut
Gambar 5.27 Capung
Gambar 5.29 Kepik
Gambar 5.31 Kumbang Rusa
41
3. Serangga Berbahaya: terdapat beberapa jenis serangga yang dapat
merugikan manusia baik secara langsung maupun tidak langsung.
Indikator dari serangga berbahaya ialah mata mereka yang berwarna
merah orange. Beberapa jenis serangga berbahaya yang diperkenalkan
dalam cd interaktif "Mengenal Serangga" ialah lebah, lalat, kecoa,
nyarnuk, belalang sembah, tawon.
Gambar 5.32 Lebah
Gambar 5.34 Nyamuk
Gambar 5.33 Lalat
Gambar 5.35 Belalang Sembah
42
5.2.4 Logo
Gambar5.36
Desain Visual Logo untuk CD interak:tif "Mengenal Serangga"
dilakukan setelah mendesain layout. Logo dibuat dengan gaya sederhana
agar dapat dibedakan dengan ilustrasi yang terdapat pada tiap halaman cd
interak:tif megenal serangga.
Objek visual pada logo ialah distilasi bentuk kaca pembesar dan
serangga ulat. Objek kaca pembesar dipilih karena melarnbangkan ilm.iah.
Ulat adalah representasi dari tahap awal dan pertumbuhan serangga,
sesuai dengan nama cd interaktif yaitu mengenal serangga.
5.2.5 Typeface
Pemilihan typeface sesuai dengan 4.2.2.4, yaitu:
1. Aria! Rounded MT Bold: digunakan pada nama karakter, penanda
halaman.
Gambar5.37
2. Calibri: digunakan pada bodytext.
Gambar 5.38
43
"Dalam satu komunitas
lebahbiasanya
[!
F
W
l{
terdapat seeker ratu,
lebah-lebah jantan dan
lebah-lebah betina
(pekerja).Masingmasing memiliki tugas
yang berbeda."
Gambar 5.39
Gambar 5.40
3. Jolli: digunakan pada link navigasi.
(:·--_- }
\.." ·-···· )
Gambar 5.41
Gambar 5.42
4. Cheri: digunakan pada ilustrasi dan link pada halaman enter dan home.
cePifii
direJir;ori
Gambar5.43
Gambar 5.44
44
5.2.6 Cover CD dan CD
•
Desain cover cd menggunakan format cover cd standar dengan
ukuran 12 em (panjang) x 14 em (Iebar) x 1 em (tebal).
•
mengenal'&
_Jerangga
Gambar 5.45
Cover depan
• 14 jenls seraneea yang
dapat dlpelajarl
• llustrasi yang berbeda
pada tiap jenis serangga
• Fltur "mengenal serangga"
yang menyuguhkan cerita
dua anak bemama Old!dan
Nora dalam petualangan
mereka dl dunia serangga.
Gambar 5.46
Cover belakang
45
Di dalam cover cd terdapat selembar kertas yang menjelaskan
flowchart dari cd interaktif "Mengenal Serangga" dan pengenalan 15
macam halaman. Ukuran kertas ialah 24 em x 12 em, namun dilipat
secara simetris menjadi dua agar dapat diselipkan dalam cover cd.
--"-"-t" --= ===-
·--1--
-±­
Gambar 5.47
mengenalfr1-i\
erangga
Gambar 5.48
Tampilan dalam cover cd
47
5.2.7 X-Banner
Media social kedua dari cd interaktif "mengenal serangga" ialah
sebuah x-banner yang berukuran A3. Visual yang ditampilkan oleh x­
banner merupakan visual yang sama pada poster, akan tetapi terdapat
tambahan informasi tentang konten cd interaktif"Mengenal Serangga".
mengenal ­
erangga
•
Gambar5.50
48
5.2.8 Pin
Pin merupakan item pelengkap (merchandise) dalam produk cd
interaktif "Mengenal Serangga". Pin berjumlah 10 buah dan
menggunakan ilustrasi jenis serangga pada tiap pinnya.
•
•
•
Gambar 5.51