Terkahir, harapan saya semoga Perusahaan Jimbaran Hijau ke depan nya akan terus maju dan memperoleh kesuksesan. BAB V KONSEP PERANCANGAN 5.1. Konsep Dasar Perancangan Website ini dirancang dengan konsep website edukasi yang menonjolkan kelebihan pada aspek estetika kemajuan Ilmu dan tekhnologi dan menampilkan ciri khas dalam perancangannya. Website ini dirancang untuk angota karate UMB dan umum sebagai media promosi, media komunikasi, media informasi dengan mengusung tema latihan beladiri karate yang diwakili dengan penggambaran animasi berupa gerakan kihon karate sebagai button yang terkoneksi kesetiap halaman website dengan tampilan layout disesuaikan style jepang yang sederhan tetapi mempunyai ciri khas. Konsep layout berupa style jepang yang dimaksud meliputi elemenelemen yang diambil dari arsitektur jepang, budaya jepang dan gerakankihon karate, kemudian elemen-elemen tersebut akan diterapkan kedalam proses perancangan website karate. Website karate UMB ini bersifat edukatif responsive dan aplikatif bagi pengguna. Kemudian dimasa yang akan datang website ini akan dikembangkan menjadi website dinamis dan tetap menjadi sebuah aplikasi yang dapat memudahkan pengguna karena dapat diakses 63
melalui berbagai macam alat komunikasi/device, sehingga tujuan yang hendak dicapai akan sesuai dan tepat sasaran. Selain itu website karate UMB ini mempunyai perbedaan dengan website karate yang sudah ada, yaitu mempunyai orisinalitas dalam proses perancangannya dan button-button yang berbentuk gerakan kihon karate yang bergerak mengelilingi logo Universitas Mecubuana. 5.2. Tujuan Perancangan Website Tujuan dari perancangan website karate UMB ini salah satunya adalah untuk menyampaikan informasi dan komunikasi dalam bentuk online. Adapun tujuan lain dari perancangan ini adalah : Bertujuan untuk mempromosikan karate UMB lewat online, memberikan artikel dan pembelajaran lewat media online. Memberikan kesadaran kepada mahasiswa UMB khususnya untuk dapat menumbuhkan motivasi dan semangat belajar bela diri karate. Untuk sarana diskusi atau komunikasi antara sesama anggota karate UMB senior ataupun juniornya. Sebagai tempat menyimpanan data/dokumentasi hasil kegitankegiatan karate UMB. 64
Bagi yang ingin belajar karate bisa mengakses daras-dasar karate, asal mula karate dan manfaat karate dalam kehidupan. Sehingga akan timbul ingin belajar karate. 5.3. Strategi Perancangan Untuk Promosi Strategi Perancangan yang dibuat untuk mempromosikan dan membuat website karate UMB semakin terkenal yaitu gencar dengan melakukan promosi lewat media offline dan media online seperti lewat brosur, kartu nama, flayer, spanduk, tshirt, rain cover tas, memasang bordir alamat website disabuk karate dan sticker, sedangkan dengan media online dengan cara aktif dijejaring sosial seperti facebook, upload video motion karate UMB di youtube dan memasang banner iklan diberbagai website gratis seperti forumiklan.com dan terhubung dengan website resmi Universitas Mercu Buana, sehingga dengan sering melihat banner tersebut mulai terbentuk branding image sehingga pengunjung dapat tertarik untuk mengakses website ini. 5.4. Analis 5W + 1H A. What (Apa) website karate UMB ini dirancang dan didesain dengan style Jepang dengan didukung dengan tampilan yang sederhana dan 65
menarik yang tujuannya untuk memudahkan interaksi sesasa anggota karate UMB, mendokumentasikan hasil kegiatan karate dan memperkenalkan karate UMB lewat media online. B. Why (Kenapa) Karena karate UMB belum mempunyai website untuk medokumentasikan hasil kegiatan, memberikan artikel-artikel pembelajaran dalam bentuk online. Maka dengan ini penulis ingin merancang sebuah website untuk memenuhi kebutuhan-kebutuhan tersebut dengan tampilan yang berbeda dengan website karate yang sudah ada. C. Who (Siapa) Website karate UMB ini di rancang dan disediakan untuk anggota karate UMB serta untuk umum yang ingin mengetahui karate secara online. D. When (Kapan) Website karate UMB ini dirancang dan akan dipublikasikan untuk mejawab semua kebutuhan-kebutuhan yang selama ini diperlukan oleh UKM beladiri karate UMB. 66
E. Where (Dimana) website karete ini dapat diakses dimanapun berada asalkan berkoneksi dengan jaringan internet. F. How (Bagaimana) Website karate ini akan di rancang dengan style Jepang dengan interface yang sederhana tetapi layout yang menarik dan mempunyai ciri khas. Website karate UMB ini juga dilengakapi dengan fasilitas forum yang berkoneksi langsung dengan jejaring sosial facebook. 5.5. Target Sasaran Adapun target atau sasaran audien website ini dikhususkan untuk: a. Demografi umum usia 11 30 tahun. Status Ekonomi Sosial. Semua golongan (A,B,C). Pekerjaan (pelajar, mahasiswa, karyawan). Senang dengan karate atau yang ingin mengetahui tentang beladiri karate. b. Geografi Jakarta dan sekitarnya. Indonesia umumnya. 67
c. Psikograf Calon peminat. 5.6. Proses Perancangan Tahap-tahap yang dilakukan dalam proses perancangan website adalah: 5.6.1. Pra Produksi Dalam proses pra produksi, penulis melakukan tahap-tahapan sebagai berikut: 1. Pengumpulan data/materi website yang di butuhkan meliputi: Profile (berisi tentang profil karate). Corporate indentity (logo, visi, misi, struktur organisasi karate UMB, list of member karate UMB). Activities (kegiatan karate, agenda kerja karate UMB, artikel karate dan video karate). Gallery (foto hasil kegiatan karate UMB). 2. Penentuan nama website www.karateumb.com. 3. Menentukan tema dan tujuan website meliput: Character (karakteristik tampilan website). 68
Layout (tata letak website). Typograph (karakter tipografi). Color (dominasi warna website). 4. Pembuatan kerangka situs meliputi: Content Management (manajemen isi/halaman website). Media Management (manajemen penyusunan foto, gambar). Sitemap Flowchart (skema/bagan alir halaman website). 5. Penyusunan jadwal pengerjaan website (time schedule), meliputi: Barchart Time Schedule (Jadwal pembuatan website). Bentuk Kegiatan A. Pengumpulan Data 1. Survey 2. Data Profile B. Analisan data 1. Pengelompokan data 2. Analisa SWOT 3. Analisa 5W + 1H 4. Referensi karya sejinis C. Konsep Konten Website 1. Konsep pembahasan 2.Menentukan materi 3. Menentukan struktur layout 4. Menetukan karakter 5. Membuat desain layout 6. Coloring layout 7. Membuat animasi 8. Finishing D. Apresiasi Karya 1. Perijinan tempat Bulan I Bulan II Bulan III Bulan IV 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 69
2. Sewa panel display pameran E. Pengemasan Karya Pameran 1. Hosting karya 2. Pengamasan karya F. Pemasangan karya G. Publikasi Pameran Tabel 5.1 Jadwal pembuatan website Terkait dengan jadwal pengerjaan website ini, maka perlu dibuat jadwal pembuatan agar proyek ini bisa selesai tepat pada waktunya. Lama pengerjaan sekitar 4 bulan. 5.6.2. Produksi Dalam mendesain website dimulai dari menentukan bentuk desain serta layout, elemen-elemen yang terdapat dalam website, kombinasi warna, dan bentuk huruf (tipografi) yang sesuai dengan karakteristik website. Dalam proses produksi penulis melakukan beberapa tahapan, dimulai dengan menentukan desain layout yang memenuhi kreteria layout yang baik, menentukan warna yang sesuai dengan konsep/tema, dan memilih tipografi yang tepat sesuai dengan karakteristik website. Selanjutnya melakukan pengcodingan dengan mengubah desain website menjadi website yang nyata yang diwujudkan dalam beberapa baris code. Setelah melakukan pengcodingan tahap selajutnya melakukan pengujian terlebih dahulu supaya tidak melakukan pengulangan pekerjaan yang tidak perlu. 70
Software yang gunakan, yaitu Adobe Photoshop CS3 dan Illustrator CS3 untuk pengerjaan sketsa kasar hingga pembuatan layout. Javascript, jquery untuk pengerjaan animasi dan perapihan dari website ini. 5.6.3. Pasca Produksi 71
Dalam prose pasca produksi penulis melakukan tahapan-tahapan terakhir dalam pembuatan website karate diantaranya, melakukan test pada website, kemudian mempublikasikan website teresbut kedalam domain dan hosting yang telah dibeli, Dalam pembuatan website ini domain dan hosting dengan menggunakan IIXmedia. Selanjutnya melakukan promosi situs web, karena promosi merupakan tahap yang sangat penting untuk membuat situs web menjadi terkenal. Promosi yang di lakukan dengan cara offline maupun online. Terakhir melakukan perawatan dan memanage website. 72
Gambar 5.1 Invoice pembelian domain dan hosting 5.7. Konsep Perancangan Website ini dirancang dengan konsep website edukasi yang menonjolkan kelebihan pada aspek estetika, kemajuan Ilmu dan tekhnologi dan menampilkan ciri khas dalam perancangannya, sebagai media informasi dan komunikasi dengan mengusung tema aktifitas beladiri karate yang ditampilkan dengan layout beranda yang menampilkan geraka kihon karate. Setiap gerakan karate tersebut dijadikan button untuk ngelink ke halaman lain. Animasi gerakan karate tersebut mengelilingi logo Universitas Mercu Buana. Animasi gerakan tersebut mewakili dari aktifitas kegitan latihan karate UMB. Animasi yang berputar dimana mengelilingi logo Universitas Mercu Buana dapat diartikan sebagai suatu hubungan bahawa aktifitas beladiri karate secara tidak langsung berada dalam naungan Universitas Mercu Buana, selain itu untuk menarik perhatian bagi pengunjung website untuk mengetahui secara langsung gerakan dasar dari karate. Sehingga dapat diartikan bahwa salah satu sarana pendukung untuk menyampaikan inti dari website ini Berikut konsep desain yang digunakan dalam membuat website ini: 73
5.7.1. Layout Tampilan layout terinspirasi dari bangunan bergaya arsitektur jepang yang memiliki ciri kesederhanaan, natural dan memiliki warna yang soft dan menggunakan warna-warna analogous dengan penggabungan warna dari sabuk karate, huruf kanji sebagai background dan kihon karate yang yang mengelililing logo Universitas Mercu Buana. Dengan desain yang senderhana dan mempunyai tampilan yang menarik dihalaman beranda diharapkan dapat memberikan kesan familiar terhadap latihan karate. Dengan demikian diharapkan desain website ini dapat menarik perhatian mahasiswa UMB atau khalayak umum untuk berpartisipasi mengunjungi website ini. Gambar 5.2 Desain halaman beranda 5.7.2. Button Website ini menggunakan button yang berbeda yaitu button berbetuk animasi kihon karate dasar yang menggambarkan aktifitas karate. 74
Gambar 5.3 Button 5.7.3. Warna Warna yang digunakan dalam website ini terinspirasi dari sabuk karate (obi) dan seragam karate (karate-gi) dan gaya arsitektur jepang yaitu putih, kuning coklat dan warna soft analogus. Gambar 5.4 Warna layout website Warna yang digunakan dalam website ini adalah warna web safe RGB. 5.7.4. Tipografi Font yang digunakan dalam proses perancangan website karate adalah perpaduan huruf kanji dan latin yang mempunyai style jepang atau mendekati dengan font kanji jepang. Pemilihan font yang tepat sangat diperlukan demi memudahkan keterbacaan navigasi web dan teks pada isi halaman web. Maiandra GD Korean Calligraphy Chinese takeaway 75
Gambar 5.5 Font yang digunakan dalam perancangan website 5.7.5. Animasi Konsep animasi dalam website ini menggunakan javascript, jquery yang kemudian digerakan sesuai konsep yang diinginkan, Animasi yang digunakan dalam website ini menggunakan animasi-animasi yang sederhana yaitu hanya button kihon karate yang mengelilingi logo Universitas Mercu Buana secara kontinue dengan tampilan hampir membentuk 3d dan ketika mouse didekatkan kepada button gerakan itu akan berhenti sejenak dan button akan berputar dan selanjutnya ketika diklik akan masuk ke laman sesuai dengan button yang diklik. 76
Gambar 5.6 Animasi layout Animasi difokuskan pada halaman utama dengan konsep interaktif, karena pada halaman ini yang menjadi kunci utama untuk menarik pengunjung agar mengunjungi situs ini. 5.7.6. Sound Untuk menarik perhatian pengunjung website penulis menggunakan audio berupa sound effect dengan musik instrumental jepang. Audio akan digunakan sebagai back sound pada website ini, audio bersifat loop jadi mengulang-ulang selama orang masih melihat website tersebut, maka audio itu akan terus berjalan. 5.7.7. Video video yang di tampilkan dalam website karate ini adalah, video tentang teknik latihan karate, dasar-dasar karate, serta motiongrapic kumpulan karate-ka UMB dan sesi latihan di dojo 5.7.8. Special Effect Penggunaan warna yang soft yang terlahir dari filosofi sabuk karate dan gaya arsitektur jepang serta mempunyai background yang menggambarkan style jepang. Sound effect instrumental jepang serta animasi kihon karate dihalamana beranda yang menjadi button yang terhubung kehalaman-halaman berikutnya. 77
5.7.9. Desain Layout Sketsa desain layout Gambar 5.7 Sketsa awal halaman beranda 78
Gambar 5.8 Bentuk jadi halaman beranda Desain Button 5.8. Story Board Gambar 5.9 Proses desain botton menu No Keterangan Visual Audio Content: - Logo karate UMB -Background huruf kanji ditampilkan Fullscreen. - Tombol Lihat Profil - Tombol link ke facebook 1 Halaman beranda - Tombol link ke youtube Backsound (looping) - Button menu berbentuk kihon karate Footer: Copyright Header: Logo, Navigasi Content: - Foto anggota karate 2 Halaman profile - Teks sejarah karate -visi misi, anggota karate dll. 79
- Video motion graphic Backsound (looping) karate UMB Footer: Copyright Header: Logo, Navigasi Content: - Kumpulan foto-foto hasil dokumentasi kegiatan 3 Halaman galery Backsound (looping) Footer: Copyright Header: Logo, Navigasi Content: - Berisi tentang video hasil kegitan,tutorial tentang teknikteknik karate - video motion graphic 4 Halaman video Karate UMB Backsound (looping) Footer: Copyright Header: Logo, Navigasi Content: - Kontak telepon - Teks alamat 5 Halaman video - Form Kontak Backsound (looping) Footer: Copyright Header: Logo, Navigasi Content: - Artikel tentang karate - Agenda karate FORKI 6 Halaman blog - Foto-foto karate Backsound (looping) Footer: Copyright Tabel 5.2 Story board perancangan website 5.9. Sitemap 80
Pemetaan pada website bertujuan agar perencanaan web semakin mudah dan mempermudah sistem navigasi nantinya. Dengan melakukan hal yang demikian maka urutan halaman akan lebih mudah dibuat dan struktur website akan menjadi rapih. Bagan 5.1 Sitemap link website 5.10. Project Preview Ukuran halaman: 1024px X 768px 81
Gambar 5.10 Halaman beranda Ukuran halaman: 1024px X 768px Ukuran halaman: 1024px X 768px Gambar 5.11 Halaman profile 82
Gambar 5.12 Halaman galery Ukuran halaman: 1024px X 768px Ukuran halaman: 1024px X 768px Gambar 5.13 Halaman video Gambar 5.14 Halaman kontak 83
84
Ukuran halaman: 1024px X 768px Gambar 5.15 Halaman blog 5.11. Biaya Produksi 5.11.1. Biaya pada saat pra produksi Pada Proses pra produksi, biaya yang dibutuhkan untuk membuat website ialah untuk pembelian: Domain : Rp. 88.500 Hosting 100mb : Rp. 150.000 5.11.2. Biaya pada saat proses produksi Biaya Coding untuk pengembangan website Rp. 2.000.000 Lain-lain Rp. 500.000 85
5.11.3. Biaya pada saat proses pasca produksi Sewa stan untuk pameran Tugas Akhir Rp. 250.000 Cetak untuk pameran Tugas Akhir Rp. 900.000 Lain-lain Rp. 400.000 5.12. Perincian Biaya PRA PRODUKSI No Kegiatan Biaya 1 Transportasi 500.000 2 lain-lain 400.000 TOTAL 900.000 PRODUKSI No Kegiatan Biaya 1 Domain 88.500 2 Hosting 100Mb 150.000 3 Web Development (coding) 2.000.000 TOTAL 2.238.500 PASCAPRODUKSI No Kegiatan Biaya 1 cetak media promosi 400.000 2 sewa stand pameran 250.000 3 lain-lain 400.000 TOTAL 1.050.000 TOTAL SELURUHNYA 4.288.500 Tabel 5.3 Princian biaya 86
5.13. Media Promosi Pendukung Tshirt Gambar 5.16 Tshirt tampak depan dan belakang 87
Sticker Ukuran 6cm x 2cm Gambar 5.17 Sticker Mousepad Ukuran 20cm x 20cm Gambar 5.18 Mousepad 88
Mug Gambar 5.19 Mug Gambar 5.20 Pin 89
5.14. Dokumentasi Pameran A. Konsep pameran Gambar 5.21 Konsep pameran Pohon desain Gambar 5.22 Stand pameran 90
B. Interaktifitas Pengunjung Pameran Gambar 5.23 Interaktifitas pengunjung pameran 1 91
Gambar 5.24 Interaktifitas pengunjung pameran 2 92
C. Komentar Pengujung Gambar 5.25 Komentar pengunjung pameran 93