BAB IV TEKNIS PRODUKSI MEDIA 4.1 Proses Pra Produksi Proses analisa produksi media merupakan salah satu urutan dari beberapa kinerja yang terorganisir dan sistematis agar pencapaian dari sebuah karya desain website ini mampu mengkomunikasikan pesan secara tepat dan jelas. Mulai dari tahap pra produksi, produksi, hingga pasca produksi dan semua proses tersebut di susun berdasarkan urutan. Penulis mencari beberapa referensi yang berhubungan dengan desain website di dalam proses pra produksi, mencari beberapa informasi dan referensi yang berkaitan dengan desain website serta menganalisis dan mengolahnya agar dapat menjadi dasar pemikiran dari konsep yang akan dibuat di dalam website perusahaan tersebut 1. Referensi website Dalam pembuatan desain website ini penulis membutuhkan beberapa referensi desain website, hal ini bertujuan sebagai media untuk membuka pemikiran penulis agar nantinya penulis dapat meng-eksplore dan mengimajinasikan ide-ide yang ada di pikiran penulis sehingga dengan sendirinya penulis akan menemukan pemikiran baru yang muncul dari apa yang telah di lihat. Berikut ini adalah beberapa jenis desain website yang menjadi referensi penulis, yaitu : a. http.//www.batkkomar.com/ 98
b. http.//www.batikunik.com/ c. http.//www.djoeraganbatik.com/ 2. Referensi Buku Penulis lebih banyak mencari referensi melalui internet, karena internet banyak sekali menyediakan tutorial dan juga e-book yang berkaitan dengan desain website. Namun bukan berarti penulis tidak mencari referensi tanpa menggunakan buku, ada beberapa buku yang menjadi referensi penulis, yaitu : a. Membangun Website dengan Adobe Photoshop b. Panduan Lengkap Desain Web Macromedia Dreamweaver c. Rekayasa Web 4.2 Proses Produksi Website Sebelum memulai pembuatan website, penulis mempersiapkan software apa saja yang akan di gunakan. Pembuatan website Batik Gadis Collection dirancang dengan menggunakan basis html. Software yang digunakan ialah Adobe Photoshop, Macromedia Dreamweaver, Macromedia Flash 8, dan Mozila Firefox. Website ini memiliki ukuran yaitu adalah 1152px x 864 px dan 1400 px x 1600 px. Langkah selanjutnya penulis membuat flowchart. Tujuan utama dari pembuatan flowchart adalah untuk menggambarkan sebuah tahapan penyelesaian masalah secara sederhana, terurai rapi, dan dan jelas. 99
Gambar 4.1 Flowchart Batik Gadis Collection Keterangan: 1. Beranda Di bagian beranda ini berisi tentang sebagian dari produk-produk yang ditawarkan oleh Batik Gadis Collection, daftar kategori produk dan penjelasan singkat dari produk-produk Batik Gadis Collection. 2. Produk Berisi tentang produk-produk yang ditawarkan oleh Batik Gadis Collection dan penjelasan mengenai produk. 100
3. Kontak Berisi tentang cara-cara menghubungi perusahaan tersebut baik dari via email, via phone di workshop Batik Gadis Collection. 4. Profil Berisi penjelasan tentang company profile Batik Gadis Collection. 5. Cara Pemesanan Berisi tentang bagaimana cara pemesanan produk-produk yang ditawarkan oleh Batik Gadis Collection. Untuk pemesanan produk yang ada di halaman website, dapat anda lakukan dengan 2 cara yaitu sebagai berikut : 1. Order melalui Shopping Cart (Belanja Online) 2. Order melalui telepon, SMS (Short Message Service) atau BBM (BlackBerry Messenger). 4.2.1 Proses Sketsa Pada tahap awal, proses sketsa di lakukan untuk lebih memudahkan dalam berfikir. Proses sketsa ini di lakukan pada media kertas gambar. Sketsa yang di buat adalah sketsa kerangka untuk opening, dan framing. 101
Gambar 4.2 Sketsa Pembuka Gambar 4.3 Sketsa Framing 102
Gambar 4.4 Sketsa Halaman Web 4.2.2 Proses Digital Imaging Tahap digital imaging ini adalah tahap dimana proses pembuatan layout dilakukan pada software Adobe Photoshop. Untuk pewarnaan menggunakan warna standar RGB pada software Adobe Photoshop. Tahap digital imaging ini terdiri dari pembuatan layout header, footer, background, dan framing. Berikut ini adalah screenshoot dari software Adobe Photoshop : 103
Gambar 4.5 Warna Background Gambar 4.6 Pembuka 104
Gambar 4.7 Header Gambar 4.8 Footer 105
Gambar 4.9 Frame Gambar 4.10 Tampilan halaman website 106
4.2.2 Proses Animasi Tahap animasi ini adalah tahap dimana proses pembuatan animasi dilakukan pada software Macromedia Flash 8. Tahap animasi ini digunakan untuk membuat animasi mengetik pada header di setiap halaman website Batik Gadis Collection. Untuk membuat animasi mengetik ini, dapat dilakukan dengan berbagai cara yaitu font by font, motion tween, shape tween dan classical tween. Berikut ini adalah screenshoot dari software Macromedia Flash 8 : 4.2.3 Proses Me-Layout Website melalui Macromedia Dreamweaver Tahap website ini adalah tahap dimana proses pembuatan website dilakukan pada software Macromedia Dreamweaver. Untuk perwarnaan menggunakan warna standar RGB. Tahap website ini digunakan untuk memasukkan link-link dan menatanya ke dalam versi HTML. Berikut ini adalah screenshoot dari software Macromedia Dreamweaver : 107
4.2.4 Proses Browsing Dengan Mozila Firefox Mozila Firefox digunakan untuk teknis produksi akhir agar bisa dilihat dan digunakan sebagai media browsing. Berikut ini adalah screenshoot dari software Mozila Firefox : 108
Dalam pembuatan website ini terdiri dari beberapa menu. Yaitu : 1. Pembuka 2. Beranda 3. Produk 4. Kontak 5. Profil 6. Cara Pemesanan 7. Masuk 109
1. Pembuka Pembuka pada pembuatan website, merupakan tahap awal atau merupakan menu pilihan paling utama yang isinya sangat singkat, padat, dan jelas, yang menggambarkan suatu produk tersebut. Pada menu ini, terdapat beberapa pilihan menu seperti website. Gambar 4.11 Pembuka Background Pembuka pada website ini menggunakan gambar ornamen Art Nouveau dan berbagai produk-produk batik. Tujuannya agar para pengunjung dapat langsung mengetahui ciri khas dari website Batik Gadis Collection dan bahwa website ini merupakan website batik yang menawarkan produk-produk batik. Sehingga akan muncul rasa penasaran untuk lebih mengetahui website Batik Gadis Collection. 110
Gambar 4.12 Logo Batik Gadis Collection Gambar 4.12 merupakan logo Batik Gadis Collection. Logo ini merupakan unsur yang sangat penting. Karena merupakan bagian dari indentitas website batik yang paling utama. Logo ini tidak mengalami perubahan, karena di buat langsung dari develover Batik Gadis Collection. Gambar 4.13 Button Website Gambar 4.13 merupakan button untuk memasuki ke halaman beranda. Di buat lebih sederhana agar terlihat paling berbeda. Namun dibalik kesederhanaan button ini penulis masih menggunakan unsur-unsur yang ada di website Batik Gadis Collection, yaitu Art Nouveau yang pada setiap ujung frame button melambangkan ciri khas Batik Gadis Collection. 2. Beranda Beranda merupakan istilah untuk menyebut halaman pertama web yang berisi daftar isi sebuah situs web yang akan muncul jika sebuah situs web diakses. Hampir sama dengan istilah opening (pembuka), namun opening lebih singkat dan lebih sederhana. Layout untuk menu Beranda, Produk, Kontak, Profil, Cara 111
Pemesanan dan Masuk hampir mempunyai kesamaan. Namun yang membedakan hanya isi dn kontennya. Gambar 4.14 Tampilan Beranda Pada halaman Beranda, layout yang ada pada frame di buat 3 sisi seperti standar layout beranda pada umumnya. Berikut adalah gambar sisi layout frame pada beranda. 112
Pada sisi 1, umumnya terdiri dari sub menu dari Beranda disertai dengan menu untuk akun bank, pengiriman serta pengunjung, sisi 2 berisikan isi singkat dari isi website dan biasanya disertai dengan gambar produk yang ditawarkan dan pada sisi 3 berisikan menu masuk, daftar belanja, produk terlaris, testimoni dan berita mengenai website Batik Gadis Collection. Pada halaman Beranda ini, tampilan visual berbeda dengan halaman Pembuka sebelumnya. Lebih lengkap disertai animasi serta juga terdapat tampilan header dan footer. 113
Gambar 4.15 Tampilan Header Gambar 4.15 merupakan header dari website Batik Gadis Collection. Visual ini merupakan salah satu motif batik dan ornament Art Nouveau dengan menggunakan warna coklat dan kuning keemas-emasan agar terlihat klasik dan sesuai dengan ciri khas Batik Gadis Collection itu sendiri serta ciri khas dari batik di Indonesia. Animasi mengetik ini di sesuaikan dengan landscape pada Edwardian Script ITC. Berikut adalah potongan gambar animasi mengetik pada web Batik Gadis Collection : 114
Gambar 4.16 Tampilan animasi pada header 115
Tujuan di buatnya animasi mengetik ini pada tag line, agar pengunjung lebih mendalami makna dari tag line tersebut. Sehingga para audience yang melihat website Batik Gadis Collection ini semakin penasaran dengan isi dan produk-produk yang ditawarkan melalui website Batik Gadis Collection. Gambar 4.17 Tampilan frame Framing ini dibuat agar website yang di layout lebih rapih dan teratur. Desain framing ini di buat dari penggabungan layer-layer menggunakan Adobe Photoshop. Warna pada frame ini disesuaikan dengan ciri khas Batik Gadis 116
Collection itu sendiri serta ciri khas dari batik di Indonesia.yang berlatar klasik yaitu warna cokelat muda, hijau dan kuning keemas-emasan. Pada bagian tombol menu utama, penulis menggunakan warna cokelat. Warna tersebut sedikit mencolok agar terlihat kontras karena background yang di gunakan berwarna hijau. Selain lebih moncolok di mata, warna cokelat juga merupakan lambang kekuatan pada batik di Indonesia. Pada tombol menu utama, penulis juga menggunakan ornament art nouveau, agar terlihat lebih menunjukkan kesan batiknya dengan latar klasik, karena art nouveau merupakan ciri khas dari batik. Gambar 4.18 Tampilan tombol menu utama Gambar 4.18 merupakan desain untuk tombol pada menu utama. Desain tombol menu utama terdapat di setiap halaman website Batik Gadis Collection. Desainnya terkesan klasik dan elegan sesuai dengan ciri khas Batik Gadis Collection. Gambar 4.19 Tampilan tombol sub menu 117
Gambar 4.19 merupakan tombol-tombol pada sub menu, yang terdiri diri Produk Gadis Blus, Produk Gadis Dress, Produk Gadis Kebaya, Produk Gadis Syal, Produk Gadis Bahan, Masuk dan Keluar. Tombol-tombol ini menggunakan perpaduan warna hijau dan putih, serta menggunakan ornament Art Nouveau yang berwarna kuning keemas-emasan, agar tetap terlihat klasik dan tetap tetap dengan ciri khas Batik Gadis Collection dan batik di Indonesia. Masing-masing tombol tersebut berguna untuk melanjutkan ke setiap halaman yang sesuai dengan pilihan pengunjung, apabila ingin melihat produk-produk yang diinginkan lebih rinci lagi. 3. Produk Gambar 4.20 Produk 118
Pada tampilan menu produk terdapat informasi mengenai produk-produk yang akan ditawarkan oleh Batik Gadis Collection seperti blus, dress, kebaya, syal dan bahan. Pada halaman produk ada 4 pilihan halaman yaitu produk 1, produk 2, produk 3 dan produk 4, apabila pengunjung ingin lebih mudah memilih sesuai dengan jenis produknya, pengunjung dapat memilih kategori atau sub menu yang terletak di samping kiri atas. 4. Kontak Gambar 4.21 Kontak 119
Pada tampilan menu kontak terdapat informasi mengenai Batik Gadis Collection seperti beberapa alamat workshop dan showroom atau alamat email yang dapat dikunjungi oleh pengunjung, dan nomer telepon atau nomer Hp yang dapat dihubungi oleh pengunjung dengan menggunakan font Arial ukuran 12 pt. 5. Profil Gambar 4.22 Profil 120
Pada tampilan menu profil terdapat informasi mengenai profil atau sejarah Batik Gadis Collection dengan menggunakan font Arial ukuran 12 pt. 6. Cara Pemesanan Gambar 4.23 Cara Pemesanan Pada tampilan menu Cara Pemesanan berisi tentang bagaimana cara pemesanan produk-produk yang ditawarkan oleh Batik Gadis Collection dengan menggunakan font Arial ukuran 12. Untuk pemesanan produk yang ada di 121
halaman website, dapat anda lakukan dengan 2 cara yaitu: 1. Order melalui Shopping Cart (Belanja Online) 2. Order melalui telepon, SMS (Short Message Service) atau BBM (BlackBerry Messenger). 7. Masuk Gambar 4.24 Masuk 122
Pada pembuatan website Batik Gadis Collection ini, tidak hanya menjelaskan tentang produk-produk yang ditawarkan atau profil Batik Gadis Collection, namun juga terdapat sejumlah kolom diantaranya bertuliskan nama dan kata sandi selain itu terdapat tombol masuk, agar para pengunjung dapat langsung bergabung pada forum Batik Gadis Collection dan juga dapat langsung berbelanja di website Batik Gadis Collection. 4.3 Pasca produksi Setelah melakukan finishing re-desain website Batik Gadis Collection penulis ingin melakukan penempatan website pada global yaitu server agar masyarakat luas mengetahui adanya perubahan yang telah dilakukan perusahaan. Pasca produksi adalah suatu proses dimana hasil dari karya penulis yang berupa website di publish ke internet atau web hosting agar dapat diakses langsung oleh calon pengguna website perusahaan Batik Gadis Collection. Di Indonesia sendiri speed atau kecepatan mengakses internet sangatlah terbatas tetapi tidak semua tempat tidak bagus melainkan hanya di beberapa tempat saja. Untuk menangani masalah tersebut penulis memanfaatkan desain website yang klasik dan elegan yang dapat mengkomunikasikan pesan yang disampaikan tetap dengan baik, salah satu caranya adalah dengan cara meminimalkan animasi yang berupa flash pada website tersebut sehingga isi dari website tersebut tidak hanya terpaku kepada animasi itu sendiri tetapi bagaimana cara membuat website yang sederhana tetapi menarik untuk dilihat tanpa selalu mengandalkan animasi itu sendiri. Selain dari kecepatan mengakses internet di Indonesia masih sangat terbatas, terdapat masalah lain juga yaitu waktu 123
pembuatan website ini sangatlah sedikit maka penulis tidak banyak mengeksplorasikan semua dari aspek-aspek desain itu sendiri. Karena sebab itu penulis berusaha untuk mendiskusikan tentang desian website ke beberapa temanteman yang mengerti di bidang desain itu sendiri sehingga hasilnya tidak akan mengecewakan. 124