Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.
PERANCANGAN APLIKASI MEDIA INFORMASI
PANDUAN WISATA KAWASAN INTI KOTA TUA
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Seni (S. Ds)
Nama : Shelli Bilanti
NIM : 11120210111
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2015
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Shelli Bilanti
NIM : 11120210111
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir :
PERANCANGAN APLIKASI MEDIA INFORMASI
PANDUAN WISATA KAWASAN INTI KOTA TUA
dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan
belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas
Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan
pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali
arahan pembimbing akademik dan nara sumber.
Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya,
apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam
pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
iii
gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang
berlaku di Universitas Multimedia Nusantara.
Tangerang, 1 Juli 2015
Shelli Bilanti
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
iv
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN APLIKASI MEDIA INFORMASI
PANDUAN WISATA KAWASAN INTI KOTA TUA
Oleh
Nama : Shelli Bilanti
NIM : 11120210111
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Tangerang, 1 Juli 2015
Ketua Program Studi
Desi Dwi Kristanto, M.Ds.
Penguji
Chara Susanti, S.Ds., M.Ds.
Ketua Sidang
Iqbal Maimun Umar, S.Sn., M.Ds.
Pembimbing I
Ardyansyah, S.Sn., M.M., M.Ds.
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
v
KATA PENGANTAR
Puji Syukur kepada Tuhan Yang Maha Esa atas penyertaannya selama ini
sehingga penulis dapat menyelesaikan tugas akhirnya dalam membuat aplikasi
dan laporan tugas akhir yang berjudul “Perancangan Aplikasi Media Informasi
Panduan Wisata Kawasan Inti Kota Tua” sesuai dengan waktu yang diberikan.
Kota Tua Jakarta yang menjadi salah satu pesona wisata yang dapat
menarik wisatawan untuk menelusuri sejarah Indonesia. Potensi yang dimiliki
oleh Kota Tua sangat besar, sehingga membuat pemerintah melakukan revitalisasi
untuk membangun kembali jiwa Kota Tua yang telah lama tertidur. Sebagai
bangsa Indonesia, kita harus membantu melestarikan budaya dan membantu
dalam berbagai hal agar sejarah Indonesia tidak hilang begitu saya.
Maka dari itu penulis membuat sebuah media informasi interaktif panduan
wisata yang berisikan informasi wisata Kota Tua untuk membantu turis
menjelajahi kawasan Kota Tua dan memperkenalkan kembali Kota Tua Jakarta.
Penulis memanfaatkan perkembangan teknologi sebagai salah satu cara
memberikan informasi yang dibutuhkan untuk para turis Kota Tua.
Penulis mengucapkan terima kasih kepada pihak-pihak yang telah
membantu dalam pembuatan Tugas Akhir ini.
1. Ketua Program Studi Seni & Desain, Desi Dwi Kristanto, M.Ds.,
2. Dosen Pembimbing, Ardyansyah, S.Sn., M.M., M.Ds., yang telah
membimbing penulis sampai menyelesaikan karya ilmiah ini dan
memberi dukungan, waktu, dan ilmunya.
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
vi
3. Seluruh angora keluarga penulis yang telah memberi dukungan secara
psikologis maupun materi sehingga penulis dapat menghadapi proses
pembuatan tugas akhir ini.
4. Teman-teman yang telah membantu penulisan dalam pengerjaan tugas
akhir ini. Sattiawan, Viki Theolorado, Felix Delistio, Elim Kurnadi
dan Regina Wanda yang membantu selama proses perancangan dan
penulisan laporan tugas akhir.
5. Pihak-pihak lain yang tidak dapat disebutkan satu per satu, yang telah
membantu proses pembuatan tugas akhir ini.
Tangerang, 1 Juli 2015
Shelli Bilanti
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
vii
ABSTRAKSI
Jakarta pada jaman penjajahan Belanda disebut sebagai Batavia ini, adalah salah satu tempat wisata yang sering dikunjungi oleh turis lokal maupun dari luar negeri. Kawasan Kota Tua yang tersebar diseluruh Jakarta membuat pemerintah membagi menjadi beberapa kelompok wilayah. Akan tetapi, wisata Kota Tua yang tersebar di beberapa tempat menjadikan para turis hanya berwisata ke tempat yang paling terkenal. Kurangnya informasi yang jelas membuat beberapa tempat wisata jarang dikunjungi dibandingkan museum yang berdekatan dengan Taman Fatahillah, contohnya ditandai dengan peta yang kurang memadai dan tidak efektif dalam memaparkan kawasan Kota Tua. Perancangan media informasi interaktif panduan wisata kawasan inti Kota Tua merupakan salah satu penyelesaian dari masalah tersebut. Aspek ini berkaitan juga dengan perkembangan teknologi dunia menjadikan smartphone sebagai media mobile dari perancangan ini. Rumusan masalah yang diangkat adalah bagaimana bentuk media informasi, fitur apa yang ada untuk membantu turis berwisata dan desain interface yang dapat menunjukkan identitas Kota Tua. Cara untuk mendapatkan data sebagai landasan perancangan ini dapat dilakukan dengan penyebaran kuisioner, observasi lapangan dan wawancara. Data yang terkumpul memberikan hasil dari perancangan ini sesuai dengan masalah yang ada pada kawasan Kota Tua. Perancangan akan dilakukan dengan beberapa tahap, dari brainstorming, pengumpulan data, sketsa, evaluasi dan akhirnya penulis melakukan tahap visualisasi. Dengan adanya sebuah perancangan ini, hasil yang diharapkan oleh penulis dapat menjadikan aplikasi media informasi sebagai alat pembantu turis lokal maupun internasional untuk mendapatkan informasi akan tata letak bangunan-bangunan dan sejarah yang berhubungan dengan bangunan tersebut di Kota Tua.
Kata kunci : (aplikasi, wisata, kota tua, turis, desain)
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
viii
ABSTRACT
Jakarta used to be called Batavia in the Dutch colonial era, which is right now is one of the most popular tourist attraction both by local and abroad tourist. Old City area spread throughout Jakarta, makes the government divided into several groups of regions. However, the Old City tour scattered in several places which making the tourists just traveled to the several places and only most famous places. The lack of information makes some museum and any other tourist attraction rarely visited rather than other museums where it place close to Fatahillah Park. One of the caused is by ineffetive and inadequate maps in presenting the Old City area. Interactive tourist guide that contains Old City travel information is one of the accomplishment of the matter. This aspect is also related to the development of the world technology, making the smartphone become the medium of this project. The formulation of the problem of the issues is based on media, the features that can help tourist traveled, and interface design that can show the identity of the Jakarta Old City. The process to collect the data as the basis of this project can be done by outspread questionnaires, observation in the field, and an interview. The collected data gives the accurate results accordance with existing issues in the Old City area. The process of this project through out several stages, from brainstorming, data collection, sketch, evaluation and the final is visualization stage. With this project of mobile application, the author expected that the results can help local and international tourist to get information on location and the history that lies on each buildings in the Old City. Keywords : (application, tour, old town, tourist, design)
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
ix
DAFTAR ISI
COVER .................................................................................................................... I!
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT .................... II!
HALAMAN PENGESAHAN TUGAS AKHIR ................................................ IV!
KATA PENGANTAR .......................................................................................... V!
ABSTRAKSI ...................................................................................................... VII!
ABSTRACT ....................................................................................................... VIII!
DAFTAR ISI ........................................................................................................ IX!
DAFTAR GAMBAR ........................................................................................ XIII!
DAFTAR TABEL .......................................................................................... XVIII!
BAB I PENDAHULUAN ...................................................................................... 1!
1.1.! Latar Belakang .......................................................................................... 1!
1.2.! Rumusan Masalah ..................................................................................... 3!
1.3.! Batasan Masalah ........................................................................................ 3!
1.4.! Tujuan Tugas Akhir .................................................................................. 6!
1.5.! Manfaat Tugas Akhir ................................................................................ 6!
1.6.! Metode Pengumpulan Data ....................................................................... 7!
1.7.! Metode Perancangan ................................................................................. 8!
1.8.! Skematika Perancangan .......................................................................... 10!
BAB II TINJAUAN PUSTAKA ......................................................................... 11!
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
x
2.1.! Media Interaktif ....................................................................................... 11!
2.1.1.! Mobile Applications ..................................................................... 14!
2.1.2.! Narasi Interaktif ........................................................................... 15!
2.1.3.! Peta Interaktif ............................................................................... 18!
2.2.! Graphical User Interface ........................................................................ 20!
2.3.! Komunikasi dan Informasi ...................................................................... 24!
2.3.1.! Elemen-elemen Komunikasi ........................................................ 25
2.3.2.! Fase Komunikasi Strategis ........................................................... 27!
2.3.3.! Media Informasi ........................................................................... 29!
2.4.! Pariwisata ................................................................................................ 29
2.5.! Semiotika ................................................................................................. 33
2.6.! Teori Gestalt ............................................................................................ 35
2.7.! Sistem Grid ............................................................................................. 36
2.8.! Sign System .............................................................................................. 41
2.8.1.! Tanda ............................................................................................ 44
2.8.2.! Simbol dan Icon ........................................................................... 45!
2.8.3.! Pictogram ..................................................................................... 46
2.9.! Tipografi .................................................................................................. 46
2.10.! Warna ...................................................................................................... 52
2.11.! Ilustrasi .................................................................................................... 56
2.12.! Fotografi .................................................................................................. 60
BAB III ANALISIS DATA PENELITIAN ....................................................... 61!
3.1.! Gambaran Umum .................................................................................... 61!
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
xi
3.1.1.! Sejarah Kota Tua .......................................................................... 63!
3.1.2.! Batasan Wilayah Kota Tua ........................................................... 65!
3.2.! Tahapan Kerja ......................................................................................... 77
3.2.1.! Metode Survey Kuesioner ............................................................ 77
3.2.2.! Metode Observasi ......................................................................... 85!
3.2.3.! Wawancara ................................................................................... 87
3.3.! Analisis Data ........................................................................................... 91
3.4.! Studi Eksisting ........................................................................................ 93
BAB IV KONSEP DAN PERANCANGAN ...................................................... 98!
4.1.! Konsep Perancangan ............................................................................... 98!
4.1.1.! Tujuan Perancangan ..................................................................... 99!
4.1.2.! Strategi Perancangan .................................................................... 99
4.2.! Mind Mapping ....................................................................................... 100
4.3.! Brainstroming ....................................................................................... 102
4.4.! Perancangan .......................................................................................... 103
4.4.1.! Karakter Visual .......................................................................... 103
4.4.2.! Layout ......................................................................................... 104!
4.4.3.! Icon pada Aplikasi ...................................................................... 109!
4.4.4.! Warna ......................................................................................... 122
4.4.5.! Tipografi ..................................................................................... 123!
4.4.6.! Aplikasi Pada Media .................................................................. 126
4.4.7.! Media Pemasaran Aplikasi ......................................................... 135
BAB V PENUTUP ............................................................................................. 140!
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
xii
5.1.! Kesimpulan ........................................................................................... 140!
5.2.! Penutup .................................................................................................. 141!
DAFTAR PUSTAKA ....................................................................................... XIX!
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
6
DAFTAR GAMBAR
Gambar 2.1. Teori Freytag .................................................................................... 16
Gambar 2.2. Interaction Nodal Plot ..................................................................... 17
Gambar 2.3. Interaction Modulated Plot ............................................................. 17
Gambar 2.4. Interaction Open Plot ....................................................................... 18
Gambar 2.5. Contoh Perbandingan Screen Layout ............................................... 22
Gambar 2.6. Contoh Prinsip Clarity pada Icon .................................................... 23
Gambar 2.7. Good vs Bad Font ............................................................................ 24
Gambar 2.8. Teori Gestalt ..................................................................................... 36
Gambar 2.9. Anatomi Sistem Grid ....................................................................... 37
Gambar 2.10. Manuscript Grid ............................................................................. 39
Gambar 2.11. Column Grid .................................................................................. 40
Gambar 2.12. Modular Grid ................................................................................. 40
Gambar 2.13. Hierarchical Grid .......................................................................... 41
Gambar 2.14. Salahsatu Contoh Signage .............................................................. 42
Gambar 2.15. Contoh Simbol dan Icon ................................................................ 46
Gambar 2.16. Anatomi Typeface .......................................................................... 47
Gambar 2.17. Klasifikasi Tipografi ...................................................................... 52
Gambar 2.18. Munsell Color System .................................................................... 54
Gambar 2.19. Ilustrasi Media Pensil ..................................................................... 57
Gambar 2.20. Ilustrasi Media Drawing Pen .......................................................... 58
Gambar 2.21. Ilustrasi Media Cat Air ................................................................... 58
xiii
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
7
Gambar 2.22. Ilustrasi Media Airbrush ................................................................ 59
Gambar 2.23. Ilustrasi Vector ............................................................................... 59
Gambar 3.1. Pangeran Fatahillah .......................................................................... 63
Gambar 3.2. Jan Pieterszoon Coen ....................................................................... 64
Gambar 3.3. Peta Batavia dengan Benteng pada Tahun 1667 ............................. 64
Gambar 3.4. Zona 2-Kawasan Inti Kota Tua ........................................................ 65
Gambar 3.5. Kawasan Wisata Inti/Pusat Kota Tua ............................................... 66
Gambar 3.6. Balaikota Jakarta Tahun1710 ........................................................... 68
Gambar 3.7. Gereja Belanda Lama ....................................................................... 69
Gambar 3.8. Kantor Pos Indonesia ....................................................................... 71
Gambar 3.9. Café Batavia ..................................................................................... 72
Gambar 3.10. Museum Bank Mandiri .................................................................. 73
Gambar 3.11. Jembatan Kota Intan ....................................................................... 76
Gambar 3.12. Dokumentasi Penyebaran Kuesioner ............................................. 84
Gambar 3.13. Suasana Taman Fatahillah saat Weekend ....................................... 85
Gambar 3.14. Peta Objek Wisata Kota Tua Jakarta .............................................. 86
Gambar 3.15. Pintu Masuk Museum Sejarah Jakarta ........................................... 86
Gambar 3.16. Ruangan Museum Seni Rupa dan Keramik ................................... 87
Gambar 3.17. Jembatan Kota Intan ....................................................................... 87
Gambar 3.18. Dokumentasi Wawancara dengan Pihak UPK Kota Tua ............... 89
Gambar 3.19. Dokumentasi Wawancara dengan Bapak Asep Kambali ............... 91
Gambar 3.20. Albany History District .................................................................. 94
Gambar 3.21. Albury Walking Tour ..................................................................... 95
xiv
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
8
Gambar 3.22. Helen Tour ..................................................................................... 95
Gambar 3.23. Map Brosur UPK Kota Tua ........................................................... 96
Gambar 3.24. Booklet UPK Kota Tua .................................................................. 97
Gambar 4.1. Mind Mapping ................................................................................ 100
Gambar 4.2. Brainstroming Perancangan Panduan Wisata ................................ 102
Gambar 4.3. Brainstroming Wisata Kawasan Inti Kota Tua ............................. 103
Gambar 4.4. Alur Plot Perancangan ................................................................... 105
Gambar 4.5. Layout Grid Halaman ..................................................................... 106
Gambar 4.6. Grid pada Beberapa Button ............................................................ 106
Gambar 4.7. Grid pada Icon ............................................................................... 107
Gambar 4.8. Tombol-tombol Navigasi ............................................................... 108
Gambar 4.9. Icon Obyek Wisata ......................................................................... 109
Gambar 4.10. Icon Museum Sejarah Jakarta ...................................................... 110
Gambar 4.11. Brainstroming Museum Sejarah Jakarta ...................................... 111
Gambar 4.12. Icon Museum Wayang ................................................................. 111
Gambar 4.13. Brainstroming Museum Wayang ................................................. 112
Gambar 4.14. Icon Museum Seni Rupa dan Keramik ........................................ 112
Gambar 4.15. Brainstroming Museum Seni Rupa dan Keramik ........................ 113
Gambar 4.16. Icon Café Batavia ......................................................................... 114
Gambar 4.17. Café Batavia ................................................................................. 115
Gambar 4.18. Icon Kantor Pos Indonesia ........................................................... 115
Gambar 4.19. Brainstroming Kantor Pos Indonesia ........................................... 116
Gambar 4.20. Icon Museum Bank Indonesia ...................................................... 117
xv
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
9
Gambar 4.21. Brainstroming Museum Bank Indonesia ..................................... 118
Gambar 4.22. Icon Museum Bank Mandiri ........................................................ 118
Gambar 4.23. Brainstroming Museum Bank Mandiri ........................................ 119
Gambar 4.24. Icon Stasiun Jakarta Kota ............................................................. 119
Gambar 4.25. Brainstroming Stasiun Jakarta Kota ............................................ 120
Gambar 4.26. Icon Toko Merah .......................................................................... 120
Gambar 4.27. Brainstroming Toko Merah ......................................................... 121
Gambar 4.28. Icon Jembatan Kota Intan ............................................................ 121
Gambar 4.29. Brainstroming Jembatan Kota Intan ............................................ 122
Gambar 4.30. Warna Primer ............................................................................... 123
Gambar 4.31. Warna Sekunder ........................................................................... 123
Gambar 4.32. Sketsa Logo .................................................................................. 124
Gambar 4.33. Sketsa Logo II .............................................................................. 124
Gambar 4.34. Logotype Explore Fatahillah ........................................................ 125
Gambar 4.35. Typeface Athelas .......................................................................... 125
Gambar 4.36. Typeface Open Sans ..................................................................... 126
Gambar 4.37. Icon Explore Fatahillah ................................................................ 127
Gambar 4.38. Icon pada Halaman Smarthone .................................................... 127
Gambar 4.39. Tombol Reverse di Halaman Menu Utama .................................. 129
Gambar 4.40. Halaman Pembuka dan Halaman Menu Utama ........................... 129
Gambar 4.41. Halaman Peta dan Halaman Daftar .............................................. 130
Gambar 4.42. Deskripsi Halaman Konten .......................................................... 131
Gambar 4.43. Galeri Foto Museum Sejarah Jakarta ........................................... 132
xvi
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
10
Gambar 4.44. Galeri Foto Toko Merah .............................................................. 132
Gambar 4.45. Galeri Foto Jembatan Kota Intan ................................................. 132
Gambar 4.46. Halaman Konten .......................................................................... 133
Gambar 4.47. Halaman Acara dan Transportasi ................................................. 134
Gambar 4.48. Halaman Tentang Kami ............................................................... 134
Gambar 4.49. Sketsa Layout Poster .................................................................... 135
Gambar 4.50. Poster Explore Fatahillah ............................................................. 136
Gambar 4.51. Contoh Lokasi Penempatan Poster .............................................. 136
Gambar 4.52. Explore Fatahillah pada Instagram .............................................. 137
Gambar 4.53. Sketsa Layout Papan Informasi .................................................... 138
Gambar 4.54. Papan Informasi Museum Sejarah Jakarta ................................... 138
Gambar 4.55. Sketsa Website Explore Fatahillah ............................................... 139
Gambar 4.56. Website Explore Fatahillah .......................................................... 139
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015
11
DAFTAR TABEL
Tabel 3.1. Rangkaian Jadwal Penelitian ............................................................... 77
Tabel 3.2. Hasil Survey Pertama-01 ..................................................................... 79
Tabel 3.3. Hasil Survey Pertama-02 ..................................................................... 79
Tabel 3.4. Hasil Survey Pertama-03 ..................................................................... 80
Tabel 3.5. Hasil Survey Pertama-04 ..................................................................... 80
Tabel 3.6. Hasil Survey Pertama-05 ..................................................................... 80
Tabel 3.7. Hasil Survey Pertama-06 ..................................................................... 81
Tabel 3.8. Hasil Survey Kedua-01 ........................................................................ 82
Tabel 3.9. Hasil Survey Kedua-03 ........................................................................ 82
Tabel 3.10. Hasil Survey Kedua-03 ...................................................................... 82
Tabel 3.11. Hasil Survey Kedua-04 ...................................................................... 83
Tabel 3.12. Hasil Survey Kedua-05 ...................................................................... 83
Tabel 3.13. Hasil Survey Kedua-06 ...................................................................... 83
Tabel 3.14. Hasil Survey Kedua-07 ...................................................................... 84
Tabel 3.15. Tingkat Kunjungan Museum dan Bangunan Bersejarah ................... 91
Tabel 3.16. Tingkat Pengetahuan Informasi dan Responden ............................... 92
Tabel 3.17. SWOT ................................................................................................ 93
xviii
Perancangan Aplikasi..., Shelli Bilanti, FSD UMN, 2015