Bab 5
Hasil Dan Pembahasan Desain
5.1. Konsep Visual 5.1.1 . Visual
Berdasarkan hasil penelitian yang mendalam dari penulis, keyword konsep dan image dari Jakarta Beatbox adalah funky, classy dan modern. Dimana visual dari Website Jakarta Beatbox didasarkan dari penerapan keyword tersebut yaitu dibuat dengan warna yang kontras, banner yang mempunyai pergerakan dan interaksi, dengan dominasi warna putih yang menonjolkan kontras antara background dengan objek. Didominasi oleh fotografi yang mempunyai hirarki antara objek satu ke objek yang lain.
5.1.2. Pemilihan Warna
Warna didominasi oleh warna putih. Warna lainnya adalah merah, hitam, kuning, orange, abu-abu dan merah muda. Warna putih melambangkan profesionalitas. Sementara warna merah, hitam dan kuning melambang jiwa dan semangat anak muda yang menggebu-gebu.
5.1.3. Typografi
Lato
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Impact Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Pemilihan font Impact yang lebih dinamis mengesankan kesan rebel dan anak muda yang dinamis. Font Impact mempunyai kontur yang dinamis.
Sementara penggunaan font Lato merupakan google font yang biasa dipakai untuk webpage pada umumnya.
5.2. Konsep Fotografi
Gambar 5.2: Hasil Fotografi 1
Fotografi dari Jakarta Beatbox dibuat dengan ciri khas dan gaya original Jakarta Beatbox yang menunjukan sifat rebel, nakal, ramai, berisik, namun fashionable dan berkelas. Terdapat 2 konsep fotografi yaudah pertama yang menggunakan wardrobe streetwear dan yang kedua yang menggunakan kemeja dan strap. 2 Konsep yang berlawanan ini menunjukan bahwa Jakarta Beatbox sebagai anak muda yang mempunyai kreatifitas tanpa batas dan dapat meramaikan suasana tetapi disaat bekerja berganti wajah menjadi professional dan berkelas. Semua desain menggunakan fotografi milik pribadi yang dibuat oleh penulis. Terdapat hirarki di fotografi yang menonjolkan leader, membedakannya dengan anggota walaupun dengan jumlah anggota yang genap.
Fotografi dilakukan di studio fotografi dengan latar belakang putih agar dapat menyatu dengan background website dan memberikan kontras kepada para personil dan merupakan kebalikan dari fotografi di website lama yang mempunyai background hitam, dan dengan teknik pencahayaan 3 point lighting.
Wardrobe dan property yang digunakan merupakan endorsement dari partner Jakarta Beatbox dimana menjadi sebuah requirement untuk tampil di website.
Gambar 5.3: Hasil Fotografi 2
Gambar 5.5: Hasil Fotografi 4
Gambar 5.7: Hasil Fotografi 6
Gambar 5.8: Hasil Fotografi
5.3. Perancangan Ulang Visual Website 5.3.1. Desain Banner Web 1
Gambar 5.9: Hasil Desain Banner Web 1
Banner yang terletak di home ini merepresentasikan citra Jakarta Beatbox sebagai anak muda yang funky dan berbakat dalam beatbox.
Warna didominasi warna biru agar kontras dengan logo dan objek di depan background menonjol.
Tulisan “Jakarta Beatbox” dengan logo Jakarta Beatbox merupakan Headline dengan font Impact italic berwarna putih. Tagline “Indonesia Finest Beatbox Artist” merupakan sub headline dengan font Impact Italic berwarna orange.
Foto personil pada banner muncul satu persatu dengan animasi fly in lalu setelah selesai gambar tersebut dapat bergerak mengikuti kursor. Hal ini merupakan bentuk interaksi pada user yang membuat website ini terasa lebih hidup.
Navigation bar diatas tampak transparan dan menyatu dengan background namun saat discroll kebawah navigation bar akan mempunyai list punya sehingga mudah di baca oleh us
5.3.2. Desain Banner Web 2
Gambar 5.10: Hasil Desain Banner Web 2
Desain banner web kedua masih menggunakan grid yang sama dan hirarki yang sama. Foto menggunakan foto dengan pakaian berkelas. Banner ini di peruntukan untuk klien dan user yang mengakses website Jakarta Beatbox dengan tujuan untuk melakukan kerja sama bisnis. Banner ini melambangkan Jakarta Beatbox yang walaupun masih muda tetapi dapat bekerja dengan professional. Terdapat hirarki di fotografi dimana hanya leader Jakarta Beatbox yang melihat ke kamera sementara anggota yang lain tidak melihat kamera.
Background menggunakan supergrafik yang blur dari foto tersebut hingga membuat kontras gambar dan logo serta navigation bar yang terletak diatas.
Foto personil pada banner ini juga bergerak mengikutin pergerakan mouse seperti pada banner yang pertama.
5.4. Halaman Home
5.4.1. Home page
Halaman home pada website Jakarta Beatbox ini merepresentasikan keseluruhan dari web. Semua info tentang Jakarta Beatbox dapat ditemukan di home, mulai dari kontak, prestasi, jam terbang, lokasi kantor, partner dan gallery.
Hal ini dibuat dengan perkiraan bahwa seorang user terutama klien yang seringkali sibuk dan tidak punya banyak waktu ketika membutuhkan informasi tentang Jakarta Beatbox, secara cepat user tersebut pun bisa mengetahui info yang ia butuhkan. Home Jakarta Beatbox sengaja dibuat sedemikian rupa sehingga selain mempunyai desain yang baru dan interaktif tetapi juga tetap efektif dan efisien dan memenuhi tujuannya yaitu untuk sarana penyedia informasi yang cepat dan akurat. Kelemahan yang ditemukan penulis pada koneksi internet Indonesia adalah, koneksi internet Indonesia masih lambat dalam memproses gambar yang berat. Semakin kompleks dan banyaknya item di sebuah web terutama gambar, maka akan semakin berat dan lama website tersebut untuk loading. Maka dari itu desain website Jakarta Beatbox dibuat se-compact mulai dari jumlah banner yang hanya 2 tetapi merepresentasikan pesan dari desain tersebut, konten dan item yang ada di dalam website pun semua mempunyai maksud dan tujuan masing-masing, semua konten atau item yang tidak berguna tidak diaplikasikan sehingga tidak memakan waktu loading terlalu lama dan tidak cepat menghabiskan bandwith.
Urutan tampilan home pada website pun sebagai berikut di halaman selanjutnya. Scrolling pada website ini menggunakan system parallax. Parallax sendiri adalah teknik dalam grafis komputer dan desain web, di mana gambar latar belakang dengan kamera bergerak lebih lambat dari gambar latar depan, menciptakan ilusi kedalaman dalam sebuah adegan 2D dan menambah perendaman. Parallax scrolling ini mendukung konsep dari website Jakarta Beatbox yang merupakan website interaktif namun professional, memanjakan mata para user sehingga website Jakarta Beatbox berbeda dari website yang lain dan kompetitornya.
5.4.2. Navigation Bar
Gambar 5.12: Bar Navigasi
Pada Navigation Bar atau Bar Navigasi dimana terdapat tombol menu berwarna putih yang berubah warna ketika kursor hover diatasnya dan ada garis orange yang menunjuk halaman tempat kita berada. Pada banner navigasi bar akan terlihat transparan sehingga banner serasa fullscreen namun ketika discroll kebawah bar navigasi akan berubah menjadi warna putih dengan tulisan hitam yang memudahkan visibilitas.
Menu yang terdapat pada bar navigasi adalah Home atau halaman utama, About us yaitu profile, Gallery yang terdiri dari Photo dan Video, Contact, Blog dan Shop. Juga terdapat icon search bagi user untuk menjadi item atau konten tertentu via tulisan. Font yang digunakan adalah lato untuk keseragaman font dalam website tersebut.
Grid sejajar dengan tombol navigasi sementara banner dan gambar background tetap fullscreen.
5.4.3. Video Clip
Satu-satunya cara paling efektif untuk menunjukan kualitas dari performance Jakarta Beatbox adalah lewat video. Video ini adalah jantung dari keseluruhan website Jakarta Beatbox, tanpa adanya video clip semua hanya kata-kata belaka dan gambar tanpa suara, tanpa mengetahui bagaimana musik dan suara yang di produksi oleh Jakarta Beatbox.
Video Clip ini adalah mash-up atau gabungan dari cover lagu-lagu yang hits di tahun 2015. Pemilihan lagu menggunakan lagu yang bisa dinikmati oleh seluruh lapisan masyarakat dan mengkesampingkan ego Beatboxer sebagai musisi Hiphop dan Electro, Jakarta Beatbox justru membawakan lagu pop hits.
Metode shooting video menggunakan stabilizer dan tripod dengan lensa fix dengan aperture 1.8 agar gambar yang dihasilkan lebih fokus ke personil Jakarta Beatbox sebagai object dan background blur, berlokasi di Ancol dan BSD, proses shooting memakan waktu 1 hari full.
Metode editing yaitu split screen menumpuk banyak layer video namun dengan point-point yang berbeda di layar sehingga memberikan kesan Jakarta Beatbox sedang memainkan musiknya secara bersamaan, diedit dengan aplikasi Sony Vegas Pro dimana pembuatan layer demi layer dan pergantian scene sesuai dengan personil yang paling dominan membunyikan satu suara ke suara yang lain. Mood warna agak kebiruan memberikan film look dengan 30 FPS bukan dengan 24 FPS dengan alasan agar pergerakan gambar terlihat lebih fluid dan modern.
Dibaris video clip di website terdapat tulisan “Mouth Music at it’s Finest” sebagai head line dengan logo microphone berwarna orange yang merupakan warna corporate color dan “Watch our official video clip bellow” sebagai sub headline. Tulisan di sebelah kiri merupakan body copy yang menjelaskan secara singkat apa itu Beatbox dan siapa itu Jakarta Beatbox. Semua font menggukan Lato. Semua tulisan dan video tesebut menggunakan efek animasi fly in sehingga saat user scroll kebawah tulisan, icon dan video masuk secara bergantian dengan animasi. Video juga merupakan embed dari Youtube. Keuntungan teknik ini adalah yang pertama
kerja website menjadi ringan karena video tersebut tersimpan di Youtube dan yang kedua Youtube merupakan digital asset nomor 1 Jakarta Beatbox sehingga user yang masuk dan menonton video ini otomatis menambahkan view dari video tersebut yang meningkatkan revenue atau pendapatan dari Youtube Jakarta Beatbox. Video tidak dibuat autoplay karena hal tersebut akan mengganggu user yang tidak mau menonton dan menambahkan kinerja website dan koneksi sehingga loading untuk website itu sendiri pun menjadi lambat.
Gambar 5.13: Baris Video Clip dan Twitter Feeds
5.4.4. Twitter Feeds
Twitter feeds yaitu adalah preview dari Twitter updates sebagai salah satu social media Jakarta Beatbox. Admin Jakarta Beatbox selalu cepat dalam melakukan update sehingga Twitter Jakarta Beatbox menjadi social media Jakarta Beatbox yang paling up to date terutama tentang kegiatan manggung, jadwal performance dan informasi lainnya yang dibutuhkan fans dank lien dari Jakarta Beatbox, di sini dapat diakses dan dilihat dengan mudah.
Logo Twitter diatas berbentuk bulat dan berwarna putih dan orange sebagai warna corporate. Tulisan “Twitter Feeds” merupakan headline lalu dibawahnya terdapat update dari Tweet Jakarta Beatbox yang paling baru dengan info seperti username dan waktu post. Lalu di bagian paling bawah terdapat icon social media lainnya yang dapat di klik untuk hyperlink ke social media tersebut.
Link di tweet menggunakan warna orange dan background menggunakan foto Jakarta Beatbox di atas panggung dengan konsep paralex, yaitu foto ikut scroll disaat page di scroll oleh user.
5.4.5. Profile
Baris Profile ini menampilkan tentang profil dari Jakarta Beatbox dimulai dari baris yang pertama menunjukan statistika followers dan subscriber. Social Media seperti Twitter, Facebook dan Youtube berperan sangat penting dalam promosi Jakarta Beatbox dan merupakan asset digital dimana jumlah followers dan subscribers menentukan level dan status social Jakarta Beatbox dan juga menentukan rate atau harga dari Jakarta Beatbox, karena Jakarta Beatbox seringkali mengerjakan kampanye digital dan iklan online dan juga event online.
Angka statistic ini menggunakan warna orange dan tulisan di bawahnya menggunakan warna hitam, dua-duanya dengan font Lato. Terdapat animasi scrolling angka pada saat user meng-scroll page kebawah.
Dibawah statistika followers terdapat tulisan profile singakat yang mempunyai button hyperlink yang apabila di klik langsung menyambung ke halaman “about us”. Tulisan “Who We Are?” adalah sub-headline dan tulisan dibawahnya merupakan body copy. Button untuk hyperlink ke halaman about us berbentuk kotak berwarna orange. Semua font menggunakan Lato dan terdapat animasi fly in disaat scrolling
Gambar 5.14: Baris Video Profile dan Gallery
5.4.6. Photo slide
Baris ini menyediakan informasi tentang jam terbang dan prestasi Jakarta Beatbox dalam bentuk foto. Foto yang ada disini merupakan foto yang ada di halaman gallery foto. Foto dapat langsung di slide dan dilihat satu persatu. Guna item ini adalah memudahkan user dalam mengakses informasi tersebut. Untuk gambar yang lebih lengkap dan resolusi full, user dapat langsung mengunjungi halaman gallery. Interface slide ini dibuat sesimple mungkin sehingga memudahkan user untuk mengakses dan membuat kerja website ringan dan loading cepat. Bagian atas merupakan tampilan full view dan yang bagian bawah merupakan thumbnail slide.
5.4.7. Contact
Baris Contact yang ada di home ini berfungsi untuk melihat alamat dan nomor kontak juga mengirimkan email langsung ke email Jakarta Beatbox. Email yang ditulis disini akan langsung terkirim ke Gmail Jakarta Beatbox. Memudahkan user dalam mengirim email, tanpa harus membuka aplikasi email mereka.
Tulisan “Keep in Touch With Us” merupakan headline dengan sub headline yang ada dibawahnya. Konten alamat dan nomor telpon di sebelah kiri merupakan body copy dengan icon telfon dan email yang informative dan dengan warna orange yang merupakan warna corporate dari Jakarta Beatbox. Terdapat juga icon social media. Background menggunakan foto studio Jakarta Beatbox yang paralex mengikuti scroll dari kursor / mouse.
5.4.8. Maps
Baris ini menampilkan Google Maps, lokasi tepat dimana kantor Jakarta Beatbox berada. Apabila diakses melalui handphone google maps ini bisa langsung di buka di aplikasi dan menunjukan arah menuju kantor Jakarta Beatbox.
5.4.9. Footer
Footer adalah bagian paling bawah dari halaman – halaman yang ada di website Jakarta Beatbox, semuanya seragam. Footer berisi tanda pembuatan website dan logo social media yang bisa di klik dan diakses. Font menggunakan Lato.
5.5. Halaman About us
Setelah melalui halaman Home dimana halaman Home merupakan representasi dari website secara keseluruhan, halaman selanjutnya adalah halaman About us yaitu sebuah halaman profil yang mencakup sejarah, latar belakang dan prestasi. Di halaman ini penulis menyisipkan header yang berlatar belakang hitam yang berisikan nomor kontak dan email serta tombol social media, gunanya sebagai navigasi mempermudah user yang ingin menghubungi Jakarta Beatbox setelah usai membaca profilnya. Header ini berlaku disemua halaman kecuali home. Alasan mengapa penulis tidak memberlakukan header ini di home yaitu yang pertama header ini mengganggu visibilitas banner yang bergerak dan membuat banner menjadi hilang kesan fullscreen / immersive-nya sementara di halaman lain selain home tidak terdapat slide banner sehingga membuat pengaplikasian header menjadi lebih baik.
Dapat dilihat digambar dibawah ini, header berada diatas bar navigasi tanpa mengganggu akses dan visibiltas bar navigasi. Tulisan “About Jakarta Beatbox” merupakan Headline dan tulisan dibawahnya merupakan body copy. Font yang digunakan adalah Lato.
Gambar 5.16: Halaman About us
5.6. Halaman Gallery
5.6.1. Photo Gallery
Halaman Gallery terdiri dari 2 sub page yaitu photo dan video. Pada sub page photo ini, terdapat foto-foto dari performance Jakarta Beatbox. Pada dasarnya user akan jarang membuka halaman ini karena sebenarnya foto yang ada disini sudah ada di halaman home yang berupa slide. Maka dari itu konten dan format photo gallery dibuat se-simpel mungkin agar membuat kerja website tidak menjadi berat. Kumpulan foto yang ada disini merupakan performance dan foto terbaik saja. Grid dibuat sejajar dengan bar navigasi dan grid pada thumbnail foto dibuat kotak and sejajar. Header dan Footer masih ada di halaman ini.
5.6.2. Video Gallery
Halaman ini memuat kumpulan video clip dari Youtube Channel Jakarta Beatbox. Video yang ditampilkan disini adalah video-video clip terpenting yang mereprentasikan Jakarta Beatbox. Terdapat Header dan Footer. Tulisan “Watch Our Videos” adalah Headline dari halaman ini. Lalu ada tulisan disebelah kiri yang menjelaskan tentang channel Jakarta Beatbox di Youtube, yang menggunakan font lato berwarna hitam dengan tulisan link berwarna orange dan juga tombol untuk hyperlink ke Youtube Channel Jakarta Beatbox yang berwarna orange.
Grid tetap mengikuti grid dasar yaitu sejajar dengan bar navigasi. Kumpulan thumbnail video di sebelah kanan tulisan dapat di click dan langsung di play di tempat.
5.7. Halaman Contact
Halaman ini merupakan halaman berisikan nomor kontak, alamat dan email baru user / klien yang ingin menghubungi Jakarta Beatbox. Tulisan “Jakarta
Beatbox” adalah Headline dan tulisan dibawahnya merupakan body copy. Disebelah kanannya terdapat form untuk mengirim email dan dibagian bawah terdapat google maps yang bisa diakses langsung untuk navigasi pada smartphone. Grid pada kontak dan form mengikuti grid dasar yang sejajar dengan bar navigasi lalu background paralex dan googlemaps dibuat fullscreen agar informasi dan gambar terlihat lebih jelas dan besar.
Gambar 5.19: Halaman Contact
5.8. Halaman Blog
Halaman blog berisi update kegiatan dan event Jakarta Beatbox. Format blog dibuat menjadi timeline yang terbagi menjadi 2 bagian dikiri dan kanan. Hal ini membuat desain dari blog yang unik dan tampil menarik namun tetap user friendly dan mudah diakses oleh user. Setiap posting mempunya kotak yang berisi thumbnail gambar yang bisa bergerak seperti slideshow dan judul serta detail posting. Semua font menggunakan Lato. Warna dari garis dan icon menggunakan warna corporate orange.
5.9. Halaman Shop
Halaman ini berisi merchandise dari Jakarta Beatbox yang bisa dibeli oleh user. Masih terdapat header dan footer pada halaman ini. Font yang ada di halaman ini menggunakan Lato. Terdapat thumbnail gambar yang grid nya sesuai dengan grid dasar yang mengikutin bar navigasi. Dibawah thumbnail terdapat nama item dan harga.
