IV. KONSEP PERANCANGAN. Gambar 2. Skema Penjabaran Tataran Lingkungan

Transkripsi

1 IV. KONSEP PERANCANGAN A. TATARAN LINGKUNGAN Gambar 2. Skema Penjabaran Tataran Lingkungan Tidak bisa dipungkiri bahwa pada dasarnya manusia harus bersahabat dengan alam atau lingkungannya. Oleh karena itu kesadaran dan menumbuhkan rasa cinta kepada lingkungan harus dilakukan kembali, khususnya di kota Jakarta yang sudah terjadi pencemaran begitu besar terutama pencemaran air dan udara. Salah satu upaya untuk menangani pencemaran air adalah dengan penanaman dan melestarikan hutan mangrove. Di Jakarta sendiri sudah terdapat hutan mangrove yang dikelola dengan baik tetapi masih banyak khalayak yg belum mengetahuinya salah satunya bernama Taman Wisata Alam Angke Kapuk. 15

2 Taman wisata ini membutuhkan media promosi dan informasi untuk bisa mengajak khalayak luas untuk berkunjung kesana. Oleh karena itu salah satu media informasi yang dibutuhkan adalah website. Dengan adanya website, bisa memberikan informasi kepada para pengunjung tentang keberadaan lokasinya. Selain itu, pemenuhan kebutuhan informasi lain bagi para pengunjung seperti manfaat mangrove, sejarah, fasilitas dan foto- foto bisa sekaligus di akses pada web ini. Akhirnya, yang diharapkan adalah pengunjung menjadi tertarik untuk mengunjungi langsung hutan mangrove bersama keluarga dan rekan- rekannya. Sehingga proses edukasi dan kecintaan akan hutan mangrove bisa tumbuh. B. TATARAN SISTEM Untuk bisa mengenalkan website Taman Wisata Alam Angke Kapuk tentunya diperlukan juga sebuah promosi agar sampai kepada khalayak luas. Beberapa cara promosi yang dilakukan antara lain : 1. Media Sosial Media sosial seperti Facebook, twitter dan Instagram merupakan strategi awal untuk mengenalkan produk website. Menurut laporan sebuah agensi marketing sosial yaitu "We Are Social" didapatkan data bahwa memasuki tahun 2015 sudah ada 72 juta pengguna aktif media sosial. Ini berarti peluang untuk promosi sangat besar, tinggal bagaimana cara mengemasnya secara menarik. Berikut dibawah ini merupakan data yang menunjukkan aktifitas dari berbagai sosial media. Gambar 3. Perkembangan Aktifitas Media Sosial di Indonesia Pada Tahun

3 Salah satu cara yang bisa dilakukan untuk menarik perhatian calon pengunjung pada media sosial antara lain : a. Menampilkan foto- foto Tampilkan foto Taman Wisata Alam Angke Kapuk dengan suasana terbaiknya. Tampilkan juga foto- foto dari para pengunjung yang sedang menikmati keindahan alamnya. Dengan hal tersebut, bisa membuat rasa penasaran calon pengunjung untuk melihat lebih dekat. Gambar 4. Instagram dari Jakarta Mangrove b. Membuat artikel Selain sebagai bahan edukasi, artikel ini bisa dijadikan kendaraan kepada calon pengunjung website untuk mengunjungi langsung website kita dengan melampirkan link sumber utamanya. Semakin banyak dan semakin rutin artikel di- publish maka semakin besar peluang website akan dikenal dan secara bersamaan menaikan ratting website digoogle. c. Brodcast Via WhatsApp Media sosial terbanyak setelah facebook adalah whatsapp. Ini juga merupakan salah satu target promosi. Caranya dengan mem- publish artikel- artikel ataupun info mengenai Taman Wisa Alam Angke Kapuk ke grup- grup Whatsapp yang ada. Jika artikel dan info dianggap menarik oleh si penerima 17

4 brodcast maka dengan senang hati ia akan berbagi kepada teman- temannya ataupun grup whatsapp lain yang ia punya. d. Melakukan Pameran Alternatif lain untuk bisa memperkenalkan Taman Wisata Alam Angke Kapuk adalah dengan melakukan pameran langsung di tempat umum atau pusat keramaian. Disini kita bisa langsung membagikan sauvenir dan brosur. Diharapkan dengan cara ini para pengunjung bisa melihat berbagai media promosi yang sudah tertulis dan segera bisa mengakses media sosial dan website yang ada. Gambar 5. Skema Penjabaran Tataran Sistem 18

5 C. TATARAN PRODUK Proses Perancangan Website Taman Wisata Angke Kapuk dilakukan dengan langkah sebagai berikut : 1. Survey lokasi Langkah ini dilakukan untuk bisa mendapatkan feel suasana dari Taman Wisata Angke yang nantinya bisa diterapkan dalam konsep perancangan web. Gambar 6. Elemen - Elemen Dari Lokasi Sebagai Konsep Awal Perancangan Elemen - elemen yang didapatkan dari hasil survey antara lain : a. Warna Warna dominan yang ditemukan adalah warna hijau yang berasal dari daun tumbuhan mangrove disepanjang taman wisata. Serta dikombinasi dengan warna abu- abu dan coklat dari warna jembatan bambu / kayu. 19

