Kesimpulan dari gambar 3.7.2, warna 1 pada analisa warna interaktif CV First Aid Kit ini telah ditemukan sebuah keyword yang terdapat di teori warna
kobayashi yaitu modern. Dan warna modern yang akan digunakan adalah putih, abu-abu, hitam. Warna-warna ini hanya digunakan untuk tipografi dan
background dari tipografi tersebut. “Kemampuan warna menciptakan impresi, mampu menimbulkan efek-efek tertentu” Secara psikologis diuraikan oleh J.
Linschoten dan Drs. Mansyur tentang warna. Kalau pada warna tipografi dan backgroundnya yang harus ditekankan
adalah Clarity suatu jenis huruf yang bisa dilihat secara jelas, Readibility keterbacaan dari jenis huruf tersebut, Legibility lebih menekankan apakah kita
bisa membacanya atau tidak, Visibility lebih menekankan pada keindahan jenis huruf.
3.3 Tahap Perancangan KaryaDesign
Tahap perancangan merupakan salah satu tahapan yang penting dalam pembuatan sebuah interaktif. Pada tahap ini, terdapat beberapa teknis perancangan
yang diperlukan untuk menerjemahkan metode perancangan yang telah dibuat. Teknis perancangan yang diperlukan, diantaranya adalah ide, konsep, struktur
navigasi, alur sistem interaktif, tipografi, karakter, animasi, warna, komposisi dan angle, dan audio yang digunakan.
STIKOM SURABAYA
1. Ide
Ide awal pembuatan interaktif untuk company profile ini lahir berkat melejitnya perusahaan baru yang masih belum mempunyai suatu media promosi
atau media untuk memperkenalkan perusahaannya terhadap masyarakat luas dan media untuk presentasi terhadap klien. Salah satunya dengan cara membuatkan
interaktif company profile. Melihat fenomena tersebut, banyak perusahaan yang bingung tentang hal
tersebut. Oleh karena itu, banyak orang yang membuatkan sebuah interaktif company profile dengan animasi atau konsep yang berbeda.
Konsep yang berbeda ini berawal dari film atau video animasi dalam bentuk stop motion, disamping itu masih jarang sekali para pembuat interaktif dalam
bentuk company profile ini menggunakan teknik stop motion dengan menggunakan beberapa gabungan dari foto.
2. Konsep
Pada dasarnya konsep dari interaktif ini adalah berawal dari video stop motion yang sering kita lihat dalam bentuk gambar atau foto dan bisa juga
menggunakan plug in untuk membuat suatu gerakan yang patah – patah atau stop motion. Dan pada akhirnya terpikirkan cara untuk menggabungkan antara
interaktif dan stop motion.
STIKOM SURABAYA
3. Struktur Navigasi
Hierarchical model baik bagi aplikasi untuk menemukan lokasi halaman dengan mudah. Untuk menggambarkan model tersebut dapat digunakan ilustrasi
dengan tree. Menurut Ariesto Hadi Sutopo, Multimedia Interaktif Dengan Flash, Yogyakarta, Graha Ilmu 2003. hal .37. Maka dari itu struktur dari interaktif
company profile ini menggunakan model hirarki yang bertujuan agar user friendly.
Gambar 3.8 Struktur Navigasi
STIKOM SURABAYA
4. Alur Sistem Interaktif
Gambar 3.9 Alur Sistem Interaktif
STIKOM SURABAYA
5. Typography Tipografi yang dipakai dalam interaktif ini adalah Sans Serif karena jenis
huruf ini memiliki garis-garis kecil dan bersifat solid. Jenis huruf sans serif lebih tegas, bersifat fungsional dan lebih modern. Berikut pada tabel 3.2 adalah analisa
untuk menentukan font yang akan dipakai.
Tabel 3.2 Pemilihan untuk font
Fungsi Font
Clarity Legibility
Mudah diingat
Sesuai Keyword
Jumlah
Arial 1
1 2
2 6
Calibri 1
1 1
2 5
Andale Mono 1
1 1
3 Century Gothic
1 1
4 4
10
Kesimpulan dari tabel 3.2 menurut forum group discussion, interaktif CV. First Aid Kit menggunakan font berjenis modern, menyesuaikan dari keyword
warna dan tipe fontnya adalah Century Gothic, yang melambangkan sifat keseriusan dan rapi. Sehingga, tampak konsep atau suatu inovasi baru.
STIKOM SURABAYA
6. Karakter
Gambar 3.9.1 karakter
Tabel 3.3 Pemilihan untuk Karakter
Kesan Objek utama
Santai Serius
Pemimpin Tegas
Jumlah
Orang laki-laki 3
2 2
3 10
Orang perempuan 2
2 1
2 7
Kesimpulan dari tabel 3.3 menurut forum group discussion adalah karakter pada gambar 3.9.1 yang digunakan dalam interaktif ini adalah seorang laki-laki,
alasan menggunakan orang adalah untuk memberikan kesan yang sebenarnya atau real dan kenapa karakter tersebut laki-laki, dikarenakan pada perusahaan First Aid
Kit ini anggota yang lebih banyak adalah laki-laki. Penampilan karakter ini menggunakan pakaian santai, tidak formal tetapi sopan yang disesuaikan dengan
latar belakang perusahaan tersebut.
STIKOM SURABAYA
7. Animasi Animasi dibagi menjadi 2, yaitu animasi tweening dan animasi frame by
frame. Animasi tweening adalah animasi yang dibuat mulai dari frame awal dan frame akhir, sedangkan flash membuat frame diantaranya in between. Animasi
frame by frame yaitu membuat sebuah pergerakan dari sebuah gambar atau objek yang diam still image frame demi frame-nya, menurut Aldwin Handriana,
mahasiswa Univ. Gunadarma. Oleh sebab itu, animasi yang akan digunakan pada interaktif ini adalah animasi frame by frame. Karena interaktif pada CV First Aid
Kit ini menggunakan banyak kumpulan foto dan menggunakan teknik stop motion. Mulai dari pintu awal intro, bubble chat pada keterangan suatu objek,
pada saat meng-klik menu gallery, services, info dan client.
8. Audio Atau disebut juga medium berbasis suara adalah segala sesuatu yang bisa
didengar dengan menggunakan indera pendengaran. Contoh: narasi, lagu, sound effect, back sound. Pada interaktif CV First Aid Kit ini dimasukkan beberapa
audio yang bisa mendukung suasana terutama pada animasinya. Dan lagu yang dipakai adalah Instrumental Jazz The Beatles – Ticket to Ride.
Alasan mengambil musik instrumental beraliran jazz karena musik jazz sangat santai, serius, pintar, ringan, terkesan eksklusif. Penjabaran ini diambil
menurut forum group discussion dan bisa dilihat di tabel 3.4.
STIKOM SURABAYA
Tabel 3.4 Pemilihan untuk genre music
Kesan Genre
Santai Serius
Ringan Eksklusif
Jumlah
Jazz 5
4 3
5 17
Rock 2
4 2
2 10
Grunge 2
4 1
1 8
Death Metal 1
4 1
1 7
9. Komposisi dan Angle Interaktif company profile CV. First Aid Kit ini menggunakan teknik stop
motion, yang berarti melakukan suatu pemotretan secara berturut-turut dan yang harus diperhatikan adalah komposisi, angle, dan perspektif. Secara sadar,
komposisi diterapkan setiap desain untuk mencapai keindahan, sehingga dalam setiap komposisi desain yang baik akan ditemukan, menurut Nirmana Dwimatra
Desain Dasar Dwimatra, Drs. Arfial Arsad Hakim, 1984: Oleh karena itu, komposisi yang akan diambil adalah Kesebandingan atau
lebih dikenal dengan sebutan proporsi. Proporsi adalah perbandingan ukuran pada unsur-unsurnya, baik perbandingan antar bagian maupun antara bagian terhadap
keseluruhan. Pengaturan besar kecilnya bagian merupakan prinsip yang erat kaitannya dengan keseimbangan.
STIKOM SURABAYA
Sedangkan angle adalah sudut pengambilan gambar atau foto pada kamera, dan angle yang akan dipakai adalah angle eye level dikarenakan sudut standar atau
normal. Efek yang ditimbulkan dari sudut pandang ini adalah seperti kita melihat langsung ke objek dengan mata kita, menurut Chandler, Daniel. Grammar of
television and film. Komposisi dan angle yang akan dipakai sesuai dengan teori adalah nomor satu. Karena tidak terlalu melelahkan mata, dan workspace yang
didapat menjadi seimbang. Tidak terlalu ke kanan jauh ataupun ke kiri jauh. a. Angle
Gambar 3.10 Angle
STIKOM SURABAYA
b. Komposisi Info
Gambar 3.11 Komposisi info
Alasan memilih nomor satu adalah karena tidak terlalu membuat mata kita lelah, dan dekat dengan objek yang dituju. Sedangkan angle eye level
membuat mata kita tidak terlalu repot melihat terlalu atas maupun bawah.
STIKOM SURABAYA
c. Audio
Gambar 3.12 penempatan audio
Alasan memilih nomor empat adalah karena pemahaman pemikiran orang terhadap pengaturan audio selalu diposisi sudut atas kanan. Apabila
ditaruh bagian bawah maka orang tersebut kesulita untuk mencarinya.
STIKOM SURABAYA
d. Button Back Services
Gambar 3.13 penempatan button back
Alasan memilih nomor empat adalah karena focus of interest dari back to home tepat ditengah, jadi secara tidak sadar mata kita akan terarah ke
button tersebut.
STIKOM SURABAYA
e. Content Info
Gambar 3.14 penempatan content info
Alasan memilih nomor empat adalah karena bagian kiri dari papan sudah terisi logo dan foreground, sehingga bagian kanan kosong. Oleh
karena itu, bagian sisi kanan diisi agar memiliki keseimbangan.
STIKOM SURABAYA
f. Logo
Gambar 3.15 penempatan logo
Alasan memilih nomor tiga adalah karena bagian atas disebelah kiri tempat yang kosong dan tidak mengganggu jalannya animasi ataupun
transisi dan logo tersebut menetap di sebelah kiri.
STIKOM SURABAYA
g. Sketsa Intro
Gambar 3.16 Sketsa intro
h. Sketsa home
Gambar 3.17 Sketsa home
STIKOM SURABAYA
i. Sketsa gallery
Gambar 3.18 Sketsa gallery
j. Sketsa client
Gambar 3.19 Sketsa client
STIKOM SURABAYA
k. Sketsa info
Gambar 3.20 Sketsa info
l. Sketsa services
Gambar 3.21 Sketsa services
STIKOM SURABAYA
3.6 Rancangan Publikasi Karya