6 b. Jembatan kayu Terdapat banyak jembatan kayu yang menjadi jalan setapak bagi para pengunjung yang menghubungkan satu tempat dengan tempat lainnya. c. Danau Karena ini merupakan hutan mangrove, sudah pasti tanaman ini hidup disekeliling / tengah danau. Dan elemen lain yang bisa dimasukan adalah air danaunya. d. Natural dan Terasa Luas Feeling yang dirasakan saat berada di Taman Wisata ini adalah seperti berada bukan di Kota Jakarta melainkan ditengah hutan. Dan Saat melihat pemandangan dari atas menara, akan menimbulkan perasaan luas dan nyaman. 2. Pengambilan Foto Foto- foto pemandangan dan situasi di Taman Wisata Alam merupakan salah satu elemen penting yang harus dimasukan kedalam web. Karena bisa memberikan gambaran kepada khalayak luas mengenai gambaran keadaannya. Foto yang diambil bisa berupa pemandangan landscape dan beberapa foto pendukung lain untuk melengkapi keterangan lainnya. Gambar 7. Foto- Foto di TWA Angke Kapuk 20

7 3. Pengumpulan Materi Materi yang dimaksud disini adalah isi yang digunakan untuk melengkapi kebutuhan yang ada pada web. Baik berupa artikel, pengetahuan tentang mangrove, foto- foto maupun hal lain yang berkaitan dengan taman wisata alam angke kapuk. 4. Membuat Site Map Site Map atau peta website dapat digunakan sebagai daftar isi dalam sebuah buku. Ini sangat berpengaruh sebelum pembuatan website karena dari sinilah kita bisa menentukan jumlah menu atau peletakan konten. Dari sitemap ini pula bisa ditentukan berapa jumlah halaman yang harus didesain. Berikut dibawah ini merupakan site map pada website Taman Wisata Alam Angke Kapuk. Menu Beranda Tentang Kami Manfaat Arikel Magrove Fasilitas Hubungi Kami Ekologi Arikel 1 Penanaman Ekonomi Arikel 2 Pelestarian Fisik Arikel 3 Perlindungan Sosial Budaya Jenis Mangrove Gambar 8. Skema Site Map Dari Website Yang Akan Dibuat 21

8 5. Membuat Draft Website Pembuatan beberapa alternatif draft website membantu dalam proses layout / penempatan content dari website. Pada langkah ini bentuk dari draft hanya berupa outline disertakan dengan ukuran masing- masing objek. Pencarian draft terbaik disesuaikan dengan konsep dan kebutuhan dari website. Gambar 9. Draft Alternatif Website Draft yang dibuat pertama kali hanya draft halaman depan dari website. Setelah ditentukan draft desain terbaik, maka akan dilanjutkan draft desain halaman - halaman lainnya. 22

9 Gambar 10. Draft Alternatif Website 23

10 Dari 4 draft desain yang dibuat, maka diputuskan desain yang dipakai adalah draft desain ke tiga dengan alasan desain layout menggunakan wide screen yang mana sesusai dengan konsep awal yaitu ingin menimbulkan kesan luas dan nyaman. Alasan lain adalah karena konten yang ada lengkap sesuai dengan materi isi yang tersedia. Langkah selanjutnya adalah layout draft layout final yang telah dilengkapi dengan ukuran disetiap elemenya. Dan untuk ukuran web pada halaman beranda adalah 1440 x 4854 pixel. Dilanjutkan dengan membuat draft layout pada halaman- halaman lain. Gambar 11. Draft Halaman "Manfaat" 24

11 Gambar 12. Draft Halaman "Beranda" dan "Artikel" 25

12 Gambar 13. Draft Halaman "Hubungi Kami" 26

13 Gambar 14. Draft Halaman "Fasilitas" 27

14 6. Desain Final Website Khusus pada halaman depan website, saat dilakukan pembuatan draft layout, penulis sekaligus membuat tampilan desain finalnya pada dengan beberapa alternatif. Hal ini dilakukan untuk memastikan draft layout yang telah dibuat apabila telah dimasukan seluruh elemen aslinya akan terlihat baik dan seimbang. Berikut, desain alternatif yang telah dibuat. Gambar 15. Alternatif Desain 1 28

15 Gambar 16. Alternatif Desain 2 29

16 Gambar 17. Alternatif Desain 3 dan 4 30

17 Keputusan alternatif desain yang dipakai adalah alternatif desain 4 dengan alasan konsep yang ada sesuai yaitu rasa nyaman, luas, clean dan penggunaan layout yang ada sesuai dengan konten yang tersedia. 7. Mengubah Desain Kebahasa HTML dan CSS Sebelum melangkah ke pembuatan HTML website, hendaknya final desain yang telah dibuat masing- masing elemennya dipisahkan dan di save tersendiri dengan format png ataupun jpg. Semuanya dikumpulkan kedalam satu folder yang bernama "Images". Folder inilah yang nantinya akan dipakai untuk mengimport gambar. Proses pengubahan menjadi HTML dan CSS menggunakan software Adobe Dreamweaver. Dengan software ini, dilakukan pengcodingan pengaturan letak dari objek (layout), warna dan animasi yang ada pada website. Gambar 18. Folder Penempatan Website TWA Angke 31

18 Gambar 19. Tampilan Lembar Kerja Adobe Dreamweaver 8. Pembuatan Data Base dan CMS Langkah ini bisa disebut juga sebagai langkah untuk membuat website menjadi Dinamis. Maksudnya, admin bisa mengubah isi dari website tanpa harus masuk ke dalam pengkodingan. Yang dibutuhkan pada langkah ini adalah pembuatan database pada software XAMPP & MYSQL. Untuk proses preview, website dijalankan secara lokal pada personal komputer. Selain itu server yang harus di jalankan adalah MySQL Database, ProFTPD dan Apache Web Server. Gambar 20. Kotak Dialog XAMPP Manage Server 32

19 Gambar 21. Tampilan Data Base Website TWA Angke Setelah Database selesai, maka dibuatlah CMS (Content Management System). Inilah yang digunakan sebagai antarmuka interkatif antara admin, database dan tampilan web. Admin dapat meng- update seluruh konten dari antarmuka ini. Pembuatan CMS dilakukan oleh programer dengan menggunakan software PHP Designer ataupun Adobe Dreamweaver. Gambar 22. Tampilan CMS Website TWA Angke 33

20 D. TATARAN ELEMEN 1. Penggunaan Menu Berupa Icon Penggunaan Icon pada menu ditujukan untuk mengisi ruang kosong, membuat menu lebih mudah dikenali dan membuatnya tidak membosankan karena ditambahkan efek animasi saat kursor melewati atas menu. Menggambarkan gapura selamat datang. Pintu Depan sebuah website ada di Beranda. Menampilkan bagian logo dari TWA Angke untuk mengulas profil dan sejarahnya. Siluet tangan dalam bentuk abstrak. Menggambarkan bentuk tindakan yang menghasilkan sebuah manfaat Dilambangkan dengan bentuk tumpukan kertas dan icon pohon mangrove sebagai spesifikasi artikel tentang mangrove Menggambarkan pohon mangrove dengan menonjolkan akar mangrovenya. Artikel berisi tentang mangrove Perahu canoe merupakan salah satu fasilitas yang ada di TWA Angke Kapuk Balon teks menggambarkan adanya sebuah komunikasi, informasi yang disampaikan dan sebuah tanggapan 34

21 2. Motion Pada Slider Motion pada Slider bertujuan untuk menarik perhatian pengunjung untuk tetap bertahan melihat website. Pada web TWA ini terdapat 3 slide dengan motion transisi foto yang berbeda. Slide 1 dan 3 menggunakan efek Fade sedangkan slide 2 menggunakan efek zoomout. 3. Menggunakan Font Roboto Gambar 23. Tampilan Slider Pada Website Gambar 24. Tampilan Font Roboto Font Roboto lebih dikenal sebagai Ice Cream Sandwich (ICS), font ini dikenalkan oleh Google bersamaan dengan dirilisnya Android 4.0. Font Roboto support dengan layar kecil smartphone maupun layar besar untuk tablet. Font Roboto terlihat sederhana, namun dari kesederhanaan itu tampak sebuah rasa elegan. Font ini menurut mirip dengan Arial bahkan lebih mirip lagi dengan Helvetica. Font Roboto mudah untuk dibaca, terlihat tidak menyilaukan mata dan jelas. 35

22 4. Pemilihan Warna Warna mayoritas yang digunakan pada web ini adalah warna hijau dan untuk teksnya menggunakan warna abu- abu. Komposisi warna hijau yang digunakan adalah dengan campuran R : 156, G : 198, B : 84 atau dengan kode penulisan pada adobe dreamweaver #9CC554 R : 156 G : 198 B :84 Alasan menggunakan warna hijau dikarenakan warna ini sangat berhubungan dengan alam. Warna yang sangat tenang yang melambangkan pertumbuhan, kesegaran dan harapan. Mata juga lebih mudah menangkap warna ini serta tidak seaktif warna kuning, orange dan merah. 5. Penggunaan Font "Awesome" Gambar 25. Penggunaan Font Awesome Untuk Icon Font awesome adalah kumpulan icon yang telah dibuat sedemikian rupa dan menggunakan system font icon yang memungkinkan untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut icon menjadi pecah. Dan tentunya penggunaan font icon ini akan menjadikan website lebih ringan dalam proses loadingnya 36